[译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站

原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

原文的源代码在此

太多的教程教你些一个Hello, World!了, 但是仅凭Hello, World! 是找不到工作的, 因此有了这篇教程.

PART I – 安装开发环境

作者是在Windows 8上开发的.

STEP 1 – 安装NODE.JS

打开 Node.js website 点击绿色的安装按钮. 运行安装程序就安装好了, 就是这么简单. 现在你已经安装好Node.js了, 同样NPM(Node Package Manager)也安装好了

• 打开命令终端 cmd
• cd到你想要建立应用的目录
  (本教程是 C:\node).

STEP 2 – 安装EXPRESS

现在我们安装Express, Express是一个框架他能让我们更简单的建立一个web应用. 在命令终端运行:

C:\node>npm install -g express

（-g代表安装到全局, 我感觉express不应该安装到全局）

好消息: 你可以安装一个express的"generator". 他能帮我们生成一个网站基本的框架, 让我们少些了好多的代码(如果你想了解更多可以去Yeoman 看看). 安装generator也很容易, 在命令终端运行:

C:\node>npm install -g express-generator

好了是时候生成一个网站的基本框架了

STEP 3 – CREATE AN EXPRESS PROJECT

我们使用Express 和 Jade, 在命令终端输入:

C:\node>express nodetest1

点击回车,  你可以看到下面的东西

C:\node>express nodetest1
    create : nodetest1
    create : nodetest1/package.json
    create : nodetest1/app.js
    create : nodetest1/public
    create : nodetest1/public/javascripts
    create : nodetest1/public/images
    create : nodetest1/routes
    create : nodetest1/routes/index.js
    create : nodetest1/routes/users.js
    create : nodetest1/public/stylesheets
    create : nodetest1/public/stylesheets/style.css
    create : nodetest1/views
    create : nodetest1/views/index.jade
    create : nodetest1/views/layout.jade
    create : nodetest1/views/error.jade
    create : nodetest1/bin
    create : nodetest1/bin/www

    install dependencies:
     $ cd nodetest1 && npm install

    run the app:
     $ DEBUG=my-application ./bin/www

STEP 4 – 编辑依赖

现在我们的网站已经有一个基本的结构了, 但是我们现在还有一些事没做. 你能注意到nodetest1目录有一个叫package.json的文件. 文件的内容如下:

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "express": "~4.0.0",
        "serve-favicon": "~2.1.3",
        "morgan": "~1.0.0",
        "cookie-parser": "~1.0.1",
        "body-parser": "~1.0.0",
        "debug": "~0.7.4",
        "jade": "~1.3.0"
    }
}

这些json内容描述了我们的网站和他的一些依赖. 我们需要添加一些东西. 现在让我们在依赖里面添加MongoDB和Monk.

"dependencies": {
    "express": "~4.0.0",
    "serve-favicon": "~2.1.3",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "jade": "~1.3.0",
    "mongodb": "*",
    "monk": "*"
}

STEP 5 – 安装依赖

现在我们已经定义了我们的依赖. 注意星号代表获取最新的版本. 打开终端 cd到nodetest1目录, 输入:

C:\node\nodetest1>npm install

现在终端会输出一大堆的东西. 因为读取JSON文件安装我们定义的依赖对象. 运行完后, 你可以发现一个node_modules目录, 里面包含了我们之前定义的依赖.

现在你的网站基本可以运行了. 在运行前我们需要设置一个数据库目录. 在终端输入:

C:\node\nodetest1>mkdir data

这个目录用来存储我们的MongoDB数据. 如果这个目录不存在的话, 数据库会阻塞我们的网站. 好了现在我们可以来运行看看我们的网站了. 在终端输入:

C:\node\nodetest1>npm start

回车后, 你可以在终端看到下面的东西

> application-name@0.0.1 start D:\sites\node\nodetest1
> node ./bin/www

打开浏览器, 输入http://localhost:3000  你可以看到一个Express的欢迎页面

PART 2 – 好了让我们做个"HELLO, WORLD!"

用IDE打开app.js, 内容如下:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

上面的代码给package、依赖、node functionality和路由创建了相应的变量. 路由是modles和controllers的一种关联. 这里我们忽略不去管user路由只关注于顶级路由 (c:\node\nodetest1\routes\index.js).

app.js

var app = express();

这个非常重要. 他实例化了一个Express并且分配给了app变量. 下面的代码片段使用这个变量配置一堆express的东西.

app.js

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

上面的代码告诉app去哪查找views（视图）, 使用何种视图引擎展现我们的视图(Jade), 另外调用了一些方法. 倒数第三行代码告诉Express静态文件放在public目录, 我们获取这些静态文件的时候不需要在url中输入public . 比如, 图片目录在c:\node\nodetest1\public\images, 但是我们通过http://localhost:3000/images 来进入到图片目录.

app.js

/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

这里有两种错误处理器, 一个是给开发环境用的,另一个是给生产环境使用的.

app.js

module.exports = app;

Node的一个核心部分就是module.exports. 我们的主app导出app对象.

我们先看看app.js现有的路由:

app.use('/', routes);
app.use('/users', users);

上面的代码告诉Express使用那些路由文件. 一般我提倡为应用的不同部分写对应的路由文件. 例如, users路由文件可能包含添加用户、删除用户、更新用户的路由,locations路由文件处理添加、删除、编辑、展示location的路由. 在我们的这个教程中, 为了简单的演示， 我们只关注index路由.

Express generator已经定义了一个"routes" 变量指向index路由. 我们在index路由中添加"helloworld"方法展示一个新的页面. 打开index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

在最后一行前加入下面的代码:

/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
    res.render('helloworld', { title: 'Hello, World!' })
});

现在我们还没创建一个helloworld页面. 打开views文件夹, 打开index.jade. 创建一个helloworld.jade文件内容拷贝index.jade的内容.

现在helloworld.jade的内容如下:

extends layout

block content
    h1= title
    p Welcome to #{title}

使用("extends") 将layout.jade作为一个模板, 接下来在layout文件定义的content block下面输出一个h1和p标签. 注意"title"参数是我们在index.js路由中已经定义了的.

下面让我们改变p的内容:

p Hello, World! Welcome to #{title}

保存文件,回到终端, 按ctrl-c退出服务, 输入:

npm start

顺便说一下, 修改Jade模板不需要重启服务, 但是修改app.js或者路由这样的.js文件需要重启服务.

现在打开http://localhost:3000/helloworld 页面, 效果如下:

PART 3 – 创建数据库

STEP 1 – 安装MONGODB

打开http://mongodb.org/ 下载Mongo. 你会得到一个zip文件, 解压到一个临时的目录. 创建一个目录放Mongo, 把解压后的文件放到这个新的目录下.

STEP 2 – 运行MONGOD和MONGO

在你的nodetest1目录, 新建一个data子目录. 先cd到你安装mongo的目录, 然后输入:

mongod --dbpath c:\node\nodetest1\data

Mongo服务运行了. 第一次会消耗一定的时间, 因为mongo要预先分配一些空间, 另外还要运行一些任务. 当看到终端输出"[initandlisten] waiting for connections on port 27017", 这代表启动完成了. 现在另开一个终端cd到mongo的安装目录, 输入:

mongo

回车后看到下面的内容

c:\mongo>mongo
MongoDB shell version: 2.4.5
connecting to: test

这告诉你连接已经建立好了

STEP 3 – 创建数据库

"connecting to: test" …test是mongo默认使用的数据库. 其实这个时候还没有真正的创建了一个名为test的数据库, 除非你给test创建了一条记录, 这个时候test数据库才真正的被创建. 在Mongo console 中输入:

use nodetest1

现在我们使用"nodetest1数据库, 和上面讲到的"test"一样, 这个时候我们并没有真正的创建了nodetest1数据库. 为了真正的创建这个数据库, 我们应该添加一些数据.

STEP 4 – 添加数据

添加一些数据到我们的collection. 在这个教程中, 我们的数据比较简单, 只需要一个username和email.数据格式如下:

{
    "_id" : 1234,
    "username" : "cwbuecheler",
    "email" : "cwbuecheler@nospam.com"
}

在mongo终端输入:

db.usercollection.insert({ "username" : "testuser1", "email" : "testuser1@testdomain.com" })

这里要注意的是: "db" 代表我们的数据库, 这里是我们上面定义的"nodetest1"."usercollection" 是我们的collection. 注意我们没有一个创建usercollection的步骤. 因为第一次使用的时候他会自动被创建.回车. 如果一切顺利的话, 终端不会输出任何东西. 现在输入:

db.usercollection.find().pretty()

.pretty() 方法会使得输出自动换行, 这样返回的内容的可读性更好. 返回内容如下:

{
    "_id" : ObjectId("5202b481d2184d390cbf6eca"),
    "username" : "testuser1",
    "email" : "testuser1@testdomain.com"
}

现在我们一次插入多条记录

newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);

是的, 我们可以传递一个对象数组给我们的collection

STEP 5 – HOOK MONGO UP TO NODE

让我们开始创建一个页面显示数据路里面的内容. 这里是我们期望的得到的html

<ul>
    <li><a href="mailto:testuser1@testdomain.com">testuser1</a></li>
    <li><a href="mailto:testuser2@testdomain.com">testuser2</a></li>
    <li><a href="mailto:testuser3@testdomain.com">testuser3</a></li>
</ul>

我们需要在app.js文件中添加几行代码, 用来连接我们的MongoDB. 打开app.js文件:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

现在让我们来添加3行代码

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');

这几行代码告诉我们的应用我们想使用MongoDB, 这里使用的是Monk(现在Mongoose比较流行), 我们的数据库位于localhost:27017/nodetest1. 注意27017是MOngoDB的默认端口. 现在看到app.js文件的底部, 代码如下:

app.use('/', routes);
app.use('/users', users);

在这我们需要做点工作.app.use语句是为Express建立中间件. 简短的说: 他们提交了一些自定义的函数使得你的app更加有用. 他们很简单, 但是要注意的是他们必须放在路由定义前才能生效.

在上面两行代码前加入下面的代码

// Make our db accessible to our router
app.use(function(req,res,next){
    req.db = db;
    next();
});

注意: 如果你不是将上面的代码放在 app.use('/', routes) 之上, 你新加的代码就不会起作用.

当我们添加Mongo和Monk到app.js的时候我们已经定义了db. db是我们的Monk连接对象. 在把上面的代码添加到app.use后, 每个HTTP request对象都有一个db了. 注意: 这个对性能来说可能不是最好的选择, 但是我们这里是讲快速搭建.

再次强调, 上面的代码必须放在我们的路由之上. 现在你的app.js应该是这样子的:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Make our db accessible to our router
app.use(function(req,res,next){
    req.db = db;
    next();
});

app.use('/', routes);
app.use('/users', users);

/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

接下来我们要修改我们的路由, 这样我们就能使用数据库来展现数据了.

STEP 6 – PULL YOUR DATA FROM MONGO AND DISPLAY IT

在编辑器中打开 C:\node\nodetest1\routes\index.js. 现在让我们来添加一个路由:

/* GET Userlist page. */
router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({},{},function(e,docs){
        res.render('userlist', {
            "userlist" : docs
        });
    });
});

下一步我们要设置我们的Jade 模版. 导航到C:\node\nodetest1\views\打开index.jade文件. 复制其内容到新建的userlist.jade, 编辑内容如下:

extends layout

block content
    h1.
        User List
    ul
        each user, i in userlist
            li
                a(href="mailto:#{user.email}")= user.username

each中的user代表迭代中的user, i(index)是一个计数器.

保存文件, 重启node服务:

C:\node\nodetest1>npm start

Now open your browser and head to http://localhost:3000/userlist and marvel in the results.

现在你从数据库里面取出来数据展现在网页上了!

PART 4 – 数据库的写操作

数据库的写操作不难. 记住写操作一般用 HTTP POST

STEP 1 – 创建数据输入框CREATE YOUR DATA INPUT

我们先为添加用户的表单页面添加一个路由. 打开/routes/index.js 添加下面的代码（在module.exports前） :

/* GET New User page. */
router.get('/newuser', function(req, res) {
    res.render('newuser', { title: 'Add New User' });
});

现在我们添加一个jade模版页面  newuser.jade:

extends layout

block content
    h1= title
    form#formAddUser(name="adduser",method="post",action="/adduser")
        input#inputUserName(type="text", placeholder="username", name="username")
        input#inputUserEmail(type="text", placeholder="useremail", name="useremail")
        button#btnSubmit(type="submit") submit

重启node服务, 打开 http://localhost:3000/newuser 内容如下:

现在点击submit按钮会得到一个404错误.

STEP 2 – 创建我们的数据功能

现在我们要做的是添加一个Post路由名为 /adduser.

打开 /routes/index.js 添加下面的内容:

/* POST to Add User Service */
router.post('/adduser', function(req, res) {

    // Set our internal DB variable
    var db = req.db;

    // Get our form values. These rely on the "name" attributes
    var userName = req.body.username;
    var userEmail = req.body.useremail;

    // Set our collection
    var collection = db.get('usercollection');

    // Submit to the DB
    collection.insert({
        "username" : userName,
        "email" : userEmail
    }, function (err, doc) {
        if (err) {
            // If it failed, return error
            res.send("There was a problem adding the information to the database.");
        }
        else {
            // If it worked, set the header so the address bar doesn't still say /adduser
            res.location("userlist");
            // And forward to success page
            res.redirect("userlist");
        }
    });
});

STEP 3 – 连结并且添加一些数据到数据库

确定mongod是正在运行的! 下面重启node :

C:\node\nodetest1>npm start

现在我们打开 http://localhost:3000/newuser 添加一些内容（下面的网址不正确请忽略网址）.

点击submit, 我们会跳转到 /userlist 页面, 在这个页面中可以看到我们添加的新用户!