基于NodeJS+MongoDB+AngularJS+Bootstrap開發書店案例分析

2019-11-19 17:59:15

字體：大中小

來源：轉載

供稿：網友

這章的目的是為了把前面所學習的內容整合一下，這個示例完成一個簡單圖書管理模塊，因為中間需要使用到Bootstrap這里先介紹Bootstrap。

示例名稱：天狗書店

功能：完成前后端分離的圖書管理功能，總結前端學習過的內容。

技術：NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域

效果：

一、Bootstrap

Bootstrap是一個UI框架，它支持響應式布局，在PC端與移動端都表現不錯。

Bootstrap是Twitter推出的一款簡潔、直觀、強悍的前端開發框架。

Bootstrap中包含了豐富的Web組件，根據這些組件，可以快速的搭建一個漂亮、功能完備的網站。

在線可視布局：http://www.ibootstrap.cn/

演示： http://expo.bootcss.com/

中文網：http://www.bootcss.com/

官網：http://getbootstrap.com/

安裝：npm install bootstrap@3

1.1、添加引用

也可使用包管理器也可以去官網下載后添加引用。

1.2、在頁面中使用BootStrap

添加CSS引用：

<link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" />

添加JavaScript引用：

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

在頁面中引用BootStrap定義好的樣式

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>bootstrap</title>  <link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" /> </head> <body>  <div class="container-fluid">   <div class="row">    <div class="jumbotron">     <h1>Hello, world!</h1>     <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information</p>     <p>      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>     </p>    </div>   </div>   <div class="row">    <div class="col-md-6">     <button type="button" class="btn btn-default">默認</button>     <button type="button" class="btn btn-primary">主要</button>     <button type="button" class="btn btn-success">成功</button>     <button type="button" class="btn btn-info">信息</button>     <button type="button" class="btn btn-warning">警告</button>     <button type="button" class="btn btn-danger">錯誤</button>     <button type="button" class="btn btn-link">鏈接</button>    </div>    <div class="col-md-6">     <button type="button" class="btn btn-default btn-lg">默認</button>     <button type="button" class="btn btn-default">默認</button>     <button type="button" class="btn btn-default btn-sm">默認</button>     <button type="button" class="btn btn-default btn-xs">默認</button>    </div>   </div>  </div>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </body></html>

運行結果：

1.3、可視化布局

如果想快速高效的布局可以使用一些在線輔助工具，如：

http://www.ibootstrap.cn/

點擊下載可以獲得生成的HTML腳本。

二、使用MongoDB創建數據庫

2.1、啟動MongoDB數據庫

數據庫的具體安裝、配置在前面的章節中已經講解過，可以參考。

如果服務與配置都沒有完成的話可以啟動：C:/Program Files/MongoDB/Server/3.4/bin/mongod.exe

2.2、啟動數據庫GUI管理工具

2.3、創建數據庫與集合

在localhost上右鍵“create database”創建名稱為BookStore的數據庫。

創建一個用于存放圖書的集合名稱為books。

在集合中添加5本圖書。

db.getCollection('books').insert({id:201701,title:"使用AlarJS開發下一代應用程序",picture:"b1.jpg",price:55.0,author:"brad green"});

三、創建一個Express項目

這里使用Eclipse（HBuilder）為開發工具，添加Nodeclipse插件，新增一個Express項目：

3.1、創建app.js

/** * Module dependencies. */var express = require('express') , routes = require('./routes') , books = require('./routes/books') , http = require('http') , path = require('path');var app = express();// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set('view engine', 'ejs');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);app.use(express.static(path.join(__dirname, 'public')));// development onlyif ('development' == app.get('env')) { app.use(express.errorHandler());}app.get('/', books.list);app.get('/books', books.list);http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port'));});

四、Monk訪問MongoDB數據庫

monk是NodeJS平臺下訪問MongoDB數據庫的一個模塊。monk訪問MongoDB更加方便比NodeJS直接訪問。

git倉庫地址：https://github.com/Automattic/monk

文檔：https://automattic.github.io/monk/

安裝：npm install --save monk

4.1、創建連接

const monk = require('monk')// Connection URLconst url = 'localhost:27017/myproject';const db = monk(url);db.then(() => { console.log('Connected correctly to server')})

4.2、插入數據

const url = 'localhost:27017/myproject'; // Connection URLconst db = require('monk')(url);const collection = db.get('document')collection.insert([{a: 1}, {a: 2}, {a: 3}]) .then((docs) => { // docs contains the documents inserted with added **_id** fields // Inserted 3 documents into the document collection }).catch((err) => { // An error happened while inserting }).then(() => db.close())users.insert({ woot: 'foo' })users.insert([{ woot: 'bar' }, { woot: 'baz' }])

4.3、更新數據

const url = 'localhost:27017/myproject'; // Connection URLconst db = require('monk')(url);const collection = db.get('document')collection.insert([{a: 1}, {a: 2}, {a: 3}]) .then((docs) => { // Inserted 3 documents into the document collection }) .then(() => { return collection.update({ a: 2 }, { $set: { b: 1 } }) }) .then((result) => { // Updated the document with the field a equal to 2 }) .then(() => db.close())users.update({name: 'foo'}, {name: 'bar'})

4.4、刪除數據

const url = 'localhost:27017/myproject'; // Connection URLconst db = require('monk')(url);const collection = db.get('document')collection.insert([{a: 1}, {a: 2}, {a: 3}]) .then((docs) => { // Inserted 3 documents into the document collection }) .then(() => collection.update({ a: 2 }, { $set: { b: 1 } })) .then((result) => { // Updated the document with the field a equal to 2 }) .then(() => { return collection.remove({ a: 3}) }).then((result) => { // Deleted the document with the field a equal to 3 }) .then(() => db.close())users.remove({ woot: 'foo' })

4.5、查找數據

const url = 'localhost:27017/myproject'; // Connection URLconst db = require('monk')(url);const collection = db.get('document')collection.insert([{a: 1}, {a: 2}, {a: 3}]) .then((docs) => { // Inserted 3 documents into the document collection }) .then(() => collection.update({ a: 2 }, { $set: { b: 1 } })) .then((result) => { // Updated the document with the field a equal to 2 }) .then(() => collection.remove({ a: 3})) .then((result) => { // Deleted the document with the field a equal to 3 }) .then(() => { return collection.find() }) .then((docs) => { // docs === [{ a: 1 }, { a: 2, b: 1 }] }) .then(() => db.close())

users.find({}).then((docs) => {})users.find({}, 'name').then((docs) => { // only the name field will be selected})users.find({}, { fields: { name: 1 } }) // equivalentusers.find({}, '-name').then((docs) => { // all the fields except the name field will be selected})users.find({}, { fields: { name: 0 } }) // equivalentusers.find({}, { rawCursor: true }).then((cursor) => { // raw mongo cursor})users.find({}).each((user, {close, pause, resume}) => { // the users are streaming here // call `close()` to stop the stream}).then(() => { // stream is over})//創建的數據庫var monk = require('monk')var db = monk('localhost:27017/bookstore')//讀取數據：var monk = require('monk')var db = monk('localhost:27017/monk-demo')var books = db.get('books') books.find({}, function(err, docs) { console.log(docs)})//插入數據：books.insert({"name":"orange book","description":"just so so"})//查找數據：books.find({"name":"apple book"}, function(err, docs) { console.log(docs)})復制代碼五、創建Rest后臺服務在routes目錄下增加的books.js文件內容如下：復制代碼/* * 使用monk訪問mongodb * 以rest的方式向前臺提供服務 *///依賴monk模塊var monk = require('monk');//連接并打開數據庫var db = monk('localhost:27017/BookStore');//從數據庫中獲得books集合，類似表，并非所有數據， keyvar books = db.get('books');//列出所有的圖書jsonexports.list = function(req, res) { //無條件查找所有的圖書，then是當查找完成時回調的異步方法 books.find({}).then((docs) => {  //返回json給客戶端  res.json(docs); }).then(() => db.close()); //關閉數據庫};//獲得最大idexports.getMax=function(req,res){ //找一個，根據id降序排序， books.findOne({}, {sort: {id: -1}}).then((bookObj)=>{  res.json(bookObj); }).then(() => db.close());;}//添加圖書exports.add = function(req, res) { //先找到最大的圖書編號 books.findOne({}, {sort: {id: -1}}).then((obj)=>{  //從客戶端發送到服務器的圖書對象  var book=req.body;  //設置圖書編號為最大的圖書編號+1  book.id=(parseInt(obj.id)+1)+"";  //執行添加  books.insert(book).then((docs) => {  //返回添加成功的對象   res.json(docs);  }).then(() => db.close()); });};//刪除圖書exports.del = function(req, res) { //從路徑中取參數id,/:id var id=req.params.id; //移除編號為id的圖書 books.remove({"id":id}).then((obj)=>{  //返回移除結果  res.json(obj); }).then(() => db.close());};//更新exports.update = function(req, res) { //獲得提交給服務器的json對象 var book=req.body; //執行更新,第1個參數是要更新的圖書查找條件，第2個參數是要更新的對象 books.update({"id":book.id}, book).then((obj)=>{  //返回更新完成后的對象  res.json(obj);  }).then(() => db.close());};

為了完成跨域請求，修改http頭部信息及路徑映射，app.js文件如下：

var express = require('express'), routes = require('./routes'), books = require('./routes/books'), http = require('http'), path = require('path');var app = express();// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set('view engine', 'ejs');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);app.use(express.static(path.join(__dirname, 'public')));app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "content-type"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); if(req.method == "OPTIONS") {  res.send("200"); } else {  next(); }});// development onlyif('development' == app.get('env')) { app.use(express.errorHandler());}app.get('/', books.list);//獲得所有的圖書列表app.get('/books', books.list);//最大的編號app.get('/books/maxid', books.getMax);//添加app.post('/books/book', books.add);//刪除app.delete('/books/id/:id', books.del);//更新app.put('/books/book', books.update);http.createServer(app).listen(app.get('port'), function() { console.log('Express server listening on port ' + app.get('port'));});

查詢所有：

其它服務的測試可以使用Fiddler完成。

六、使用AngularJS調用后臺服務

這里的UI使用BootStrap完成，前端使用AngularJS調用NodeJS發布的服務，將數據存放在MongoDB中。

index.js頁面如下：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>天狗書店</title>  <link rel="shortcut icon" href="favicon.ico" />  <link rel="bookmark" href="favicon.ico" />  <link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" />  <style type="text/css">   .cover {    height: 40px;    width: auto;   }   .addBook {    padding-top: 10px;   }   .w100 {    width: 50px   }   .w200 {    width: 200px;   }   .w300 {    width: 300px   }  </style> </head> <body ng-app="bookApp">  <div class="container" ng-controller="BookController">   <div class="row clearfix">    <div class="col-md-12 column">     <nav class="navbar navbar-default" role="navigation">      <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>       <a class="navbar-brand" href="#">天狗書店</a>      </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">        <li class="active">         <a href="#">前端</a>        </li>        <li>         <a href="#">Java</a>        </li>        <li>         <a href="#">.Net</a>        </li>        <li class="dropdown">         <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多類型<strong class="caret"></strong></a>         <ul class="dropdown-menu">          <li>           <a href="#">Action</a>          </li>          <li>           <a href="#">Another action</a>          </li>          <li>           <a href="#">Something else here</a>          </li>          <li class="divider">          </li>          <li>           <a href="#">Separated link</a>          </li>          <li class="divider">          </li>          <li>           <a href="#">One more separated link</a>          </li>         </ul>        </li>       </ul>       <form class="navbar-form navbar-left" role="search">        <div class="form-group">         <input type="text" class="form-control" />        </div> <button type="submit" class="btn btn-default">搜索</button>       </form>      </div>     </nav>     <div class="row clearfix">      <div class="col-md-12 column">       <div class="carousel slide" id="carousel-519027">        <ol class="carousel-indicators">         <li class="active" data-slide-to="0" data-target="#carousel-519027">         </li>         <li data-slide-to="1" data-target="#carousel-519027">         </li>         <li data-slide-to="2" data-target="#carousel-519027">         </li>        </ol>        <div class="carousel-inner">         <div class="item active">          <img alt="" src="img/adv3.jpg" />          <div class="carousel-caption">          </div>         </div>         <div class="item">          <img alt="" src="img/adv2.jpg" />          <div class="carousel-caption">          </div>         </div>         <div class="item">          <img alt="" src="img/adv1.jpg" />          <div class="carousel-caption">           <h4>          Third Thumbnail label         </h4>           <p>            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.           </p>          </div>         </div>        </div>        <a class="left carousel-control" href="#carousel-519027" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>        <a class="right carousel-control" href="#carousel-519027" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>       </div>      </div>     </div>    </div>   </div>   <div class="row clearfix">    <div class="col-md-12 column">     <div class="addBook">      <a id="modal-234446" href="#modal-container-234446" role="button" class="btn btn-sm btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> 新書上架</a>      <div class="modal fade" id="modal-container-234446" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">       <div class="modal-dialog">        <div class="modal-content">         <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>          <h4 class="modal-title" id="myModalLabel">        添加/編輯圖書       </h4>         </div>         <div class="modal-body">          <form class="form-horizontal" role="form">           <div class="form-group">            <label for="id" class="col-sm-2 control-label">編號</label>            <div class="col-sm-10">             <input type="text" class="form-control w100" id="id" ng-model="book.id" ng-readonly="true" />            </div>           </div>           <div class="form-group">            <label for="title" class="col-sm-2 control-label">書名</label>            <div class="col-sm-10">             <input type="text" class="form-control w300" id="title" ng-model="book.title" />            </div>           </div>           <div class="form-group">            <label for="picture" class="col-sm-2 control-label">圖片</label>            <div class="col-sm-10">             <input type="text" class="form-control w200" id="picture" ng-model="book.picture" />            </div>           </div>           <div class="form-group">            <label for="price" class="col-sm-2 control-label">價格</label>            <div class="col-sm-10">             <input type="text" class="form-control w200" id="price" ng-model="book.price" />            </div>           </div>           <div class="form-group">            <label for="author" class="col-sm-2 control-label">作者</label>            <div class="col-sm-10">             <input type="text" class="form-control w200" id="author" ng-model="book.author" />            </div>           </div>          </form>         </div>         <div class="modal-footer">          <button type="button" ng-click="save()" class="btn btn-primary">          <span class="glyphicon glyphicon-floppy-disk"></span>            保存</button>          <button type="button" class="btn btn-success" ng-click="clear()" data-dismiss="modal">           <span class="glyphicon glyphicon-refresh"></span>            清空</button>          <button type="button" class="btn btn-danger" data-dismiss="modal">           <span class="glyphicon glyphicon-remove"></span>            關閉</button>         </div>        </div>       </div>      </div>     </div>     <table class="table">      <thead>       <tr>        <th>         序號        </th>        <th>         編號        </th>        <th>         書名        </th>        <th>         圖片        </th>        <th>         價格        </th>        <th>         作者        </th>        <th>         操作        </th>       </tr>      </thead>      <tbody>       <tr ng-repeat="b in books" ng-class="{'info':$odd}">        <td>         {{$index+1}}        </td>        <td>         {{b.id}}        </td>        <td>         {{b.title}}        </td>        <td>         <img ng-src="img/{{b.picture}}" class="cover" />        </td>        <td>         {{b.price | number:1}}        </td>        <td>         {{b.author}}        </td>        <td>         <button type="button" class="btn btn-danger btn-xs" ng-click="del(b.id,$index)">刪除</button>         <button href="#modal-container-234446" role="button" class="btn btn-xs btn-primary" data-toggle="modal" ng-click="edit(b)">編輯</button>        </td>       </tr>      </tbody>     </table>    </div>   </div>  </div>  <!--引入angularjs框架-->  <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>  <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>  <script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>  <script type="text/javascript">   //定義模塊，指定依賴項為空   var bookApp = angular.module("bookApp", []);   //定義控制器，指定控制器的名稱，$scope是全局對象   bookApp.controller("BookController", ['$scope', '$http', function($scope, $http) {    $scope.books = [];    $scope.save = function() {     $http({       url: "http://127.0.0.1:3000/books/book",       data: $scope.book,       method: $scope.book.id ? "PUT" : "POST"      })      .success(function(data, status, headers, config) {       if($scope.book.id) {        alert("修改成功");       } else {        $scope.books.push(data);       }      })      .error(function(data, status, headers, config) {       alert(status);      });    }    $scope.edit = function(b) {     $scope.book = b;    }    $scope.clear = function() {     $scope.book = {};    }    //初始化加載    $http.get("http://127.0.0.1:3000/")     .success(function(data, status, headers, config) {      $scope.books = data;     })     .error(function(data, status, headers, config) {      alert(status);     });    $scope.del = function(id, index) {     $http.delete("http://127.0.0.1:3000/books/id/" + id)      .success(function(data, status, headers, config) {       $scope.books.splice(index, 1);      })      .error(function(data, status, headers, config) {       alert(status);      });    }   }]);  </script> </body></html>

運行結果：