Node.js + Express.js 环境配置

前言

Node.js 如今越来越火，不管你走到哪里，跟Node.js 打交道的机会还是很多的，例如：当你想换工作的时候，在各大求职网站上东找找西找找的时候，你肯定会看到 会Node.js 或者 精通 Node.js。一直都觉得 Node.js 好高大尚，所以也不敢撞他，但不管我如何对它，都不会阻止它的流行及在前端中的地位，所以今天我还是硬着头皮开始了Node.js 之旅。我这次是在Window 系统下安装测试的，但是万变不离其踪，以不变变万变，Linux、Mac 也都差不多。

环境配置

工欲善其事必先利其器，所以我们在学习 Node.js 之前，先把这 Node.js 的环境配置好。这里也不多说什么了，先直接贴出配置的整个过程

Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
C:\Users\myPC>npm install -g express-generator
C:\Users\myPC\AppData\Roaming\npm\express -> C:\Users\myPC\AppData
\Roaming\npm\node_modules\express-generator\bin\express
C:\Users\myPC\AppData\Roaming\npm
`-- express-generator@4.13.4
  +-- commander@2.7.1
  | `-- graceful-readlink@1.0.1
  +-- mkdirp@0.5.1
  | `-- minimist@0.0.8
  `-- sorted-object@2.0.0
C:\Users\myPC>express -e blog
   create : blog
   create : blog/package.json
   create : blog/app.js
   create : blog/routes
   create : blog/routes/index.js
   create : blog/routes/users.js
   create : blog/public
   create : blog/views
   create : blog/views/index.ejs
   create : blog/views/error.ejs
   create : blog/bin
   create : blog/bin/www
   create : blog/public/stylesheets
   create : blog/public/stylesheets/style.css
   install dependencies:
     > cd blog && npm install
   run the app:
     > SET DEBUG=blog:* & npm start
   create : blog/public/images
   create : blog/public/javascripts
C:\Users\myPC>cd blog &npm install
blog@0.0.0 C:\Users\myPC\blog
+-- body-parser@1.15.2
| +-- bytes@2.4.0
| +-- content-type@1.0.2
| +-- depd@1.1.0
| +-- http-errors@1.5.0
| | +-- inherits@2.0.1
| | +-- setprototypeof@1.0.1
| | `-- statuses@1.3.0
| +-- iconv-lite@0.4.13
| +-- on-finished@2.3.0
| | `-- ee-first@1.1.1
| +-- qs@6.2.0
| +-- raw-body@2.1.7
| | `-- unpipe@1.0.0
| `-- type-is@1.6.13
|   +-- media-typer@0.3.0
|   `-- mime-types@2.1.11
|     `-- mime-db@1.23.0
+-- cookie-parser@1.4.3
| +-- cookie@0.3.1
| `-- cookie-signature@1.0.6
+-- debug@2.2.0
| `-- ms@0.7.1
+-- ejs@2.4.2
+-- express@4.13.4
| +-- accepts@1.2.13
| | `-- negotiator@0.5.3
| +-- array-flatten@1.1.1
| +-- content-disposition@0.5.1
| +-- cookie@0.1.5
| +-- escape-html@1.0.3
| +-- etag@1.7.0
| +-- finalhandler@0.4.1
| +-- fresh@0.3.0
| +-- merge-descriptors@1.0.1
| +-- methods@1.1.2
| +-- parseurl@1.3.1
| +-- path-to-regexp@0.1.7
| +-- proxy-addr@1.0.10
| | +-- forwarded@0.1.0
| | `-- ipaddr.js@1.0.5
| +-- qs@4.0.0
| +-- range-parser@1.0.3
| +-- send@0.13.1
| | +-- destroy@1.0.4
| | +-- http-errors@1.3.1
| | +-- mime@1.3.4
| | `-- statuses@1.2.1
| +-- serve-static@1.10.3
| | `-- send@0.13.2
| |   +-- http-errors@1.3.1
| |   `-- statuses@1.2.1
| +-- utils-merge@1.0.0
| `-- vary@1.0.1
+-- morgan@1.7.0
| +-- basic-auth@1.0.4
| `-- on-headers@1.0.1
`-- serve-favicon@2.3.0
C:\Users\myPC\blog>node -v
v6.3.1
C:\Users\myPC\blog>npm -v
3.10.3
C:\Users\myPC\blog>SET DEBUG=blog:* & npm start
> blog@0.0.0 start C:\Users\myPC\blog
> node ./bin/www
  blog:server Listening on port 3000 +0ms
GET / 200 21.915 ms - 207
GET /stylesheets/style.css 200 4.449 ms - 111
GET /favicon.ico 404 5.986 ms - 946
GET / 304 3.439 ms - -
GET /stylesheets/style.css 304 0.949 ms - -

不要被这么一大堆代码吓到了，其实需要你输入的命令行也就那么几个句，你可看好了，下面我就把它都一个一个揪出来。

安装Express

什么是 Express ？ Express 是Node.js 上最流行的 Web 开发框架，我们可以通过它来开发一个 Web 应用。

npm install -g express-generator

创建项目

创建一个 blog 文件夹

express -e blog

命令行中的 -e 表示 ejs 模板引擎，不写 -e  默认的创建jade模板引擎

初始化一个Express 项目并安装所需要模块。

cd blog && npm install

cd blog //进入到你创建的项目目录
npm install //读取根目录中的package.json文件然后安装项目所依赖的包

启用项目

接下来我们要做的就是开启这个项目，让他成为可访问的站点。

SET DEBUG=blog:* & npm start

当你看到这个提示时说明你已经成功了

blog:server Listening on port 3000 +0ms

接下来就是见证奇迹的时刻了，在浏览器中输入localhost:3000，回车后你就可以看到一个简单而充满成就感页面了。

现在，你可以开始你的建站之旅了，预祝你一路顺风，过五关斩六将，在Node.js的征程之路越走越好。

后继配置

细节说明

可当你重启电脑后，你会发现 localhost:3000无法访问了。这是什么问题呢？根据自己多年的临床经验，我觉得应该是没有启用某个服务。于是我就回想了下在安装的时候启用了什么服务，不用多想就只有一个那就是它：

npm start

win+R 键打终端，运行上面的启动命令行，但失败了出现如下提示

C:\Users\myPC>npm start
npm ERR! Windows_NT 6.1.7601
npm ERR! argv “D:\\Program Files\\nodejs\\node.exe” “D:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js” “start”
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! path C:\Users\myPC\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\myPC\pa
ckage.json’
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\myPC\pa
ckage.json’
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\myPC\npm-debug.log

怎么会这样？原因也很简单，原来我没有切换到站点目录blog，接着再启动就可以了。运行如下一行命令

C:\Users\myPC>cd /blog
C:\Users\myPC\blog>npm start

然后就会出现如下成功启动的信息提示了。你也可以用这行命令来启用SET DEBUG=blog:* & npm start

> blog@0.0.0 start C:\Users\myPC\blog
> node ./bin/www
  blog:server Listening on port 3000 +0ms
GET / 200 75.146 ms - 207
GET /stylesheets/style.css 304 4.382 ms - -
GET /favicon.ico 404 5.675 ms - 946

supervisor 配置

还有一个不大不小的问题，那就是当我们修改了模板代码时，都必需手动中止并重启应用，这还真够麻烦的，但我们可以使用supervisor 模块来解决这个问题，安装完这个模块后，我们更改了模板也无需手动中止并重启应用，supervisor 会自动帮我们完成这两个步骤。现在你要做的就是执行如下命令行，安装supervisor模块即可。

D:\Program Files\mongodb\yunkus>npm install -g supervisor

回车后你会看到这样的提示

D:\Program Files\mongodb\yunkus>npm install -g supervisor
C:\Users\myPC\AppData\Roaming\npm\supervisor -> C:\Users\myPC\AppD
ata\Roaming\npm\node_modules\supervisor\lib\cli-wrapper.js
C:\Users\myPC\AppData\Roaming\npm\node-supervisor -> C:\Users\myPC
\AppData\Roaming\npm\node_modules\supervisor\lib\cli-wrapper.js
C:\Users\myPC\AppData\Roaming\npm
`– supervisor@0.11.0

然后再执行命令行 supervisor ./bin/www 就可以了

D:\Program Files\mongodb\yunkus>supervisor ./bin/www
Running node-supervisor with
program './bin/www'
--watch '.'
--extensions 'node,js,/bin/www'
--exec 'node'
Starting child process with 'node ./bin/www'
Watching directory 'D:\Program Files\mongodb\yunkus' for changes.
Press rs for restarting the process.
yunkus:server Listening on port 3000 +0ms

现在你再试试修改模板，是不是改完后，你只需刷新下页面就可以看到更改后的效果了呀！