NodeJS實戰：Express+Mongoose+ejs

時間 2019-11-14

標籤 nodejs 實戰 express+mongoose+ejs express mongoose ejs 欄目 MongoDB 简体版

原文原文鏈接

元宵還沒到，先向全部朋友拜一個晚年~~~javascript

文章目錄：
一、組件版本號
-- --node
-- --express
-- --Mongoose
二、初始化項目 firstblood
-- --用 express 自動初始化（推薦）
-- --附：手動初始化 package.json
三、關於 express 的 app.js
四、前端模板 Handlebars Ejs Jade
-- --以 Ejs 模板爲例
-- --體驗一把： route 路由是如何工做的
五、CSS、JS框架支持
-- --bootstrap2.3.2 + jquery 1.11.1 爲例
-- --頭部尾部重用
六、增刪改查少不了
-- --mongodb 小回顧
-- --node 操做 Mongoose 【挑戰：一個後臺登錄驗證+展現mongodb中現有會員信息的小案例】
-- --加強案例：支持登錄並新增修改會員信息的系統，還得支持 session ~css

一、組件版本號：

1.一、node：資料大全

$ node -v
v0.10.35

1.二、express： 3x api

$ express -V
3.0.0

1.三、Mongoose : 3.8.24 api

$ npm info mongoose version
3.8.24

//$ npm install mongoose
//注：在Windows下安裝 **報錯（兼容性錯誤）** 沒事的！
//若是你有強迫症 請安裝 Microsoft Visual Studio 2010 便可
//向堅持在 windows 平臺的同窗致敬……（唉，個人 mac 本本也只是看看電影，沒事！）
mongoose@3.8.24 node_modules\mongoose
├── regexp-clone@0.0.1
├── sliced@0.0.5
├── muri@0.3.1
├── hooks@0.2.1
├── mpath@0.1.1
├── mpromise@0.4.3
├── ms@0.1.0
├── mquery@0.8.0 (debug@0.7.4)
└── mongodb@1.4.31 (readable-stream@1.0.33, kerberos@0.0.9, 9, bson@0.2.19)

再次重申：在 Windows 下安裝Mongoose 報錯（兼容性錯誤） 沒事的！ 沒事的！！！html

若是你有強迫症請安裝 Microsoft Visual Studio 2010 便可 ( Win7 64bit 推薦 )前端

二、初始化項目 firstblood

2.一、用 express 自動初始化（推薦）

一、先全局安裝 express：(來自於淘寶國內鏡像)java

以 3.2.2 爲例：node

$ npm install -g express@3.2.2 --registry=https://registry.npm.taobao.org

tips:
關於 4.0 呢，中間件全被獨立出來，網上 download 下來的代碼大都是3.x，可能會出錯……
建議用3.x。教程也多，一搜一大堆容易解決不常見的坑。jquery

二、建立項目：git

快速熟悉下 express 的指令：github

Usage: express [options]

Options:

  -h, --help          輸出幫助信息
  -V, --version       輸出版本號
  -e, --ejs           添加 ejs 模板引擎支持 (默認爲jade)
  -H, --hogan         添加 hogan.js模板引擎支持
  -c, --css   樣式 <引擎> 支持 (less|stylus) (默認爲css)
  -f, --force         強制在非空目錄執行

開始安裝：web

//-e 即支持 ejs； 你喜歡 **ejs** 仍是 **jade** ？
$ express firstblood -e

     express firstblood -e

      create : firstblood
      create : firstblood/package.json
      create : firstblood/app.js
      create : firstblood/public
      create : firstblood/routes
      create : firstblood/routes/index.js
      create : firstblood/routes/user.js
      create : firstblood/views
      create : firstblood/views/index.ejs
      create : firstblood/public/javascripts
      create : firstblood/public/images
      create : firstblood/public/stylesheets
      create : firstblood/public/stylesheets/style.css

      install dependencies:
        $ cd firstblood && npm install

      run the app:
        $ node app

//安裝組件
$ cd firstblood && npm install

    ejs@2.3.1 node_modules\ejs

    express@3.2.2 node_modules\express
    ├── methods@0.0.1
    ├── fresh@0.1.0
    ├── cookie-signature@1.0.1
    ├── range-parser@0.0.4
    ├── qs@0.6.3
    ├── buffer-crc32@0.2.1
    ├── cookie@0.0.5
    ├── commander@0.6.1
    ├── mkdirp@0.3.4
    ├── debug@2.1.1 (ms@0.6.2)
    ├── send@0.1.0 (mime@1.2.6)
    └── connect@2.7.8 (pause@0.0.1, bytes@0.2.0, formidable@1.0.1

這時候能夠啓動 node app.js 項目，能夠瀏覽 http://localhost:3000/
按 Ctrl + c結束；

tips：
每次代碼改動都須要重啓 node！ 不過安裝 npm install supervisor 後能夠偷懶；它會在你每次修改完代碼後自動重啓。 神器哦！

三、安裝 mongoose

package.json 文件自動更新 dependencies 字段：

npm install mongoose --save

2.二、附：手動初始化 package.json

$ mkdir firstblood && cd firstblood
$ npm init

依次填寫： name、version、description、entry point（入口index.js或app.js）、test command（啓動指令 node index.js）、git repository（git庫）、keywords、author、license（ISC）…… 大膽隨便填寫，最後輸入 yes 生成 package.json 文件。

接下來安裝 mongoose，express，修改 package.json

"dependencies": {
    "mongoose": "^3.8.24",
    "express": "3.x"
},

而後在當前目錄下執行 npm install 安裝組件

三、關於 express的 app.js

小解釋：

/**
 * Module dependencies. 依賴的模塊（處理路由，業務邏輯）
 */
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

//實例化 express 並賦值app變量
var app = express();

// all environments 依賴的環境（配置參數）
app.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'));

//bodyParser 改爲 urlencoded 能夠忽略一些 Node窗口裏的警告
  app.use(express.urlencoded());
//app.use(express.bodyParser());

app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only 開發模式（檢查錯誤）
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// 路由解析
app.get('/', routes.index);
app.get('/users', user.list);

// 建立一個http server 啓動端口 
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

四、前端模板 Handlebars Ejs Jade

關於這個話題移步：
Jade、EJS、Handlebars 萬行代碼解釋效率比較
 Jade和ejs，哪個更勝一籌
 John大神寫的20行模板

樓主總結：項目我的秀固然是 jade、商業化的確定是 Ejs、Handlebars；樓主喜歡後者……

4.一、以 Ejs 模板爲例

讓ejs模板文件支持 html 格式：
a：修改app.js

//讓Ejs支持 html
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
//app.set('view engine', 'ejs');

b：引入 ejs 模塊

//手動添加 ejs 以便支持 .html
ejs = require('ejs');

c：修改 /views 目錄下的入口文件後綴爲 index.html
重啓app便可

4.二、體驗一把： route 路由是如何工做的

一、在app.js文件中找到路由解析部分；添加

app.get('/lu-you-qing-qiu', routes.luyou);

它負責處理你的請求 "/lu-you-qing-qiu"

二、找到： /routes/index.js 文件；添加

exports.luyou = function(req, res){
  res.render('lu-you-ye-mian', { title: '「路由」是長這樣的！' });
};

找一個名爲 "lu-you-ye-mian.html" （注：上面已經把ejs改爲html了哦）去渲染

關於模塊化寫法，請移步這裏： NodeJS 菜鳥入門

三、渲染頁面；在 /views/ 目錄增長 lu-you-ye-mian.html ：

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
</body>
</html>

愉快的啓動app.js吧！

五、CSS、JS框架支持

5.一、以 bootstrap2.3.2 + jquery 1.11.1 爲例：

一、將 bootstrap 文件夾中的 /css/目錄下的全部文件複製到 /public/stylesheets/
二、將 /js/目錄下的全部文件加上再下載一個 jquery 複製到 /public/javascripts/
三、將 /img/ 目錄下全部文件複製到 /public/images/

5.二、頭部尾部重用

新建 header.html ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">

新建 footer.html ：

<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

那麼 index.html 能夠改爲這樣：

<% include header.html %>

    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    
<% include footer.html %>

六、增刪改查少不了

mongodb 安裝、啓動、常見指令……移步這裏 Mongodb For Windows

6.一、mongodb 小回顧

接下來爲 firstblood 項目建立一點數據 (mongodb 版本號：2.6.6)

> use firstblood
switched to db firstblood
> var listArr = [];for(i=0;i<5;i++){listArr.push({"user":"test"+i,"password":"sa
"+i,"age":i})}
5
> db.admins.insert(listArr)
BulkWriteResult({
        "writeErrors" : [ ],
        "writeConcernErrors" : [ ],
        "nInserted" : 5,
        "nUpserted" : 0,
        "nMatched" : 0,
        "nModified" : 0,
        "nRemoved" : 0,
        "upserted" : [ ]
})
> db.admins.find()
{ "_id" : ObjectId("54f3f267c0d71446ee04a7f6"), "user" : "test0", "password" : "
sa0", "age" : 0 }
{ "_id" : ObjectId("54f3f267c0d71446ee04a7f7"), "user" : "test1", "password" : "
sa1", "age" : 1 }
{ "_id" : ObjectId("54f3f267c0d71446ee04a7f8"), "user" : "test2", "password" : "
sa2", "age" : 2 }
{ "_id" : ObjectId("54f3f267c0d71446ee04a7f9"), "user" : "test3", "password" : "
sa3", "age" : 3 }
{ "_id" : ObjectId("54f3f267c0d71446ee04a7fa"), "user" : "test4", "password" : "
sa4", "age" : 4 }
>_

OK 成功了，暫且多多回顧下其餘指令吧

6.二、node 操做 Mongoose 【挑戰：一個後臺登錄驗證+展現mongodb中現有會員信息的小案例】

一、新建目錄： mkdir db；添加數據集合的結構 firstblood_schema.js

// 連接 firstblood 集合
var mongoose = require('mongoose');
var db = mongoose.createConnection('mongodb://127.0.0.1:27017/firstblood');
// 連接錯誤
db.on('error', function(error) {
    console.log(error);
});
// Schema 結構
var Schema = mongoose.Schema;
var userlistScheMa = new Schema({
    user     : {type : String},
    password : {type : String},
    //content  : {type : String},
    //time     : {type : Date, default: Date.now},
    age      : {type : Number}
});

// 關聯 firstblood -> admins 表
exports.userlist = db.model('admins', userlistScheMa);
exports.db = db;

關於 Schema 、Model 、Entity 以及 Mongoose 其餘APi參考，能夠移步這裏：

Mongoose學習參考文檔

二、在 /routes/ 目錄，修改 index.js （固然也能夠新建一個文件）

/*
 * GET home page.
 */
var firstblood = require('./../db/firstblood_schema.js');
/**/
exports.index = function (req, res){
    res.render('index', {
        title: 'Express',
    });
}
exports.luyou = function(req, res){
    res.render('lu-you-ye-mian', { title: '「路由」是長這樣的！' });
}
exports.login = function (req, res){
    res.render('login', {
        title: 'login'
    });
}
/* home */
exports.home = function(req, res) {
    var query = {user: req.body.user, password: req.body.password};
    firstblood.userlist.count(query, function(err, doc){ 
        if (doc==1) {
            var findResult = firstblood.userlist.find(function(error, result){
                if (error) {
                    res.send(error);
                }else{
                    res.render('home', {
                        title : '後臺',
                        status: doc,
                        username : query.user,
                        adminlist : result,
                        date : new Date()
                    });

                }
            });
        }else{
            res.render('home', {
                title : '後臺',
                status: doc,
            });
            //res.redirect('/');
        }
    });
}

四、在 app.js 中添加模塊依賴（若是新建路由模塊的話）和路由：

// 路由解析
// firstblood 項目路由
app.get('/login',routes.login);//增長
app.post('/home',routes.home);//提交

五、在 /views/ 目錄，添加 login.html

<% include header.html %>
    <div class="container-fluid">
        <div class="row-fluid">
        <form class="span12" action="home" method="post">
            <fieldset>
                <legend>請輸入</legend>
            <p>
                <span>用戶名:</span>
                <br>
                <input id="user" name="user" type="text">
            </p>
            <p>
                <span>密碼:</span>
                <br>
                <input id="password" name="password" type="password">
            </p>
            <p><input type="submit" value="登錄" class="btn btn-danger"></p>
            </fieldset>
        </form>
        </div>
    </div>
<% include footer.html %>

再添加 home.html

<% include header.html %>
<div class="container-fluid">
    <div class="row-fluid">
        <h1>後臺管理</h1>
    <% if (status) { %>  
        <p class="lead">歡迎您： <%=username%></p> 
        <p class="label label-info">登錄時間： <%=date%></p>
        <h3>管理員列表</h3>
        <% if (adminlist.length) { %>  
            <table class="table table-hover span12">
                <thead>
                <tr>
                    <th>#</th>
                    <th>用戶名</th>
                    <th>密碼</th>
                    <th>年齡</th>
                </tr>
                </thead>
                <tbody>
                <% adminlist.forEach(function(data){ %>
                    <tr>
                        <td><%= data.id %></td>
                        <td><%= data.user %></td>
                        <td><%= data.password %></td>
                        <td><%= data.age %></td>
                    </tr>
                <% }) %>  
                </tbody>
            </table>
        <% } %>  
    <% } else {%>
        <strong>登陸失敗 <a href="/">回首頁</a></strong>
    <% } %>  
    </div>
</div>
<% include footer.html %>

此時啓動 app 打開 http://localhost:3000/ 嘗試登錄（用戶名密碼天然在上文哦~）