基于express框架的应用程序骨架生成器介绍

  作者：zhanhailiang 日期：2014-11-09

本文将介绍如何使用express-generator工具快速生成基于express框架的应用程序骨架：

1. 安装express-generator工具：

[root@~/wade/wadetest]# npm install express-generator -g
/usr/bin/express -> /usr/lib/node_modules/express-generator/bin/express
express-generator@4.9.0 /usr/lib/node_modules/express-generator
├── commander@1.3.2 (keypress@0.1.0)
└── mkdirp@0.5.0 (minimist@0.0.8)

2. 在github.com上创建空项目express-generator，并将其克隆到本地：

[root@~/wade/nodejs]# git clone [email protected]:billfeller/express-generator.git
Initialized empty Git repository in /root/wade/nodejs/express-generator/.git/
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (3/3), done.

3. 使用express-generator工具强制创建名为express-generator的应用程序：

[root@~/wade/nodejs]# express -h
 
  Usage: express [options] [dir]
 
  Options:
 
    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass) (defaults to plain css)
    -f, --force         force on non-empty directory
 
[root@~/wade/nodejs]# express -f express-generator
 
   create : express-generator
   create : express-generator/package.json
   create : express-generator/app.js
   create : express-generator/public
   create : express-generator/public/javascripts
   create : express-generator/public/images
   create : express-generator/public/stylesheets
   create : express-generator/public/stylesheets/style.css
   create : express-generator/routes
   create : express-generator/routes/index.js
   create : express-generator/routes/users.js
   create : express-generator/views
   create : express-generator/views/index.jade
   create : express-generator/views/layout.jade
   create : express-generator/views/error.jade
   create : express-generator/bin
   create : express-generator/bin/www
 
   install dependencies:
     $ cd express-generator && npm install
 
   run the app:
     $ DEBUG=express-generator ./bin/www
 
[root@~/wade/nodejs]# cd express-generator/
[root@~/wade/nodejs/express-generator]# npm install
cookie-parser@1.3.3 node_modules/cookie-parser
├── cookie@0.1.2
└── cookie-signature@1.0.5
 
debug@2.0.0 node_modules/debug
└── ms@0.6.2
 
serve-favicon@2.1.6 node_modules/serve-favicon
├── ms@0.6.2
├── fresh@0.2.4
└── etag@1.5.0 (crc@3.0.0)
 
morgan@1.3.2 node_modules/morgan
├── basic-auth@1.0.0
├── depd@0.4.5
└── on-finished@2.1.0 (ee-first@1.0.5)
 
body-parser@1.8.4 node_modules/body-parser
├── media-typer@0.3.0
├── bytes@1.0.0
├── raw-body@1.3.0
├── depd@0.4.5
├── qs@2.2.4
├── iconv-lite@0.4.4
├── on-finished@2.1.0 (ee-first@1.0.5)
└── type-is@1.5.2 (mime-types@2.0.2)
 
express@4.9.8 node_modules/express
├── merge-descriptors@0.0.2
├── utils-merge@1.0.0
├── fresh@0.2.4
├── cookie@0.1.2
├── escape-html@1.0.1
├── range-parser@1.0.2
├── cookie-signature@1.0.5
├── finalhandler@0.2.0
├── vary@1.0.0
├── media-typer@0.3.0
├── methods@1.1.0
├── parseurl@1.3.0
├── serve-static@1.6.4
├── path-to-regexp@0.1.3
├── depd@0.4.5
├── on-finished@2.1.1 (ee-first@1.1.0)
├── qs@2.2.4
├── etag@1.4.0 (crc@3.0.0)
├── type-is@1.5.2 (mime-types@2.0.2)
├── proxy-addr@1.0.3 (forwarded@0.1.0, ipaddr.js@0.1.3)
├── send@0.9.3 (destroy@1.0.3, ms@0.6.2, on-finished@2.1.0, mime@1.2.11)
└── accepts@1.1.2 (negotiator@0.4.9, mime-types@2.0.2)
 
jade@1.6.0 node_modules/jade
├── character-parser@1.2.0
├── commander@2.1.0
├── void-elements@1.0.0
├── mkdirp@0.5.0 (minimist@0.0.8)
├── transformers@2.1.0 (promise@2.0.0, uglify-js@2.2.5, css@1.0.8)
├── monocle@1.1.51 (readdirp@0.2.5)
├── constantinople@2.0.1 (uglify-js@2.4.15)
└── with@3.0.1 (uglify-js@2.4.15)

4. 最后以调试模式运行该应用程序：

[root@~/wade/nodejs/express-generator]# DEBUG=express-generator ./bin/www 
  express-generator Express server listening on port 3000 +0ms
GET /users 200 15.039 ms - 23
GET /favicon.ico 404 461.432 ms - 1212
GET / 304 24.634 ms - -
GET /stylesheets/style.css 304 3.490 ms - -

也可以通过设置DEBUG=express:*打印并查看所有express内部调用日志：

[root@~/wade/nodejs/express-generator]# DEBUG=express:* ./bin/www 
  express:router:route new / +0ms
  express:router:layer new / +7ms
  express:router:route get / +2ms
  express:router:layer new / +0ms
  express:router:route new / +1ms
  express:router:layer new / +0ms
  express:router:route get / +0ms
  express:router:layer new / +0ms
  express:application compile etag weak +1ms
  express:application compile query parser extended +0ms
  express:application compile trust proxy false +0ms
  express:application booting in development mode +1ms
  express:router use / query +1ms
  express:router:layer new / +0ms
  express:router use / expressInit +0ms
  express:router:layer new / +0ms
  express:router use / logger +1ms
  express:router:layer new / +0ms
  express:router use / jsonParser +43ms
  express:router:layer new / +0ms
  express:router use / urlencodedParser +3ms
  express:router:layer new / +0ms
  express:router use / cookieParser +1ms
  express:router:layer new / +0ms
  express:router use / serveStatic +0ms
  express:router:layer new / +0ms
  express:router use / router +1ms
  express:router:layer new / +0ms
  express:router use /users router +0ms
  express:router:layer new /users +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router dispatching GET / +9s
  express:router query  : / +2ms
  express:router expressInit  : / +1ms
  express:router logger  : / +0ms
  express:router jsonParser  : / +2ms
  express:router urlencodedParser  : / +0ms
  express:router cookieParser  : / +1ms
  express:router serveStatic  : / +0ms
  express:router router  : / +3ms
  express:router dispatching GET / +0ms
GET / 304 475.460 ms - -
  express:router dispatching GET /stylesheets/style.css +570ms
  express:router query  : /stylesheets/style.css +1ms
  express:router expressInit  : /stylesheets/style.css +0ms
  express:router logger  : /stylesheets/style.css +0ms
  express:router jsonParser  : /stylesheets/style.css +1ms
  express:router urlencodedParser  : /stylesheets/style.css +0ms
  express:router cookieParser  : /stylesheets/style.css +0ms
  express:router serveStatic  : /stylesheets/style.css +1ms
GET /stylesheets/style.css 304 6.142 ms - -

另外，express应用程序生成器提供了默认的应用程序启动命令，请见package.json中scripts定义：

{
  "name": "express-generator",
  "version": "0.0.0",
  "private": true,
 "scripts": { "start": "node ./bin/www" },  
  "dependencies": {
    "express": "~4.9.0",
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "debug": "~2.0.0",
    "jade": "~1.6.0"
  }
}

这意味着你可以直接使用npm start启动该应用程序，如下：

[root@~/wade/nodejs/express-generator]# DEBUG=express:* npm start
 
> express-generator@0.0.0 start /root/wade/nodejs/express-generator
> node ./bin/www

默认应用程序中包含两种路由策略/，/users，详情请见代码；

5. express应用程序目录结构分析：

[root@~/wade/nodejs/express-generator]# ll
total 48
drwxr-xr-x  8 root root 4096 Nov  9 16:57 .
drwxr-xr-x  4 root root 4096 Nov  9 16:30 ..
-rw-r--r--  1 root root 1478 Nov  9 16:31 app.js       // 统一应用程序入口
drwxr-xr-x  2 root root 4096 Nov  9 16:56 bin          // 应用程序启动脚本
drwxr-xr-x  8 root root 4096 Nov  9 16:59 .git
-rw-r--r--  1 root root   13 Nov  9 16:32 .gitignore
drwxr-xr-x 10 root root 4096 Nov  9 16:33 node_modules // npm install
-rw-r--r--  1 root root  333 Nov  9 16:31 package.json // node应用程序包配置
drwxr-xr-x  5 root root 4096 Nov  9 16:31 public       // 公共资源
-rw-r--r--  1 root root   36 Nov  9 16:31 README.md
drwxr-xr-x  2 root root 4096 Nov  9 16:58 routes       // 控制器模块C
drwxr-xr-x  2 root root 4096 Nov  9 16:31 views        // 视图模块V

由上可见，其实express应用程序也是典型的MVC应用程序，对于不熟悉MVC分层设计模式的同学请自行Google，在此就不一一展开讨论。

6. 推荐阅读：

• http://expressjs.com/starter/generator.html