NodeJS+Express+MongoDB 简单实现数据录入及回显展现【Study笔记】

时间 2019-11-24

标签 nodejs+express+mongodb nodejs express mongodb 简单实现数据录入展现 Study笔记栏目 MongoDB 繁體版

原文原文链接

近期在看NodeJS相关javascript

不得不说NodeJS+Express 进行网站开发是很不错，对于喜欢玩JS的来讲真是很好的一种Web开发组合css

在接触NodeJS时受平时Java或者C#中API接口等开发的思惟惯性，类比着去学习了解发现其实不少都是通性的html

特别是NodeJS中一个JS文件中方法经过exports能够在其余文件中进行require这种机制，不就相似Java中import（导入架包/引用类）？不就相似C#中Using(DLL组件或者引用类)么？前端

MVC模式下Web开发，其中对应在NodeJS中的路由（Router）不就是Controller? 其它M/V中想一想都是同样，这样去一类比其实上手就赶脚一通百通java

接下来就是些特定语言有特定的实现方式语法及特点jquery

我的以为在复杂的工程：其实先后端分离后，不就是后端怎么CRUD数据？前端怎么去使用接口回显数据对其交互等等；ajax

工程的复杂性主要体如今业务逻辑实现/数据安全/Web性能/体验等等等吧mongodb

----扯多了-----------------------------------------------------数据库

//在接触学习中，首先尝试了怎么去搭建工程链接数据库express

下面就练手Test 作一个简单的Demo总结一下

适合新手刚开始接触的人

在Demo中主要是实现了怎么链接MongoDB数据库以及从数据库回显数据/还有往数据库中写入数据

//算是入门级的Demo走通了数据录入及回显

以下图：左侧展现录入的数据//右侧填写数据后点击OK 按钮数据就写入数据库

测试的录入的数据

//------------------------------------------------------------------------------------------------------------------------------------------------------------

首先环境安装啥的在理就不在赘述哈

建立Express 【Ejs模板的】工程及Npm MongoDB 后搭建对应文件夹【图中个人工程里面就加了一个Models】

关于其余文件夹百度上有不少对应说明介绍

//工程中我就采用默认路由 Index 【另一个Users 我在程序入口 App.js中注释掉了（没啥业务含量用不上）】

首先是Models目录中

建立了个链接MongoDB数据库及构建数据

【上图中 TestDB.js 内容】

 1 /**
 2  * Created by Yi on 2017/5/8.
 3  */
 4 
 5 //testDB Model
 6 
 7 //建立 mongodb数据库链接
 8 
 9 var mongoose = require('mongoose');
10 var DB = mongoose.connect('mongodb://localhost:27017/testAppDB');//红色为数据库名 11 
12 //
13 mongoose.connection.on("open", function () {
14     console.log("数据库链接成功");
15 });
16 
17 //
18 mongoose.connection.on("error", function (error) {
19     console.log("数据库链接失败" + error);
20 });
21 
//建立数据文档模板【在SQL数据库中 即一个表（列名字段等） NoSQL数据库中即数据文档（成员变量名）】
22 var testSchema = new mongoose.Schema({
23     SortID: {type: String},
24     Name: {type: String},
25     Sex: {type: String},
26     Address: {type: String},
27     timeDate: {type: Date, default: Date.now()}
28 });
29 
30 module.exports = mongoose.model('TestModel', testSchema);

//下面在构造一个数据Model“类”

 1 /**
 2  * Created by Yi on 2017/5/8.
 3  */
 4 
 5 // 上传/回显数据通用 数据Model
 6 var tempModel = {
 7     SortID: "",
 8     Name: "",
 9     Sex: "",
10     Address: "",
11     timeDate: ""
12 };
13 
14 module.exports = tempModel;

Router【即 Controller 层】

 1 var express = require('express');
 2 var router = express.Router();
 3 
 4 //引用链接数据库Model
 5 var TestModel = require('../models/testDB');
 6 
 7 // test 数据
 8 
 9 // var resData = [];
10 // resData.push(
11 //     {
12 //         SortID: "1",
13 //         Name: "A",
14 //         Sex: "女",
15 //         Address: "SSS",
16 //         timeDate: "05-08"
17 //     }
18 // );
19 // resData.push(
20 //     {
21 //         SortID: "2",
22 //         Name: "B",
23 //         Sex: "男",
24 //         Address: "XXX",
25 //         timeDate: "05-08"
26 //     }
27 // );
28 
29 // 初始化回显 数据库已录入数据
30 router.get('/', function (req, res, next) {
31     // res.render('testDB', {title: 'Express'});
32     TestModel.find({}, function (err, resData) {
33         if (err) return next(err);
34         res.render('index', {
35             title: "TestDB",
36  testData: resData
37         });
38     });
39 });
40 
41 //1 能够直接用Form表单方式提交数据
42 //2 或者经过页面脚本绑定事件响应结合JQuery的Ajax
43 //  实现调用路由（controller）接口将数据写入数据库
//通常开发中会在页面脚本中调用不少其余或者外部接口//【该方式比较经常使用 即就把路由方法当成一个对外的接口】

45 router.post('/insert', function (req, res) {
46     var params = req.body;
47    //MogoDB中能够用Create方法添加数据
48     TestModel.create(params, function (err) {
49         if (err) res.end('{result:-1}');
50         else {
51             TestModel.find({}, function (error, data) {
52                 if (error) res.end('{result:-1}');
53                 else {
54                     res.end('{result:1,data:' + data + '}');
55                 }
56             });
57         }
58     });
59 });
60 module.exports = router;

View

我这直接在Index中修改页面【建立Express时采用的Ejs模板】固然用Html的也能够都是同样的

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title><%= title %></title>
 6     <link rel="stylesheet" href="/css/style.css">
 7 </head>
 8 <body>
 9 
10 <div id="ShowDataArea">
11     <h4>此处展现 录入的数据 （用Ejs模板方式）</h4>
12     <span>多条数据采用forEach处理</span>
13     <% testData.forEach(function(testModel){ %>
14     <ul>
15         <li><span>编号</span><span><%= testModel.SortID %></span></li>
16         <li><span>姓名</span><span><%= testModel.Name %></span></li>
17         <li><span>性别</span><span><%= testModel.Sex %></span></li>
18         <li><span>地址</span><span><%= testModel.Address %></span></li>
19     </ul>
20     <% }) %>
21 
22 </div>
23 <div id="ShowArea">
24     <h4>采用 <%= title %> 测试Node - MongoDB 数据 写入/修改/删除/回显等</h4>
25     <hr>
26     <div id="SortID"><span>编号</span><input type="text" placeholder="编号"/></div>
27     <div id="Name"><span>姓名</span><input type="text" placeholder="姓名"/></div>
28     <div id="Sex"><span>性别</span><input type="text" placeholder="性别"/></div>
29     <div id="Address"><span>地址</span><input type="text" placeholder="地址"/></div>
30     <button id="uploadData">OK</button>
31 </div>
32 
33 
34 </body>
35 <script type="text/javascript" src="/plug-in/jquery-1.9.1.js"></script>
36 <script type="text/javascript" src="/js/testPage.js"></script>

<!--页面JS以下-->

 37 </html>

页面脚本：JS

10 var tempModel = {
11     SortID: "",
12     Name: "",
13     Sex: "",
14     Address: "",
15     timeDate: ""
16 };
17 
18 $(function () {
19     $("#uploadData").on("click", function () {
20         alert("上传数据到MongoDB中");
21         //构造数据类
22         tempModel.SortID = $("#SortID").find("input").val();
23         tempModel.Name = $("#Name").find("input").val();
24         tempModel.Sex = $("#Sex").find("input").val();
25         tempModel.Address = $("#Address").find("input").val();
26         tempModel.timeDate = Date.now();
27 
28         //经过Ajax更新数据
29         $.ajax({
30             type: 'post',
31             // url: "http://localhost:3000/insert",
32             url: "/insert",
33             dataType: "json",
34             data: tempModel,
35             success: function (resData) {
36                 if (resData.result == 1) {
37                     //更新页面列表
38                     alert('resData');
39                 }
40             },
41             error: function (error) {
42                 alert('error:' + error);
43             }
44         });
45     });
46 });

//如今在回过来想一想，结合常规MVC模式的Web开发去类比，这不就是一回事哈~~

//第一版Demo

//后期NodeJS学习了解中会根据掌握，继续添加相应模块