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

近期在看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 内容】

 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学习了解中会根据掌握，继续添加相应模块

转载于:https://www.cnblogs.com/Hizy/p/6832723.html

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

nodejs+express+mongodb简单的例子
简单的介绍下node+express+mongodb这三个东西. node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上 ...
NodeJS+Express+MongoDB - 张果 - 博客园
目录一.MongoDB 1.1.安装MongoDB 1.1.1.配置运行环境 1.1.2.运行MongoDB 1.2.数据库操作 1.2.1.创建数据库与查看数据库 1.2.2.删除数据库 1.2. ...
java回显怎么实现_Java实现简单的server/client回显功能
Java实现简单的server/client回显功能 Socket是指在一个特定编程模型下,进程间通信链路的端点.因为这个特定编程模型的流行,Socket这个名字在其他领域得到了复用,包括Java叫技 ...
数据回显---SpringMVC学习笔记（九）
需求: 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 第一种:针对简单数据类型的数据回显对于简单数据类型,如:Integer.String.Float等使用Model ...
[Node.js] 基于NodeJS+Express+mongoDB+Bootstrap的博客系统实战
MyBlog实战项目要求 a. 前台和后台的页面布局前台要求有首页.列表页.详情页面.登录.注册后台要求有登录页面.列表.添加修改页面页面要求简洁.美观.大方 b. 后台功能要求前台注册用户 ...
准备奔向新时代的技术nodejs+express+mongodb+json
这些年,一个在找一个中意的框架和技术,试用了许多,都不满意. 这里我们来批一批这些本不该出现的垃圾技术: 1. XML , Linux 对XML说了句实话:本不该存的在技术. 当然,他的意思当然不是说 ...
nodeJs express mongodb 建站（mac 版）
基本环境 homebrew.node.npm.express.mongodb 1.node .npm : (1)辅助工具:homebrew安装(mac下一个软件管理工具,相当于Red hat的yum, ...
nodejs+Express+mongodb
一.创建项目 //安装脚手架 $ npm install express-generator -g//创建工程 $ express -e demo(项目名称)//加载依赖 $ npm install/ ...
【安装MongoDB】CentOS7 下安装NodeJs+Express+MongoDB+Redis
MongoDB,V3.2版本,官网说的很详细,见链接:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 1.创建 ...

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

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

最新文章

热门文章