原文网址，尊重原创https://www.cnblogs.com/highsea90/p/4308794.html

NodeJS实战：Express+Mongoose+ejs

文章目录：
1、组件版本号
– –node
– –express
– –Mongoose
2、初始化项目 firstblood
– –用 express 自动初始化（推荐）
– –附：手动初始化 package.json
3、关于 express 的 app.js
4、前端模板 Handlebars Ejs Jade
– –以 Ejs 模板为例
– –体验一把： route 路由是如何工作的
5、CSS、JS框架支持
– –bootstrap2.3.2 + jquery 1.11.1 为例
– –头部尾部重用
6、增删改查少不了
– –mongodb 小回顾
– –node 操作 Mongoose 【挑战：一个后台登陆验证+展示mongodb中现有会员信息的小案例】
– –增强案例：支持登陆并新增修改会员信息的系统，还得支持 session ~

1、组件版本号：

1.1、node： 资料大全

$ node -vv0.10.35

1.2、express： 3x api

$ express -V3.0.0

1.3、Mongoose : 3.8.24 api

$ npm info mongoose version3.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 报错（兼容性错误） 没事的！ 没事的！！！

如果你有强迫症 请安装 Microsoft Visual Studio 2010 即可 ( Win7 64bit 推荐 )

2、初始化项目 firstblood

2.1、用 express 自动初始化（推荐）

1、先全局安装 express：(来自于淘宝国内镜像)

以 3.2.2 为例：

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

tips:
关于 4.0 呢，中间件全被独立出来，网上 download 下来的代码大都是3.x，可能会出错……
建议用3.x。教程也多，一搜一大堆容易解决不常见的坑。

2、创建项目：

快速熟悉下 express 的指令：

Usage: express [options]Options:  -h, --help          输出帮助信息  -V, --version       输出版本号  -e, --ejs           添加 ejs 模板引擎支持 (默认为jade)  -H, --hogan         添加 hogan.js模板引擎支持  -c, --css   样式 <引擎> 支持 (less|stylus) (默认为css)  -f, --force         强制在非空目录执行

开始安装：

//-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 后可以偷懒；它会在你每次修改完代码后自动重启。 神器哦！

3、安装 mongoose

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

npm install mongoose --save

2.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 安装组件

3、关于 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'));}); 

4、前端模板 Handlebars Ejs Jade

关于这个话题移步：
Jade、EJS、Handlebars 万行代码解释效率比较
Jade和ejs，哪一个更胜一筹
John大神写的20行模板

楼主总结： 项目个人秀当然是 jade、商业化的肯定是 Ejs、Handlebars； 楼主喜欢后者……

4.1、以 Ejs 模板为例

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

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

b：引入 ejs 模块

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

c：修改 /views 目录下的入口文件后缀为 index.html
重启app即可

4.2、体验一把： route 路由是如何工作的

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

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

它负责处理你的请求 “/lu-you-qing-qiu”

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

exports.luyou = function(req, res){  res.render('lu-you-ye-mian', { title: '“路由”是长这样的！' });};

找一个名为 “lu-you-ye-mian.html” （注：上面已经把ejs改成html了哦）去渲染

关于模块化写法，请移步这里： NodeJS 菜鸟入门

3、渲染页面；在 /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吧！

5、CSS、JS框架支持

5.1、以 bootstrap2.3.2 + jquery 1.11.1 为例：

1、将 bootstrap 文件夹中的 /css/目录下的所有文件 复制到 /public/stylesheets/
2、将 /js/目录下的所有文件加上再下载一个 jquery 复制到 /public/javascripts/
3、将 /img/ 目录下所有文件复制到 /public/images/

5.2、头部尾部重用

新建 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 %>

6、增删改查少不了

mongodb 安装、启动、常见指令……移步这里 Mongodb For Windows

6.1、mongodb 小回顾

接下来为 firstblood 项目创建一点数据 (mongodb 版本号：2.6.6)

> use firstbloodswitched 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.2、node 操作 Mongoose 【挑战：一个后台登陆验证+展示mongodb中现有会员信息的小案例】

1、新建目录： 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学习参考文档

2、在 /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('/');        }    });}

4、在 app.js 中添加模块依赖（如果新建路由模块的话）和路由：

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

5、在 /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/ 尝试登陆（用户名密码自然在上文哦~）

小练习：获取 Express 中 HTTP 请求参数：query、body、params

放个小图：

案例小结：以上数据库操作 CURD 只是用到了 Retrieve ，其实API大同小异

6.3、增强案例：支持登陆并新增修改会员信息的系统，还得支持 session ~

待续

本次练习源码： nodejs-exercise
本次扩展： NodeJS+Mongodb+Express做CMS博客系统（符合MVC）

本文参考: THE DEAD-SIMPLE STEP-BY-STEP GUIDE FOR FRONT-END DEVELOPERS TO GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODB By Christopher Buecheler

---

本节完