Express使用手记：核心入门

2021-11-23 00:17:45

入门简介

Express是基于nodejs的web开发框架。优点是易上手、高性能、扩展性强。

易上手：nodejs最初就是为了开发高性能web服务器而被设计出来的，然而相对底层的API会让不少新手望而却步。express对web开发相关的模块进行了适度的封装，屏蔽了大量复杂繁琐的技术细节，让开发者只需要专注于业务逻辑的开发，极大的降低了入门和学习的成本。
高性能：express仅在web应用相关的nodejs模块上进行了适度的封装和扩展，较大程度避免了过度封装导致的性能损耗。
扩展性强：基于中间件的开发模式，使得express应用的扩展、模块拆分非常简单，既灵活，扩展性又强。

环境准备

首先，需要安装nodejs，这一步请自行解决。接着，安装express的脚手架工具express-generator，这对于我们学习express很有帮助。

npm install -g express-generator

第一个demo

利用之前安装的脚手架工具，初始化我们的demo项目。

  /tmp mkdir express-demo
  /tmp cd express-demo 
  express-demo express

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=express-demo:* npm start

按照指引，安装依赖。并启动服务

npm install

然后，启动服务器。

  express-demo  npm start

> ex1@0.0.0 start /private/tmp/ex1
> node ./bin/www

访问浏览器，迈出成功的第一步。

目录结构介绍

看下demo应用的目录结构。大部分时候，我们的应用目录结构跟这个保持一致就可以了。也可以根据需要自行调整，express并没有对目录结构进行限制。

从目录结构可以大致看出，express应用的核心概念主要包括：路由、中间件、模板引擎。

  express-demo tree -L 1
.
├── app.js # 应用的主入口
├── bin  # 启动脚本
├── node_modules # 依赖的模块
├── package.json # node模块的配置文件
├── public # 静态资源，如css、js等存放的目录
├── routes # 路由规则存放的目录
└── views # 模板文件存放的目录

5 directories, 2 files

核心概念简介

上面提到，express主要包含三个核心概念：路由、中间件、模板引擎。

注意，笔者这里用的是核心概念这样的字眼，而不是核心模块，为什么呢？这是因为，虽然express的中间件有它的定义规范，但是express的内核源码中，其实是没有所谓的中间件这样的模块的。

言归正传，三者简要的来说就是。

中间件：可以毫不夸张的说，在express应用中，一切皆中间件。各种应用逻辑，如cookie解析、会话处理、日志记录、权限校验等，都是通过中间件来完成的。
路由：地球人都知道，负责寻址的。比如用户发送了个http请求，该定位到哪个资源，就是路由说了算。
模板引擎：负责视图动态渲染。下面会介绍相关配置，以及如何开发自己的模板引擎。

核心概念：路由

路由分类

粗略来说，express主要支持四种类型的路由，下面会分别举例进行说明

字符串类型
字符串模式类型
正则表达式类型
参数类型

分别举例如下，细节可参考官方文档。

var express = require('express');
var app = express();

// 路由：字符串类型
app.get('/book', function(req, res, next){
    res.send('book');
});

// 路由：字符串模式
app.get('/user/*man', function(req, res, next){
    res.send('user');  // 比如： /user/man, /user/woman
});

// 路由：正则表达式
app.get(/animals?$/, function(req, res, next){
    res.send('animal');  // 比如： /animal, /animals
});

// 路由：命名参数
app.get('/employee/:uid/:age', function(req, res, next){
    res.json(req.params);  // 比如：/111/30，返回 {"uid": 111, "age": 30}
});

app.listen(3000);

路由拆分

当你用的应用越来越复杂，不可避免的，路由规则也会越来越复杂。这个时候，对路由进行拆分是个不错的选择。

我们分别看下两段代码，路由拆分的好处就直观的体现出来了。

路由拆分前

var express = require('express');
var app = express();

app.get('/user/list', function(req, res, next){
    res.send('/list');
});

app.get('/user/detail', function(req, res, next){
    res.send('/detail');
});

app.listen(3000);

这样的代码会带来什么问题呢？无论是新增还是修改路由，都要带着/user前缀，这对于代码的可维护性来说是大忌。这对小应用来说问题不大，但应用复杂度一上来就会是个噩梦。

路由拆分后

可以看到，通过express.Router()进行了路由拆分，新增、修改路由都变得极为便利。

var express = require('express');
var app = express();

var user = express.Router();

user.get('/list', function(req, res, next){
    res.send('/list');
});

user.get('/detail', function(req, res, next){
    res.send('/detail');
});

app.use('/user', user); // mini app，通常做应用拆分

app.listen(3000);

核心概念：中间件

一般学习js的时候，我们都会听到一句话：一切皆对象。而在学习express的过程中，很深的一个感受就是：一切皆中间件。比如常见的请求参数解析、cookie解析、gzip等，都可以通过中间件来完成。

工作机制

贴上官网的一张图镇楼，图中所示就是传说中的中间件了。

首先，我们自己编写一个极简的中间件。虽然没什么实用价值，但中间件就长这样子。

参数：三个参数，熟悉http.createServer()的同学应该比较眼熟，其实就是req（客户端请求实例）、res（服务端返回实例），只不过进行了扩展，添加了一些使用方法。
next：回调方法，当next()被调用时，就进入下一个中间件。

function logger(req, res, next){
    console.log('here comes request');
    next();
}

来看下实际例子：

var express = require('express');
var app = express();

app.use(function(req, res, next) {
    console.log('1');
    next();
});

app.use(function(req, res, next) {
    console.log('2');
    next();
});

app.use(function(req, res, next) {
    console.log('3');
    res.send('hello');
});

app.listen(3000);

请求 http://127.0.0.1:3000，看下控制台输出，以及浏览器返回内容。

  middleware git:(master)  node chains.js 
1
2
3

应用级中间件 vs 路由级中间件

根据作用范围，中间件分为两大类：

应用级中间件
路由级中间件。

两者的区别不容易说清楚，因为从本质来讲，两类中间件是完全等同的，只是使用场景不同。同一个中间件，既可以是应用级中间件、也可以是路由级中间件。

直接上代码可能更直观。参考下面代码，可以简单粗暴的认为：

应用级中间件：app.use()、app.METHODS()接口中使用的中间件。
路由级中间件：router.use()、router.METHODS()接口中使用的中间件。

var express = require('express');
var app = express();
var user = express.Router();

// 应用级
app.use(function(req, res, next){
    console.log('收到请求，地址为：' + req.url);
    next();
});

// 应用级
app.get('/profile', function(req, res, next){
    res.send('profile');
});

// 路由级
user.use('/list', function(req, res, next){
    res.send('/user/list');
});

// 路由级
user.get('/detail', function(req, res, next){
    res.send('/user/detail');
});

app.use('/user', user);

app.listen(3000);

开发中间件

上面也提到了，中间件的开发是是分分钟的事情，不赘述。

function logger(req, res, next){
    doSomeBusinessLogic(); // 业务逻辑处理，比如权限校验、数据库操作、设置cookie等
    next();  // 如果需要进入下一个中间件进行处理，则调用next();
}

常用中间件

包括但不限于如下。更多常用中间件，可以点击这里

body-parser
compression
serve-static
session
cookie-parser
morgan

核心概念：模板引擎

模板引擎大家不陌生了，关于express模板引擎的介绍可以参考官方文档。

下面主要讲下使用配置、选型等方面的内容。

可选的模版引擎

包括但不限于如下模板引擎

jade
ejs
dust.js
dot
mustache
handlerbar
nunjunks

配置说明

先看代码。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

有两个关于模版引擎的配置：

views：模版文件放在哪里，默认是在项目根目录下。举个例子：app.set('views', './views')
view engine：使用什么模版引擎，举例：app.set('view engine', 'jade')

可以看到，默认是用jade做模版的。如果不想用jade怎么办呢？下面会提供一些模板引擎选择的思路。

选择标准

需要考虑两点：实际业务需求、个人偏好。

首先考虑业务需求，需要支持以下几点特性。

支持模版继承(extend)
支持模版扩展(block)
支持模版组合(include)
支持预编译

对比了下，jade、nunjunks都满足要求。个人更习惯nunjunks的风格，于是敲定。那么，怎么样使用呢？

支持nunjucks

首先，安装依赖

npm install --save nunjucks

然后，添加如下配置

var nunjucks = require('nunjucks');

nunjucks.configure('views', {
    autoescape: true,
    express: app
});

app.set('view engine', 'html');

看下views/layout.html

<!DOCTYPE html>
<html>
<head>
    <title>
        {% block title %}
            layout title
        {% endblock %}
    </title>
</head>
<body>
<h1>
    {% block appTitle %}
        layout app title
    {% endblock %}
</h1>
<p>正文</p>

</body>
</html>

看下views/index.html

{% extends "layout.html" %}
{% block title %}首页{% endblock %}
{% block appTitle %}首页{% endblock %}

开发模板引擎

通过app.engine(engineExt, engineFunc)来注册模板引擎。其中

engineExt：模板文件后缀名。比如jade。
engineFunc：模板引擎核心逻辑的定义，一个带三个参数的函数（如下）

// filepath: 模板文件的路径
// options：渲染模板所用的参数
// callback：渲染完成回调
app.engine(engineExt, function(filepath, options, callback){

    // 参数一：渲染过程的错误，如成功，则为null
    // 参数二：渲染出来的字符串
    return callback(null, 'Hello World');
});

比如下面例子，注册模板引擎 + 修改配置一起，于是就可以愉快的使用后缀为tmpl的模板引擎了。

app.engine('tmpl', function(filepath, options, callback){

    // 参数一：渲染过程的错误，如成功，则为null
    // 参数二：渲染出来的字符串
    return callback(null, 'Hello World');
});
app.set('views', './views');
app.set('view engine', 'tmpl');

码农公寓

Express使用手记：核心入门

入门简介

环境准备

第一个demo

目录结构介绍

核心概念简介

核心概念：路由

路由分类

路由拆分

核心概念：中间件

工作机制

应用级中间件 vs 路由级中间件

开发中间件

常用中间件

核心概念：模板引擎

可选的模版引擎

配置说明

选择标准

支持nunjucks

开发模板引擎

相关链接

更多内容

相关链接

码农公寓

入门简介

环境准备

第一个demo

目录结构介绍

核心概念简介

核心概念：路由

路由分类

路由拆分

核心概念：中间件

工作机制

应用级中间件 vs 路由级中间件

开发中间件

常用中间件

核心概念：模板引擎

可选的模版引擎

配置说明

选择标准

支持nunjucks

开发模板引擎

相关链接

更多内容

相关链接

相关文章