1. 首页
  2. PHP教程
  3. 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

本文改自非鱼的《【翻译】前端开发人员入门指南，从零开始搭建Node.js, Express, Jade, Mongodb服务器》，之所以把Jade换成Ejs，是因为我觉得ejs更符合WEB编程人员的习惯，更确切说应该是更符合PHP、ASP程序员的使用习惯。好了，废话不多说，直接开始教程。

第1部分 – 15分钟安装

如果你真的是从零开始学，那就花点时间先把环境搭建起来吧。这不难，我用的是Win8，所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别，不过大致是一样的。

第1步 – 安装Node.JS

这很容易，进入Node.js官方网站，点击绿色的大Install按钮，它会自动检测你的系统并给你一个正确的安装文件的下载。（如果没有，点击Download按钮选择你需要的下载）。运行安装程序，这样就好了。你已经装上了Node.js，和NPM（Node包管理器）可以让你很容易的安装各种有用的包到Node里。

第2步 – 安装Express

现在我们已经让Node跑起来了，我们还需要一些东西让我们能够实际创建一个可用的站点。下面我们需要安装Express，这是一个把Node从一个原始的应用变成一个更像我们平时使用的Web服务器的框架。我们需要从Express开始，因为我们需要它提供的scaffolding功能。我们输入这么个命令：

http://localhost:3000，你应该能看到Express的一个欢迎页面了。

现在你已经运行起了你自己的Node JS WebServer，带有Express引擎和Ejs HTML模板引擎。不是很难啊，对吧？

第2部分 – 好了，我们来写“Hello, World!”吧

打开你常用的文本编辑器或者其它IDE，我个人喜欢用Sublime Text。打开你的nodetest1目录下的app.js，这个文件就是你的App的核心了。你应该会看到这样的内容：

http://mongodb.org/，下载Mongo。点击主菜单里的下载链接，找到适合你的系统的版本。对于64位win8，下载64-bit *2008R2+版本。下载后是个zip文件，解压到c:\mongo或者c:\program files\mongo或者随便什么地方，这不重要。我们把数据保存在我们的nodetest1目录里。

第2步 – 运行Mongod和mongo

在我们的nodetest1目录里创建一个子目录data，然后在命令行窗口中进入你的mongodb目录的bin目录里，输入：

复制代码 代码如下:

mongod –dbpath c:\node\nodetest1\data

你会看到mongo服务器启动了，第一次启动需要一点时间，因为它需要预分配一些硬盘空间和一些其它的任务。当它提示”[initandlisten] waiting for connections on port 27017″的时候，就搞定了。没有什么别的需要做的了，服务器已经在运行了。现在你需要另外打开一个命令行窗口，进入mongo目录的bin目录中，输入
复制代码 代码如下:

mongo

你会看到一些类似这种提示：
复制代码 代码如下:

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

这时候如果你看一下mongod的窗口，你会看到提示一个连接已接入。我们接下来会使用这个命令行的客户端去手工处理一下我们的数据库，不过这对我们的Web站点并不是必须的。

第3步 – 创建一个数据库

不用担心上面的连接到test的提示。那只是当你没有指定数据库时mongo默认的一个数据库，它甚至不会创建这个名叫test的数据库，除非你增加一条记录进去。我们创建一个自己的数据库吧。在mongo的命令行窗口中，输入：

复制代码 代码如下:

use nodetest1

除非我们插入一些数据进去，否则它也不会创建这个数据库。

第4步 – 添加一些数据

我最喜欢的MongoDB的特性就是它使用JSON作为数据结构，这就意味着我对此非常的熟悉。如果你不熟悉JSON，先去读点相关资料吧，这超出了本教程的范围。

我们添加一些数据到collection中。在这个教程里，我们只有一个简单的数据库，留侯 username和email两个字段。我们的数据看起来是这个样子的：

复制代码 代码如下:

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

你可以创建你自己的_id字段的值，不过我觉得最好还是让mongo来做这件事。它会为每一条记录创建一个唯一的值。我们看看它是怎么工作的。在mongo的窗口中，输入：
复制代码 代码如下:

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

重要提示：db就是我们上面创建的nodetest1数据库，usercollection就是我们的collection，相当于一张数据表。注意我们不需要提前创建这个collection，它会在第一次使用的时候自动创建。好了，按下回车。如果一切顺利，你会看到……什么也没有。这可不太好，输入：
复制代码 代码如下:

db.usercollection.find().pretty()

如果你好奇的话，pretty方法会格式化输出内容，添加换行缩进。它应该会显示：
复制代码 代码如下:

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

当然，你得到ObjectID应该是不一样的，mongo会自动生成一个。如果你以前使用过JSON接口的服务，现在是不是会觉得，哇，在web里调用这个应该很简单吧！嗯，你说对了。

提示：作为正式服务，你应该不希望所有的数据都存在最顶层。关于mongodb数据结构的设计，多看看Google吧。

现在我们有了一条数据，我们多添加点吧。在mongo窗口中输入：

复制代码 代码如下:

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

注意，我们通过一个数据一次传递了多条数据到collection。多简单！再使用上面的find命令你会看到这三条数据。

现在我们来整合前面搭建的web服务器和数据库。

第5步 – 把mongo连接到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。打开c:\node\nodetest1\app.js，在顶部你会看到：
复制代码 代码如下:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

在它下面添加：
复制代码 代码如下:

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

这几行会告诉app我们需要连接MongoDB，我们用Monk来负责这个连接，我们数据库位置是localhost:27017/nodetest1。注意27017是mongodb的默认端口，如果因为某些原因你修改了端口，记录这里也要跟着改。现在看文件的底部：
复制代码 代码如下:

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/helloworld', routes.helloworld);

下面添加一行：
复制代码 代码如下:

app.get('/userlist', routes.userlist(db));

这一行告诉app当用户访问/userlist路径的时候，我们需要把db变量传递到userlist路由。但是我们现在还没有userlist路由，现在就去创建一个吧。

第6步 – 读取mongo中的数据并显示

用你的编辑器打开c:\node\nodetest1\routes\idnex.js，里面有index和hello world两个route，现在我们来添加第三个：

复制代码 代码如下:

exports.userlist = function(db) {
    return function(req, res) {
        var collection = db.get('usercollection');
        collection.find({},{},function(e,docs){
            res.render('userlist', {
                "userlist" : docs
            });
        });
    };
};

好吧，事情变得有点复杂了。这里首先定义了一个function，接收我们传过来的db变量，然后调用一个跟前面两个route一样的page render。我们告诉它需要读取usercollection，做一个查找，返回的数据保存在docs变量中。一旦我们读取到了内容，就调用render来渲染userlist模板页面，把获取到的docs变量作为模板引擎中的userlist变量传递进去。

接下来建立我们的Ejs模板。在views目录下打开index.ejs，另存为userlist.ejs，然后把它的HTML修改成这样：

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<title>USERLIST</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Userlist</h1>
<ul>
<%
for(var i in userlist){
%>
<li><a href=”mailto:<%=userlist[i].email%>”><%=userlist[i].username%></a></li>
<% } %>
</ul>
</body>
</html>

保存文件，重启node服务器。希望你还记得怎么重启。打开浏览器，访问http://localhost:3000/userlist，你应该能看到这样的界面：

点提交按钮，你会看到一个“can't post to /adduser”的错误。我们来修正它。

第2步 – 创建你的数据库处理函数

跟以前一样，我们修改app.js，然后是route文件，然后是ejs模板。不过，这里不需要ejs模板，因为我们post以后会跳转。在app.js的app.get()这一段的后面添加一行：

复制代码 代码如下:

app.post('/adduser', routes.adduser(db));

注意这里是app.post，不是app.get了。来设置route吧。回到routes/index.js，创建我们的数据库插入函数。这个比较大，所以我建议你写好注释。
复制代码 代码如下:

exports.adduser = function(db) {
    return function(req, res) {

        // 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");
            }
        });

    }
}


显然在真正的项目里你还需要做很多验证，比如用户名和email不允许重复，email地址必须符合一定的格式规则。不过现在我们先不管这些。你可以看到，当插入数据库完成时，我们让用户跳转回userlist页面，他们应该在那里看到新插入的数据。

这是最好的方式吗？

第3步 – 连接数据库，写入数据

确保你的mongod在运行！然后重启你的node服务器。用浏览器打开http://localhost:3000/newuser。现在我们填入一些内容，点击提交按钮。如果顺利，我们应该回到了userlist页面，并且看到了刚刚添加的新数据。

现在我们正式的完成了使用Node.js，Exress，Ejs读取和写入Mongodb数据库，我们已经是牛X的程序员了。

恭喜你，真的。如果你认真的看完了这篇教程，并且很认真的学习而不只是复制代码，你应该对routes, views，读数据，写入数据有了完整的概念。这是你用来开发任何其它完整的Web网站所需要的一切知识点！不管你怎么想，我觉得这真挺酷的。

第5部分 – 下一步

现在开始，你拥有无限的可能。你可以看看Mongoose, 另一个处理MongoDB数据库的Node包。它比Monk更大一些，功能也更丰富。你还可以看看Stylus，一个Express的CSS引擎。你可以Google一下Node Express Mongo Tutorial，看看接下来的内容。好好学习，天天向上。

我希望这篇教程能够有所帮助，我写这个是因为当我开始学习的时候我真的很需要这样的东西，但是又真的找不到。如果你已经看到了这里，非常感谢！

« 
» 
PHP教程
PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理 函数库分类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3