NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】
近期在看NodeJS相关
不得不说NodeJS+Express 进行网站开发是很不错，对于喜欢玩JS的来说真是很好的一种Web开发组合
在接触NodeJS时受平时Java或者C#中API接口等开发的思维惯性，类比着去学习了解发现其实很多都是通性的
特别是NodeJS中一个JS文件中方法通过exports可以在其他文件中进行require这种机制，不就类似Java中import（导入架包/引用类）？不就类似C#中Using(DLL组件或者引用类)么？
MVC模式下Web开发，其中对应在NodeJS中的路由（Router）不就是Controller? 其它M/V中想想都是一样，这样去一类比其实上手就赶脚一通百通
接下来就是些特定语言有特定的实现方式语法及特色
个人觉得在复杂的工程：其实前后端分离后，不就是后端怎么CRUD数据？前端怎么去使用接口回显数据对其交互等等；
工程的复杂性主要体现在业务逻辑实现/数据安全/Web性能/体验等等等吧
----扯多了-----------------------------------------------------
//在接触学习中，首先尝试了怎么去搭建工程连接数据库
下面就练手Test 做一个简单的Demo总结一下
适合新手刚开始接触的人
在Demo中主要是实现了怎么连接MongoDB数据库以及从数据库回显数据/还有往数据库中写入数据
//算是入门级的Demo走通了数据录入及回显
如下图：左侧展示录入的数据//右侧填写数据后点击OK 按钮数据就写入数据库
测试的录入的数据
//------------------------------------------------------------------------------------------------------------------------------------------------------------
首先环境安装啥的在理就不在赘述哈
创建Express 【Ejs模板的】工程 及Npm MongoDB 后 搭建对应文件夹【图中我的工程里面就加了一个Models】
关于其他文件夹百度上有很多对应说明介绍
//工程中我就采用默认路由 Index 【另外一个Users 我在程序入口 App.js中注释掉了（没啥业务含量用不上）】
首先是Models目录中
创建了个连接MongoDB数据库及构建数据
【上图中 TestDB.js 内容】
/**
* Created by Yi on 2017/5/8.
*/ //testDB Model //创建 mongodb数据库连接 var mongoose = require('mongoose');
var DB = mongoose.connect('mongodb://localhost:27017/testAppDB');//红色为数据库名 //
mongoose.connection.on("open", function () {
console.log("数据库连接成功");
}); //
mongoose.connection.on("error", function (error) {
console.log("数据库连接失败" + error);
});
//创建数据文档模板【在SQL数据库中 即一个表（列名字段等） NoSQL数据库中即数据文档（成员变量名）】
var testSchema = new mongoose.Schema({
SortID: {type: String},
Name: {type: String},
Sex: {type: String},
Address: {type: String},
timeDate: {type: Date, default: Date.now()}
}); module.exports = mongoose.model('TestModel', testSchema);
//下面在构造一个数据Model“类”
/**
* Created by Yi on 2017/5/8.
*/ // 上传/回显数据通用 数据Model
var tempModel = {
SortID: "",
Name: "",
Sex: "",
Address: "",
timeDate: ""
}; module.exports = tempModel;
Router【即 Controller 层】
var express = require('express');
var router = express.Router();
//引用连接数据库Model
var TestModel = require('../models/testDB');
// test 数据
// var resData = [];
// resData.push(
// {
// SortID: "1",
// Name: "A",
// Sex: "女",
// Address: "SSS",
// timeDate: "05-08"
// }
// );
// resData.push(
// {
// SortID: "2",
// Name: "B",
// Sex: "男",
// Address: "XXX",
// timeDate: "05-08"
// }
// );
// 初始化回显 数据库已录入数据
router.get('/', function (req, res, next) {
// res.render('testDB', {title: 'Express'});
TestModel.find({}, function (err, resData) {
if (err) return next(err);
res.render('index', {
title: "TestDB",
testData: resData
});
});
});
//1 可以直接用Form表单方式提交数据
//2 或者通过页面脚本绑定事件响应结合JQuery的Ajax
// 实现调用路由（controller）接口将数据写入数据库
//一般开发中会在页面脚本中调用很多其他或者外部接口//【该方式比较常用 即就把路由方法当成一个对外的接口】
router.post('/insert', function (req, res) {
var params = req.body;
//MogoDB中可以用Create方法添加数据
TestModel.create(params, function (err) {
if (err) res.end('{result:-1}');
else {
TestModel.find({}, function (error, data) {
if (error) res.end('{result:-1}');
else {
res.end('{result:1,data:' + data + '}');
}
});
}
});
});
module.exports = router;
View
我这直接在Index中修改页面【创建Express时采用的Ejs模板】当然用Html的也可以都是一样的
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body> <div id="ShowDataArea">
<h4>此处展示 录入的数据 （用Ejs模板方式）</h4>
<span>多条数据采用forEach处理</span>
<% testData.forEach(function(testModel){ %>
<ul>
<li><span>编号</span><span><%= testModel.SortID %></span></li>
<li><span>姓名</span><span><%= testModel.Name %></span></li>
<li><span>性别</span><span><%= testModel.Sex %></span></li>
<li><span>地址</span><span><%= testModel.Address %></span></li>
</ul>
<% }) %> </div>
<div id="ShowArea">
<h4>采用 <%= title %> 测试Node - MongoDB 数据 写入/修改/删除/回显等</h4>
<hr>
<div id="SortID"><span>编号</span><input type="text" placeholder="编号"/></div>
<div id="Name"><span>姓名</span><input type="text" placeholder="姓名"/></div>
<div id="Sex"><span>性别</span><input type="text" placeholder="性别"/></div>
<div id="Address"><span>地址</span><input type="text" placeholder="地址"/></div>
<button id="uploadData">OK</button>
</div> </body>
<script type="text/javascript" src="/plug-in/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/testPage.js"></script>
<!--页面JS如下-->
</html>
页面脚本：JS
var tempModel = {
SortID: "",
Name: "",
Sex: "",
Address: "",
timeDate: ""
};
$(function () {
$("#uploadData").on("click", function () {
alert("上传数据到MongoDB中");
//构造数据类
tempModel.SortID = $("#SortID").find("input").val();
tempModel.Name = $("#Name").find("input").val();
tempModel.Sex = $("#Sex").find("input").val();
tempModel.Address = $("#Address").find("input").val();
tempModel.timeDate = Date.now();
//通过Ajax更新数据
$.ajax({
type: 'post',
// url: "http://localhost:3000/insert",
url: "/insert",
dataType: "json",
data: tempModel,
success: function (resData) {
if (resData.result == 1) {
//更新页面列表
alert('resData');
}
},
error: function (error) {
alert('error:' + error);
}
});
});
});
//现在在回过来想想，结合常规MVC模式的Web开发去类比，这不就是一回事哈~~
//初版Demo
//后期NodeJS学习了解中会根据掌握，继续添加相应模块
NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】的更多相关文章
- nodejs+express+mongodb简单的例子
简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比 ...
- NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】
Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 ...
- NodeJS+Express+MongoDB
一.MongoDB MongoDB是开源,高性能的NoSQL数据库:支持索引.集群.复制和故障转移.各种语言的驱动程序丰富:高伸缩性:MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言 ...
- 【重点突破】—— Nodejs+Express+MongoDB的使用基础
前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express ...
- nodejs+express+mongodb实现登录注册
nodejs+express+mongodb实现登录注册 1 简介 登录注册功能使用nodejs+express+mongodb完成,其中对mongodb的操作使用mongoose完成,对mongod ...
- 从无到有，用Nodejs+express+mongodb搭建简易登陆系统
前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说 ...
- NodeJs+Express实现简单的Web增删改查
前一段时间,公司组织了一次NodeJs的技术分享,自己有幸去听了听,第一次接触NodeJs,后来经过自己学习和探索,完成了一个很简单的Web演示项目,在这里和初学者做以分享,开发工具:WebStorm ...
- Nodejs&express+mongodb完成简单用户登录(即Nodejs入门)
刚了解nodejs,发现nodejs配置起来不复杂,但也有很多需要注意的地方,今天就记录一下,以后也可拿出来看看. 要完成这个简单的示例,从零开始,走三步就行了. 一.搭建开发环境 二.创建项目(ex ...
- nodejs+express+mongodb写api接口的简单尝试
1:启动mongodb服务 我的mongoDB的安装目录:E:\mongoDB\bin,版本:3.4.9 打开cmd -> e:(进入e盘) -> cd mongoDB/bin(进入mo ...
随机推荐
- MYSQL数据库-其他
FROM:实验楼 索引: 当表中有大量记录时,若要对表进行查询,没有索引的情况是全表搜索.而如果在表中已建立索引,在索引中找到符合查询条件的索引值,通过索引值就可以快速找到表中的数据. 建立索引: $ ...
- Unity 3D Framework Designing(7)——IoC工厂理念先行
一谈到 『IoC』,有经验的程序员马上会联想到控制反转,将创建对象的责任反转给工厂.IoC是依赖注入 『DI』 的核心,大名鼎鼎的Spring框架就是一个非常卓越的的控制反转.依赖注入框架.遗憾的是, ...
- Mybatis 中一对多，多对一的配置
现在有很多电商平台,就拿这个来说吧.顾客跟订单的关系,一个顾客可以有多张订单,但是一个订单只能对应一个顾客. 一对多的顾客 <?xml version="1.0" encod ...
- mariadb 长链接时间限制导致队列消费进程崩溃
项目是一个数据同步项目,线下Android客户端把本地sqllite数据提交到云端队列,php做守护进程消费队列,以同步数据.初测没有问题,可是时不时出现诡异的崩溃,因为设置了错误邮件报警,发现错误代 ...
- Struts2之i18N国际化
对于i18n其实没有太多内容,一般的公司用不到这些内容,除非是跨国公司,但即便是跨国公司也不一定会使用i18n来进行国际化处理,所以本篇内容仅供大家了解,不做深入的探讨,希望通过本篇内容,可以帮助大家 ...
- 老李分享：robotium3.6与4.0 later 的区别 2
再仔细看了下4.0中的方法: java.util.ArrayList<android.view.View> getCurrentViews() Returns an ...
- Selenium测试专项三班隆重开班
Selenium测试专项三班隆重开班 应广大测试技术人员要求,以及企业技术需求.Selenium提前一周开课了,只针对合作的每家企业提供1-2个参训名额.预计培训60人次.但报名人数却远远超出我们预期 ...
- 手机自动化测试：Appium源码之API(2)
手机自动化测试:Appium源码之API(2) TouchAction AppiumDriver的辅助类,主要针对手势操作,比如滑动.长按.拖动等.TouchAction的原理是讲一系列的动作放在 ...
- dotNet的体系结构介绍
一.公共语言运行库 .NET Framework 的核心是其运行库执行环境,称为Common Language Run,通常在CLR控制下运行的代码称为托管代码(由GC进行资源管理和回收),还有一部分 ...
- JS高级学习路线——面向对象进阶
构造函数进阶 使用构造函数创建对象 用于创建对象 其除了是一个函数之外,我们又称之为构造对象的函数 - 简称构造函数 function Product(name,description){ //属性 ...