零基础搭建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功能。我们输入这么个命令：

这样Express就被正确的安装到我们的Node里了，并且已经设为全局可用的。你会在命令行窗口看到一堆输出，大部分是http 304和GET请求，这是正常的。Express应该已经装好并可用了。

第3步 – 创建一个Express项目

我们准备使用Express和Ejs，但是不是用来做CSS预处理的。我们会手写一些CSS。我们要用Ejs或者其它的模板引擎来处理Node和Express的数据。如果你会HTML的话，Ejs并不难。只要记住你需要集中精神，否则事情可能很容易出错。

现在在同一个命令行窗口中输入：

回车，你会看到这样一堆东西：

第4步 – 编辑依赖项

好了，我们现在有一些基本项目结构，但是还没完。你会注意到express的安装过程在你的nodetest1目录里创建了一个叫package.json的文件，用文本编辑器打开这个文件，它应该是长这样的。

这是一个标准的JSON格式文件，表明了我们的应用和它的依赖。我们需要添加一点东西。比如对mongodb和Monk的调用。把dependencies部分改成这样：

第5步 – 安装依赖

现在我们定义好了项目的依赖项。*号会告诉NPM“安装最新版本”。回到命令行窗口，进入nodetest1目录，输入：

它会输出一堆东西。这是因为它直接读取我们修改过的JSON文件，识别其中的依赖项，并安装必须的文件。当NPM安装完成以后，你应该有了一个node_modules目录，其中包含我们的项目所需要的所有依赖文件。

现在我们有了一个完整功能的App，并且可以运行了。我们试试看吧！确保你的当前目录是nodetest1目录，输入：

回车后你会看到：

太棒了。打开浏览器，输入http://localhost:3000，你应该能看到Express的一个欢迎页面了。

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

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

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

这个只是定义了一堆JavaScript变量并指向了一些包和依赖，node函数，和routes。Routes（路由）相当于MVC中Models和Controllers的集合，它负责转发请求并且也包含一些处理逻辑。Express已经为我们创建好了所有这些东西，我们现在先忽略user route，开始写最顶层的route（由routes\index.js控制）。

在上面的这个文件的最后写上：

这一句至关重要。它实例化了Express并赋值给我们的app变量。接下来的内容都要使用这个变量来配置一堆Express的参数。继续输入：

这里设置了端口，寻找views的目录，用什么模板引擎来处理这些views，和一些其它的东西。还要注意最后一行，它告诉Express把public/目录下的静态文件作为顶层目录的文件来托管。比如你的图片目录存放在c:\node\nodetest1\public\images\里，但是实际访问地址是http://localhost:3000/images/。

注意：你需要把这一行

改成

这是为了忽略一些App运行过程中Node窗口里面的警告信息。主要是一些Express和它的插件未来可能的修改。如果你不做这个修改，程序运行时你会收到一堆某某函数即将过期的警告。

然后增加：

这样在开发过程中你可以做一些错误检查。

继续增加：

这会告诉路由当一个URI请求到达时使用哪个Route来处理。注意user变量是在前面定义的，并被map到了/routes/user.js，我们会调用这个文件中定义的list函数。这里可以显示用户列表。

继续增加：

最后，创建一个http server并且启动它。这样就差不多了。

（以上内容在新的express生成的模板里是完整的，不需要自己写进去）

现在，我们写点有用的。我们不会直接在我们的index页面里写“Hello World!”，我们借这个机会学习一下如何使用route路由，同时学习一下Ejs引擎是如何工作的。在上面的app.js文件的app.get()这一段的后面添加一行：

app.get('/helloworld', routes.helloworld);
如果这时候你在命令行窗口按ctrl+C结束app.js进程再重启，然后用浏览器访问http://localhost:3000/helloworld，你会得到一个很激动人心的node错误和命令行窗口中的一堆崩溃提示。这是因为我们还没有修改路由去处理这个路径。来做这个吧。在你的编辑器里，进入routes目录，找到index.js，打开它。它看上去应该是这样的：

我们来添加一个新页面。我比较喜欢给每一个一级目录创建一个独立的route文件，但是现在我们还不打算在views下面给helloworld建一个完整的目录结构，所以我们暂时先使用index路由。在这个文件的最后添加：

它会负责处理这个URI请求，但是现在我们还没有一个实际的页面让res.render去render，这是Ejs负责的工作。进入你的views目录，打开index.ejs，把它另存为helloworld.ejs文件。现在它看上去应该是这样的：

应该很容易理解。
保存文件。在命令行窗口中按ctrl+c中断app.js，然后输入node app.js重新启动它。提示：当你修改一个ejs模板文件的时候，你不需要重启服务器。但是当你改了一个js文件的时候，比如app.js或者一个路由js文件，就必须要重启服务器才能看到效果了。

服务器启动后，注服务器打开http://localhost:3000/helloworld，应该能看到这个漂亮的界面了：

好了！现在我们有了路由可以处理我们的模板，看到了我们想要的效果。接下来我们来做一些Model（数据层）。

第3部分 – 创建数据库并读取数据

第1步 – 安装Mongodb

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

第2步 – 运行Mongod和mongo

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

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

你会看到一些类似这种提示：

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

第3步 – 创建一个数据库

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

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

第4步 – 添加一些数据

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

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

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

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

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

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

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

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

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

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

第5步 – 把mongo连接到node

现在我们来建立一个页面，把数据库里的记录显示成一个漂亮的表格。这是我们准备生成的HTML内容：

我知道这不太科学，不过你理解就好。我们只是为了建立一个简单的数据库读写程序，不是为了建立一个完整的网站。首先，我们往app.js（我们的程序的心脏和灵魂）里添加一点内容，这样才能接连上mongodb。打开c:\node\nodetest1\app.js，在顶部你会看到：

在它下面添加：

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

下面添加一行：

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

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

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

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

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

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

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

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

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

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

显然在真正的项目里你还需要做很多验证，比如用户名和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，看看接下来的内容。好好学习，天天向上。

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

最新评论