前端静径

Express框架初识

发表于 |

express是高度包容、快速而极简的node Web框架。它可以帮助你快速搭建web应用。

安装

可以在制定的工程目录中安装express，例如，在app目录下：

1
$ npm install express --save

或者可以省略 –save选项，暂时不将express添加到依赖项目列表中

1
$ npm install express

采用 –save 选项安装的 Node 模块已添加到 package.json 文件中的 dependencies 列表。 今后运行 app 目录中的 npm install 将自动安装依赖项列表中的模块。

Express应用程序生成器

个人觉得没有必要安装express应用程序生生成器，因为自带的已经挺不错的了。况且复杂的项目用这个express生成器也往往是不够的。但是这里也还是要向大家介绍下：

1
$ sudo npm install express-generator -g

此后直接输入一下命令就可以快速生成一个简单的网站：

1
$ express myapp

其中myapp是你的应用程序项目名称。可以使用-h参数显示命令选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ express -h
  Usage: express [options] [dir]
  Options:
    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

Express结构解析

一个基本的express目录框架是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
├── app.js
├── bin
│   └── www
├── controller
│   ├── database.js
│   └── gj.js
├── node_modules
├── package.json
├── public
│   └── stylesheets
├── routes
│   ├── index.js
│   └── users.js
├── settings.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

结构解析

  1. bin目录下的www是入口文件，创建一个服务器，默认监听3000端口，并引入app.js，将它作为该服务器的回调函数。
  2. app.js是服务端处理请求的主体部分，包括了路由处理，设置静态文件目录，cookie等中间件的设置与错误的处理。
  3. routes文件夹下都是对应的路由文件。

app.js代码如下（包含了一些注解，如有错误欢迎指正）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// 设置视图结构，也可以用ejs模板，把jade改成ejs即可
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//下面是定义一些中间件
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); //设置静态文件存放路径
//路由中间件
app.use('/', index);
app.use('/users', users);
// 捕获404错误
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
// 错误处理函数
app.use(function(err, req, res, next) {
  // 设置环境，只在development环境才会打印错误信息
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // 渲染错误页面
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

我们项目自己的样式，js文件，和图片都放在public目录下的文件夹里。而html页的模板，则放在view目录下，客户端对服务器的请求通信，服务器根据请求渲染页面这件事，则是交给了route目录，

好了，本文就先大致介绍到这里，后续会继续介绍自己的一些理解，敬请期待。。。