用Node做一个接口，并操作一下数据库连接到前端页面。
1、安装
node和express
node安装就不说了网上一大堆，给个链接不会的看看就懂了
express安装使用npm
npm i -g express generator //全局安装【jade模板】安装完成之后查看是否安装成功
express --version //查看版本号
新建一个express项目
自动创建项目：express +名字
npm install 安装依赖
npm start 或者 node bin/www 启动express
浏览器打开http://localhost:3000/
此时已经express已经成功了.
express项目目录介绍
设置模板引擎
默认是jade文件
想使用：ejs模板引擎配置
命令行安装：
npm install ejs-mate --save在app.js中修改如下代码
var engine = require('ejs-mate');//添加引用app.set('views', path.join(__dirname, 'views'));//在app.js中找到这个行
app.set('view engine', 'ejs');//修改jade为ejs
app.engine('ejs', engine);//添加这行此时就可以把view文件夹下的文件删除，创建自己的XX.ejs文件
想使用：HTML模板引擎配置
命令行安装：
npm install ejs --save在app.js中修改如下代码
var ejs=require('ejs');app.set('views', path.join(__dirname, 'views'));
app.engine('html',ejs.__express);
app.set('view engine', 'html');此时就可以把view文件夹下面文件删除，创建自己的XX.html文件
如果想知道为什么这么做呢？你可在链接中看看【】
2、服务器连接数据库
首先：打开自己的服务器。【必须要打开，必须要打开，必须要打开！！！】
打开mongodb还记得吗？
mongodb的bin路径>mongod --dbpath 数据目录
在自己新建的express项目目录根文件路径下安装Mongoose
npm install mongoose --save在自己刚刚创建的项目(express)文件夹根目录上，新建db.js，内容：
【在此之前，对数据库的增删改查需要验证用户信息】因此打开数据库输入以下命令
db.createUser( {
user: "sa",
pwd: "sa",
roles: [ { role: "root", db: "admin" } ]
});增加完成之后，将新建的用户名密码作为URL的一部分。
var mongoose = require("mongoose"); //引入mongoose
mongoose.connect('mongodb://sa:sa@host/db',{ useNewUrlParser: true,useUnifiedTopology:true}); //连接到mongoDB的todo数据库
//该地址格式：mongodb://[username:password@]host:port/database[?options]
//默认port为27017
var db = mongoose.connection;
db.on('error', function callback() { //监听是否有异常
console.log("Connection error");
});
db.once('open', function callback() { //监听一次打开
//在这里创建你的模式和模型
console.log('open!');
});
db.on('connected', () => {
console.log('MongoDB connected success')
})
db.on('disconnected', () => {
console.log('MongoDB connected disconnected.')
})在app.js最前面引入【就是第一句！！】
require('./db');然后就可以试试，是否连接成功？
npm start
3、写接口、页面联调
理解mongoose的属性、模型
Schema (属性)：在Mongoose里一切都是从Schema开始的，每一个Schema都会映射到MongoDB的一个collection上。Schema定义了collection里documents的模板（或者说是框架）。【一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力】
var Schema = mongoose.Schema;
var ListSchema = new Schema({
coll1_id: Schema.Types.ObjectId, //定义一个属性coll1_id，类型为ObjectId
name2: String, //定义一个属性name2，类型为String
分类: String ,
});model (模型)：为了使用定义好的Schema，我们需要把blogSchema转换成我们可以使用的model(其实是把Schema编译成model，所以对于Schema的一切定义都要在compile之前完成)。也就是说model才是我们可以进行操作的handle。
var coll1Model= mongoose.model('coll1', ListSchema); //将该Schema发布为Model,coll1就是集合名称这样我们就获得了一个名为coll1Model的model了。生成model的同时MongoDB中对应的collection也被建立了，model的名字是coll1Model，而collection的名字被默认是model名字的复数也就是coll1models（细心的小伙伴会发现不止变复数了，而且字母全部变小写了，亲测是这样的）。【由Schema发布生成的模型，具有抽象属性和行为的数据库操作对】
Schema和model的理解
不同于关系型数据库，MongoDB作为文档型数据库，Scheme、model、collection、document是其中的四大元素。document是MongoDB里的基本存储单位，collection是众多同类document的集合。Schema定义了一类document的模板，让这一类document在数据库中有一个具体的构成、存储模式。而Schema仅仅是定义了Document是什么样子的，至于生成document和对document进行各种操作（增删改查）则是通过相对应的model来进行的。
需要说明的是MongoDB中实际上只有collection和document，Schema和model不过是定义和生成前二者过程中的工具而已。自己定义属性和模型
在db.js中加入
var ListSchema = new mongoose.Schema({
user_id: String, //定义一个属性user_id，类型为String
content: String, //定义一个属性content，类型为String
updated_at: Date //定义一个属性updated_at，类型为Date
});
mongoose.model('user', ListSchema); //将该Schema发布为Model,user就是集合名称//查询时自动集合名加s解决办法，后面加上collection
var ListSchema = new Schema({
weight_id: Schema.Types.ObjectId, //定义一个属性coll1_id，类型为ObjectId
STID: String, //定义一个属性name2，类型为String
STMC: String,
WeightTypeMC: String,
WeightNo: String,
WeightNoMD5: String
}, { collection: 'weight'});开始做出自己的接口了
首先在routes/index.js中添加引用
var mongoose = require('mongoose'); //引入对象
var TodoModel = mongoose.model('user');//引入模型
var URL = require('url'); //引入URL中间件，获取req中的参数需要新增接口
修改views/index.html
<form class="initform" method="post" accept-charset="utf-8">
<div class="from-group">
<label>输入内容</label>
<input class="form-control createContent" type="text" name="content" placeholder="Enter Todo" />
</div>
<div class="from-group" style="margin: 10px 0px;">
<button type="button" class="btn btn-info" οnclick="ceateItem()">新增</button>
</div>
</form>
<script>
//创建数据
function ceateItem() {
var obj = {};
obj.content = $('.createContent').val();
if (obj.content != '') {
$.post('http://localhost:3000/create', obj, function (res) {
console.log('新增成功');
searchItem();
})
} else {
alert('不能为空');
}
}
</script>修改routes/index.js
router.post('/create', function(req, res) {
console.log('req.body', req.body);
new TodoModel({ //实例化对象，新建数据
content: req.body.content,
updated_at: Date.now()
}).save(function(err, todo, count) { //保存数据
console.log('内容', todo, '数量', count); //打印保存的数据
res.redirect('/'); //返回首页
});
});查询接口
修改views/index.html
<button class="btn btn-default" id="btn" οnclick="searchItem()">查询全部</button>
function searchItem() {
$(".content").empty();
$.get('http://localhost:3000/search', function (res) {
console.log(res);
for (var i = 0; i < res.length; i++) {
$(".content").append(`
<div id="lists" class="alert alert-success" click="edit(event)" style="padding: 0;height: 50px;line-height: 50px;padding-left: 10px;">
<p style="width: 90%;display: inline-block;" id="${res[i]._id}" >${res[i].content}</p>
<p class="pdelete" title="删除该数据" style=" display: inline-block;">
<button type="button" class="close"><span aria-hidden="true" οnclick="deleteItem()" nodeValue="${res[i]._id}">×</span><span class="sr-only">Close</span></button>
</p>
</div>
`)
}
})
}修改routes/index.js
router.get('/search', function(req, res, next) {
TodoModel.
find().
sort('updated_at').
exec(function(err, aa, count) {
res.send(aa);
});
});保存之后，此时启动服务看看效果–npm start ----http://localhost:3000/
页面网络请求如下：
数据库显示如下：
3.3.3 编辑保存–【先找到需要编辑的数据，然后保存】
修改routes/index.js
router.get('/edit',function(req,res){
var params=URL.parse(req.url,true).query;
//res.send(params);
TodoModel.findById(params.id,function(err,todo){
// res.redirect('edit'); //返回首页
res.send(todo);
})
})
router.post('/update',function(req,res){
//res.send(req);
console.log(req.body);
TodoModel.findById(req.body._id,function(err,todo){
todo.content=req.body.content;
todo.updated_at=Date.now();
todo.save();
})
res.redirect('/'); //返回首页
})3.3.4 删除数据
router.get('/destroy',function(req,res){
var params=URL.parse(req.url,true).query;
console.log(params);
//根据待办事项的id 来删除它
TodoModel.findById(params.id, function(err, todo) {
todo.remove(function(err, todo) {
res.redirect('/');
});
});
})----------------------------------------分界线------------------------------------------------------
补充
通过上述方法使用node，每更改一次服务端代码就要重启一下终端，这样子效率十分低下，因此引入了一个插件叫做supervisor，具体使用如下
首先点击win+R，输入cmd，进入到终端（前提是已经全局安装了node），输入：npm -g install supervisor（全局安装supervisor）
如果npm安装失败，尝试使用cnpm安装，方法一样，当然你也得先把cnpm安装上
supervisor + 文件名
例如 supervisor app.js
如果你之前用得是express开发，输入这个之后页面可能会请求失败，那是因为express从4.x版本以后开始把项目启动搬到了bin/www找下。所以直接运行 supervisor bin/www
