1、安装

Express 是一个 基于 Node.js 的简洁灵活的 Web 应用框架,为 Web 应用程序提供一组强大的功能

在阅读这篇文章之前,请确保您已经安装了 Node.js,并对其有一些基本的理解

如果需要了解 Node.js 的内容,可以参考我的另一篇文章 —— 一篇入门Node.js

下面介绍 安装 Express 框架 的步骤,这里介绍的是基于 Node.js 本地安装的方法:

Node.js 本地安装是指在当前文件夹中安装所需模块(Express),而不影响全局配置

可以使用 npm install express --save 命令安装 Express 到根目录中的 node_modules 目录下

2、Hello World

首先创建一个文件夹,该文件夹将作为 Web 项目的根目录

然后在该文件夹中打开命令行,使用 npm init 命令为该文件夹生成一个 package.json 文件

package.json 文件是项目的配置文件,里面列出了有关项目的相关信息

接着使用 npm install express --save 安装到根目录中的 node_modules 目录下

最后在根目录下创建 server.js 文件,并在文件中编写如下代码:

// 引入 Express 模块
var express = require('express');
// 创建 Express 实例
var app = express();
// 设置路由
app.get('/', function (req, res) {
    res.send('Hello World');
})
// 启动服务器,监听端口 5000
var server = app.listen(5000);

上面是一个简单的应用程序,现在暂时还不需要理解其中的语法,等下将会逐一进行讲解

此时,打开命令行,使用 node server.js 运行程序

打开 http://127.0.0.1:5000/ 即可看到 Hello World 的问候语

3、基础路由设置

路由确定 应用程序如何响应特定端点的客户端请求

每个路由都可以有一个或多个处理函数,这些函数在路由匹配时执行,其语法格式如下:

app.METHOD(PATH, HANDLER)
  • METHOD:HTTP 请求方法
  • PATH:文件路径
  • HANDLER:路由匹配时执行的功能

以下面代码为例,当客户端以 GET 方法请求根路径资源时,执行匿名函数,发送 Hello World 响应

app.get('/', function (req, res) {
    res.send('Hello World');
})

(1)METHOD

METHOD 定义 HTTP 请求方法,Express 支持所有 HTTP 请求方法

例如,app.get(PATH, HANDLER) 用于为 PATH 路径上的 GET 请求方法添加处理函数 HANDLER

特殊的,app.all(PATH, HANDLER) 用于为 PATH 路径上的所有请求方法添加处理函数 HANDLER

(2)PATH

PATH 定义路径,它可以是字符串、字符串模式或正则表达式,下面将以例子进行说明

以下是基于 字符串 匹配的例子:

'/about' 匹配请求路径 /about

以下是基于 字符串模式 匹配的例子:

'/ab?cd' 匹配请求路径 /acd、/abcd(?:匹配 ? 前的字符 0 次或 1次)

'/ab+cd' 匹配请求路径 /abcd,/abbcd 等等(+:匹配 + 前的字符 1 次或多次)

'/ab*cd' 匹配请求路径 /abcd,/abRANDOMcd 等等(*:匹配任意字符串)

以下是基于 正则表达式 匹配的例子(在 / / 中写正则表达式):

/a/ 匹配任意包含字符 a 的请求路径

/.*fly$/ 匹配任意以 fly 结尾的请求路径

另外,我们还可以 在路径中指定参数

参数以 : 作为前缀,用于在 URL 中捕获指定位置的值,并将其保存在 req.params 中

例如,路由路径为:'/users/:userId/books/:bookId'

请求 URL 为:http://127.0.0.1:5000/users/34/books/8989

因此,得到的 req.params 为:{ "userId": "34", "bookId": "8989" }

(3)HANDLER

HANDLER 定义处理请求的方法,它可以是函数、函数数组或两者的组合形式

在使用多组函数时,必须确保使用 next() 方法将控制权传递给后续函数,否则将会直接终止

var express = require('express');
var app = express();
app.get('/', function (req, res) {
    res.send('Hello World');
})
var cb0 = function (req, res, next) {
    console.log('CB0')
    next()
}
var cb1 = function (req, res, next) {
    console.log('CB1')
    next()
}
var cb2 = function (req, res) {
    console.log('CB2')
}
app.get('/test', [cb0, cb1, cb2])
var server = app.listen(5000);

一般情况下,函数带有两个参数,分别是 RequestResponse 对象,用于处理请求和响应数据

Request 对象 常见的属性和方法有:

  • app:对 Express 应用程序实例的引用

  • ip:IP 地址
  • originalUrl:原始 URL
  • baseURL:基础 URL
  • protocol:协议类型
  • hostname:主机名
  • subdomains:子域名
  • path:资源路径
  • query:查询字符串
  • body:请求主体
  • route:当前匹配的路由
  • params:路由参数
  • cookies:当使用 cookie-parser 中间件时,包含 Cookie 对象
  • signedCookies:当使用 cookie-parser 中间件时,包含已签名的 Cookie 对象
  • get(field):获取指定的 HTTP 头

详细情况请参考:http://www.expressjs.com.cn/4x/api.html#req

Response 对象 常见的属性和方法有:

  • app:对 Express 应用程序实例的引用

  • set(field[,value]):设置 HTTP 头
  • get(field):返回 HTTP 头
  • append(field[,value]):添加 HTTP 头
  • status():设置状态码
  • redirect([status,]path):重定向
  • cookie(name,value[,option]):设置 Cookie
  • clearCookie(name[,options]):清除 Cookie
  • send([body]):传送响应
  • sendStatus(code):传送状态吗
  • sendFile(path[,options][,fn]):传送文件
  • json([body]):传送 JSON
  • end([data][,encoding]):结束响应

详细情况请参考:http://www.expressjs.com.cn/4x/api.html#res

var express = require('express');
var app = express();
app.get('/', function (req, res) {
    res.send('Hello World');
})
app.get('/:user', function (req, res) {
    res.send('Hello ' + req.params['user']);
})
var server = app.listen(5000);

4、高级路由设置

(1)app.route()

如果需要为同一路径的不同请求方法定义不同的处理函数,app.route(path) 是一个不错的选择

app.route('/book')
    .get(function (req, res) {
        res.send('Get a book')
    })
    .post(function (req, res) {
        res.send('Add a book')
    })
    .put(function (req, res) {
        res.send('Update the book')
    })

(2)express.Router()

express.Router([options]) 可以用于创建路由器的实例,它又被称为 “迷你应用程序”,因为它就像 app 实例一样,可以为它添加中间件和路由,常用的方法如下:

  • METHOD(path[,callback ...]):与 app.METHOD(path,callback[,callback ...]) 类似
  • all(path,[callback ...]):与 app.all(path,callback[.callback ...]) 类似
  • route(path):与 app.route(path) 类似

详细情况请参考:http://www.expressjs.com.cn/4x/api.html#router

可以创建一个路由文件 router.js,并在文件中编写如下代码:

var express = require('express')
var router = express.Router()

// 添加中间件
router.use(function timeLog (req, res, next) {
    console.log('Time: ', Date.now())
    next()
})
// 添加路由
router.get('/', function (req, res) {
    res.send('Home page')
})
// 添加路由
router.get('/about', function (req, res) {
    res.send('About page')
})

module.exports = router

然后,我们可以在应用程序 server.js 中加载路由文件:

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

// ...

app.use('/router', router)

5、静态文件

Express 的内置中间件函数 express.static() 可以 提供 图片、CSS 和 JS 之类的静态文件

其语法格式如下:

express.static(root, [options])
  • root:储存静态文件的根目录路径
  • options:对象,用于提供更详细的信息

例如,我们创建一个简单的文件结构如下:

app(应用程序根目录)
    +-- node_module   (储存模块的文件夹)
    +-- public        (储存资源的文件夹)
        +-- images
            +-- icon.png
            +-- background.png
        +-- hello.html
        +-- style.css
        +-- script.js
    +-- package.json  (用于配置的文件)
    +-- server.js     (主程序文件)

我们可以在 server.js 中声明 public 目录下内容开放访问,即客户端可以通过地址进行请求

例如 http://127.0.0.1:5000/images/icon.pnghttp://127.0.0.1:5000/hello.html

app.use(express.static('public'))

如果需要为提供的文件创建虚拟路径前缀,可以在 app.use() 方法的参数中进行指定

例如 http://127.0.0.1:5000/static/images/icon.pnghttp://127.0.0.1:5000/static/hello.html

app.use('/static',express.static('public'))

6、中间件

中间件 (Middleware) 实际上是一个 函数,可以访问请求对象 (req),响应对象 (res) 以及 next 函数

(1)应用程序级中间件

可以使用 app.METHOD()app.use() 方法将应用程序级中间件绑定到 express() 实例

var express = require('express');
var app = express();
app.use(function (req, res, next) {
    // 由于没有指定路径,所以每个请求都会执行该中间件函数的功能
    console.log('Time:', Date.now()) // 中间件函数功能
    next() // 将控制权传递给下一个路由,否则会终止请求-响应周期
})
app.get('/user/:id', function (req, res, next) {
    res.send('USER') // 中间件函数功能
})
var server = app.listen(5000);

注意:中间件加载的顺序很重要,首先加载的中间件函数会先执行

(2)路由器级中间件

路由器级中间件的工作方式与应用程序级中间件的工作方式相同

区别在于路由器级中间件通过 router.METHOD()router.use() 方法绑定到 Router() 实例

var express = require('express');
var app = express();
var router = express.Router();
router.use(function (req, res, next) {
    // 由于没有指定路径,所以每个请求都会执行该中间件函数的功能
    console.log('Time:', Date.now()) // 中间件函数功能
    next() // 将控制权传递给下一个路由,否则会终止请求-响应周期
})
router.get('/user', function (req, res) {
    res.send('USER') // 中间件函数功能
})
app.use('/virtual', router)
var server = app.listen(5000);

(3)错误处理中间件

与其它中间件函数的定义方式相同

区别在于错误处理中间件的参数总是有四个,对应是 function(err, req, res, next)

app.use(function (err, req, res, next) {
    console.error(err.stack)
    res.status(500).send('Error!')
})

(4)内置中间件

除了上面介绍的 express.static() 内置中间件函数外,还有两个比较常用的内置中间件函数:

  • express.json():使用 JSON 帮助解析传入的请求
  • express.urlencoded():使用 RUL 编码帮助解析传入的请求

(5)第三方中间件

第三方中间件可以为 Express 应用程序添加功能,常用的第三方中间件可以参考下面的链接:

7、生成器

最后要介绍的一个内容就是 Express 生成器 express-generator,用于快速创建应用骨架

它包含 express 命令行工具,可以使用 npm install express-generator -g 命令安装

然后,我们就可以通过一个简单的命令创建一个应用的骨架

express --view=pug myapp
    create : myapp\
    create : myapp\public\
    create : myapp\public\javascripts\
    create : myapp\public\images\
    create : myapp\public\stylesheets\
    create : myapp\public\stylesheets\style.css
    create : myapp\routes\
    create : myapp\routes\index.js
    create : myapp\routes\users.js
    create : myapp\views\
    create : myapp\views\error.pug
    create : myapp\views\index.pug
    create : myapp\views\layout.pug
    create : myapp\app.js
    create : myapp\package.json
    create : myapp\bin\
    create : myapp\bin\www

    change directory:
      > cd myapp

    install dependencies:
      > npm install

    run the app:
      > SET DEBUG=myapp:* & npm start

最新文章

  1. jQuery原生框架-----------------核心框架
  2. EF文章连接
  3. 单机搭建Android开发环境(四)
  4. IIS-Server is too busy _解决方法
  5. OpenGL(二)——函数库简述
  6. Zabbix3.0 自动电话报障
  7. Mybatis choose (when, otherwise)标签
  8. C++ macro(宏)使用小结
  9. 【LeetCode OJ】Linked List Cycle II
  10. linux下删除所有.svn目录
  11. eclipse如何导入PHP的项目
  12. 批处理就是windows的杰作啊
  13. 使用Qt设计师文件的3种方式
  14. Day1 老男孩python自动化运维课程学习笔记
  15. 20175305张天钰《java程序设计》第五周学习总结
  16. OO博客作业1:第1-3周作业总结
  17. Python3.6 性能测试框架Locust的搭建与使用
  18. 解决 Command "python setup.py egg_info" failed with error code 1 问题
  19. [SCOI2005]栅栏
  20. windows下python2和python3同时安装ipython

热门文章

  1. flask核心对象Flask实例初探
  2. gitlab邮箱验证 邮箱提醒设置
  3. UVaLive 6833 Miscalculation (表达式计算)
  4. CSS3 核心知识面试题
  5. 【原创】Eclipse实现图形化界面插件-vs4e
  6. 二分图最大匹配(匈牙利算法) UVA 670 The dog task
  7. UE编辑器编译和运行java设置
  8. 299 Bulls and Cows 猜数字游戏
  9. shell set理解
  10. 聊聊MyBatis缓存机制