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 });