NodeJS+Express+MongoDB 簡單實現數據錄入及回顯展示【Study筆記】

本文轉載自查看原文 2017-05-09 21:16 5947 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 內容】

 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學習了解中會根據掌握，繼續添加相應模塊

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 NodeJS+Express+MongoDB 簡單個人博客系統【Study筆記】 nodejs+express+mongodb簡單實現注冊登錄 NodeJS+Express+MongoDB nodejs+express+mongodb寫api接口的簡單嘗試 nodejs+express+mongodb搭建博客 nodejs+express+mongodb 快速接口開發從無到有，用Nodejs+express+mongodb搭建簡易登陸系統 Express之------03 Nodejs+Express+Mongodb實現增刪改查（其實是mongoose的增刪改查操作）從無到有，用Nodejs+express+mongodb搭建簡易登陸系統 python 學習（四）簡單數據錄入系統