网站首页 » 网站运营 » Linux » Node.js + Express.js 环境配置
上一篇:
下一篇:

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\zhaoxixiong>npm install -g express-generator
C:\Users\zhaoxixiong\AppData\Roaming\npm\express -> C:\Users\zhaoxixiong\AppData
\Roaming\npm\node_modules\express-generator\bin\express
C:\Users\zhaoxixiong\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\zhaoxixiong>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\zhaoxixiong>cd blog &npm install
blog@0.0.0 C:\Users\zhaoxixiong\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\zhaoxixiong\blog>node -v
v6.3.1

C:\Users\zhaoxixiong\blog>npm -v
3.10.3

C:\Users\zhaoxixiong\blog>SET DEBUG=blog:* & npm start

> blog@0.0.0 start C:\Users\zhaoxixiong\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 express

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

后继配置

细节说明

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

npm start

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

C:\Users\zhaoxixiong>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\zhaoxixiong\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\zhaoxixiong\pa
ckage.json’
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\zhaoxixiong\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\zhaoxixiong\npm-debug.log

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

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

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

> blog@0.0.0 start C:\Users\zhaoxixiong\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\zhaoxixiong\AppData\Roaming\npm\supervisor -> C:\Users\zhaoxixiong\AppD
ata\Roaming\npm\node_modules\supervisor\lib\cli-wrapper.js
C:\Users\zhaoxixiong\AppData\Roaming\npm\node-supervisor -> C:\Users\zhaoxixiong
\AppData\Roaming\npm\node_modules\supervisor\lib\cli-wrapper.js
C:\Users\zhaoxixiong\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

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

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/nodejs-expressjs-environment-configuration/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END