Express框架快速入门

害恶细君

发布于 2022-11-22 14:19:06

5.1K0

发布于 2022-11-22 14:19:06

一. Express的简介和安装
1. Express简介
2. 在项目中安装Express
二. Express的使用
1. 入门简单案例
2. Express基本路由
3. 中间件的用法
4. 获取请求的参数
5. 利用 Express 托管静态文件
6. 在 Express 中使用模板引擎
7. Express 应用程序生成器

欢迎大家来到Node.js系列专栏的第二期，上一期我系统地总结了Node.js的基础知识和常用内置模块，但是仅仅学习那些内置模块还远远不够，那些只是基础，我们的路还非常的长，还有很多东西要学。今天总结的Express就是基于Node.js衍生而来的一个web应用开发框架，它可以帮助你快速地创建web应用。

一. Express的简介和安装

1. Express简介

官网对这个框架的解释是：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。Express的官网地址是https://www.expressjs.com.cn 。

Express的特色: (1) Web 应用程序：Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

(2) API ：使用您所选择的各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。

(3) 性能：Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。

(4) 基础框架：许多流行的开发框架都基于 Express 构建。

2. 在项目中安装Express

首先我们创建一个文件夹，然后我们先要初始化一下文件夹：

npm init -y

安装express：

npm install express --save

二. Express的使用

1. 入门简单案例

我们先简单使用一下Express，学习它的简单用法，由浅入深。本文后面小节里再来学习路由、中间件、请求处理等等的功能。

新建index.js文件，然后编写如下代码：

const express = require('express')

// 创建express实例
const app=express();

app.get("/",(req, res) => {
        res.send("hello world!");
})

app.get("/aaa",(req, res) => {
    res.send("aaa");
})

app.listen(3000,()=>{
    console.log("server start")
})

很简单吧，express创建http接口，相比Node.js的http模块来说也太方便了吧，只需要调用get()方法，然后里面传入请求的路径和回调函数就好了。而且回调里面也不用再调用res.write()和res.end()了，express封装了一个res.send()来代替。

这个小案例，我们浏览器访问相应的路径时，就会得到相应的显示：

而且，当我们访问一个我们没有定义的请求路径的时候，它会在页面上面显示出相应的错误。

我们上面说到express封装的res.send()方法，这个方法其实非常地妙，那么妙在哪里呢？下面举几个例子来体会。

我们更改一下代码，把之前请求的hello world!字符串改成html标签返回，看看会有什么效果：

const express = require('express')

// 创建express实例
const app=express();

app.get("/",(req, res) => {
        res.send(`
        <html>
          <h1>hello world!</h1>
        </html>
        `);
})

app.listen(3000,()=>{
    console.log("server start")
})

运行发现，它可以解析并返回html。

我们再改一下代码，看看它能不能返回json数据的接口：

const express = require('express')

// 创建express实例
const app=express();

app.get("/",(req, res) => {
        res.send({
            name:'害恶细君',
            age:20
        });
})


app.listen(3000,()=>{
    console.log("server start")
})

也就是说在send()方法中传入一个对象的话，返回给前端的就是一个json字符串。

而且，express最好的地方就是：它的回调里面的req (请求) 和 res (响应) 与 Node.js 提供的对象完全一致，因此，你可以调用 req.pipe()、req.on('data', callback) 以及任何 Node 提供的方法。

2. Express基本路由

路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。

路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下： app.METHOD(path, [callback...], callback) ， app 是 express 对象的一个实例， METHOD 是一个 HTTP 请求方法， path 是服务器上的路径， callback 是当路由匹配时要执行的函数。

路由路径和请求方法一起定义了请求的端点，它可以是字符串、字符串模式或者正则表达式。但查询字符串不是路由路径的一部分。

(1) 使用字符串的路由路径示例：

// 匹配根路径的请求
app.get('/', function (req, res) {
  res.send('root');
});

// 匹配 /about 路径的请求
app.get('/about', function (req, res) {
  res.send('about');
});

// 匹配 /test.text 路径的请求
app.get('/test.text', function (req, res) {
  res.send('test.text');
});

(2) 使用字符串模式的路由路径示例(下面第1个使用得最多)：

// 匹配 /ab/******
app.get('/ab/:id', function(req, res) {
  res.send('aaaaaaa');
});

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});

// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

(3) 使用正则表达式的路由路径示例：

// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {
  res.send('/a/');
});

// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
  res.send('/.*fly$/');
});

可以为请求处理提供多个回调函数，其行为类似中间件。唯一的区别是这些回调函数有可能调用 next(‘route’) 方法而略过其他路由回调函数。可以利用该机制为路由定义前提条件，如果在现有路径上继续执行没有意义，则可将控制权交给剩下的路径。

路由句柄有多种形式，可以是一个函数、一个函数数组，或者是两者混合，如下所示.

(1) 使用多个回调函数处理路由（记得指定 next 对象）：

const express = require('express')

app.get('/example/b', function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});

app.listen(3000,()=>{
    console.log("server start")
})

(2) 使用回调函数数组处理路由：

const express = require('express')

// 创建express实例
const app=express();

let cb0 = function (req, res, next) {
    console.log('CB0')
    next()
}

let cb1 = function (req, res, next) {
    console.log('CB1')
    next()
}

let cb2 = function (req, res) {
    res.send('Hello from C!')
}

app.get('/test', [cb0, cb1, cb2])



app.listen(3000,()=>{
    console.log("server start")
})

(3) 混合使用函数和函数数组处理路由：

const express = require('express')

// 创建express实例
const app=express();

let cb0 = function (req, res, next) {
    console.log('CB0')
    next()
}

let cb1 = function (req, res, next) {
    console.log('CB1')
    next()
}

app.get('/test', [cb0, cb1], function (req, res, next) {
    console.log('response will be sent by the next function ...')
    next()
}, function (req, res) {
    res.send('Hello from D!')
})


app.listen(3000,()=>{
    console.log("server start")
})

3. 中间件的用法

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。

中间件（Middleware）是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件。

中间件的功能包括：执行任何代码、修改请求和响应对象、终结请求-响应循环、调用堆栈中的下一个中间件。

如果当前中间件没有终结请求-响应循环，则必须调用 next() 方法将控制权交给下一个中间件，否则请求就会挂起。

Express 应用可使用如下几种中间件：（1）应用级中间件（2）路由级中间件（3）错误处理中间件（4）内置中间件（5）第三方中间件

(1) 应用级中间件 应用级中间件绑定到 app 对象使用 app.use() 和 app.METHOD()，其中， METHOD 是需要处理的 HTTP 请求的方法，例如 GET, PUT, POST 等等，全部小写。例如：

const express = require('express')

// 创建express实例
const app=express();

// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
})

// 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
    console.log('Request Type:', req.method)
    next()
})

// 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
    res.send('USER')
})

app.listen(3000,()=>{
    console.log("server start")
})

下面这个例子展示了在一个挂载点装载一组中间件。

const express = require('express')

// 创建express实例
const app=express();

// 一个中间件栈，对任何指向 /user/:id 的 HTTP 请求打印出相关信息
app.use('/user/:id', function(req, res, next) {
    console.log('Request URL:', req.originalUrl)
    next()
}, function (req, res, next) {
    console.log('Request Type:', req.method)
    next()
})

app.listen(3000,()=>{
    console.log("server start")
})

作为中间件系统的路由句柄，使得为路径定义多个路由成为可能。在下面的例子中，为指向 /user/:id 的 GET 请求定义了两个路由。第二个路由虽然不会带来任何问题，但却永远不会被调用，因为第一个路由已经终止了请求-响应循环。

const express = require('express')

// 创建express实例
const app=express();

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
    console.log('ID:', req.params.id)
    next()
}, function (req, res, next) {
    res.send('User Info')
})

// 处理 /user/:id， 打印出用户 id (因为第一个路由已经终止了请求-响应循环，故它不会被调用)
app.get('/user/:id', function (req, res, next) {
    res.end(req.params.id)
})

app.listen(3000,()=>{
    console.log("server start")
})

如果需要在中间件栈中跳过剩余中间件，调用 next(‘route’) 方法将控制权交给下一个路由。

const express = require('express')

// 创建express实例
const app=express();

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
    // 如果 user id 为 0, 跳到下一个路由
    if (req.params.id == 0) next('route')
    // 否则将控制权交给栈中下一个中间件
    else next() //
}, function (req, res, next) {
    res.send('aaa')
});

// 处理 /user/:id，
app.get('/user/:id', function (req, res, next) {
    res.send('bbb')
})

app.listen(3000,()=>{
    console.log("server start")
})

(2) 路由级中间件 路由级中间件和应用级中间件一样，只是它绑定的对象为 express.Router()，然后app.use('/', router)将路由挂载至应用

const router = express.Router()

没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件：

const express = require('express')

// 创建express实例
const app=express();

const router = express.Router();

// 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
})

// 将路由挂载至应用
app.use('/', router)

app.listen(3000,()=>{
    console.log("server start")
})

一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息：

const express = require('express')

// 创建express实例
const app=express();

const router = express.Router();

// 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
    console.log('Request URL:', req.originalUrl)
    next()
}, function (req, res, next) {
    console.log('Request Type:', req.method)
    next()
})

// 将路由挂载至应用
app.use('/', router)

app.listen(3000,()=>{
    console.log("server start")
})

路由级中间件也一样，如果需要在中间件栈中跳过剩余中间件，调用 next(‘route’) 方法将控制权交给下一个路由。

const express = require('express')

// 创建express实例
const app=express();

const router = express.Router();

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
    // 如果 user id 为 0, 跳到下一个路由
    if (req.params.id == 0) next('route')
    // 负责将控制权交给栈中下一个中间件
    else next() //
}, function (req, res, next) {
    // 渲染常规页面
    res.send('aaa')
})

// 处理 /user/:id， 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
    console.log(req.params.id)
    res.send('bbb')
})
// 将路由挂载至应用
app.use('/', router)

app.listen(3000,()=>{
    console.log("server start")
})

(3) 错误处理中间件

错误处理中间件有 4 个参数，定义错误处理中间件时必须使用这 4 个参数。即使不需要 next 对象，也必须在签名中声明它，否则中间件会被识别为一个常规中间件，不能处理错误。一般放在所有写的中间件的后面，当其他中间件有错误时会执行。

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

(4) 内置中间件 比如 express.static 这个 Express内置的中间件。它基于 serve-static，负责在 Express 应用中提托管静态资源。每个应用可有多个静态目录。参数 root 指提供静态资源的根目录，可选的 options 参数拥有如下属性：

属性	描述	类型	缺省值
dotfiles	是否对外输出文件名以点（.）开头的文件。可选值为 “allow”、“deny” 和 “ignore”	String	“ignore”
etag	是否启用 etag 生成	Boolean	true
extensions	设置文件扩展名备份选项	Array	[]
index	发送目录索引文件，设置为 false 禁用目录索引。	Mixed	“index.html”
lastModified	设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。	Boolean	true
maxAge	以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。	Number	0
redirect	当路径为目录时，重定向至 “/”。	Boolean	true
setHeaders	设置 HTTP 头以提供文件的函数。	Function

下面的例子使用了 express.static 中间件：

let options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now())
  }
}

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

每个应用可有多个静态目录，如:

app.use("/public",express.static('public'))
app.use("/uploads",express.static('uploads'))
app.use("/files",express.static('files'))

(5) 第三方中间件 通过使用第三方中间件从而为 Express 应用增加更多功能。

安装所需功能的 node 模块，并在应用中加载，可以在应用级加载，也可以在路由级加载。

下面的例子安装并加载了一个解析 cookie 的中间件： cookie-parser

npm install cookie-parser

const express = require('express')
const app = express()
const cookieParser = require('cookie-parser')

// 加载用于解析 cookie 的中间件
app.use(cookieParser())

4. 获取请求的参数

如果前端的请求传来了get请求参数，那怎么拿到呢？

我们可以通过res.query来拿到请求传来的参数：

app.get("/",(req, res) => {
    console.log(req.query);
    res.send("aaa")
})

当我前端传来参数时，如http://localhost:3000?username=haiexijun&password=123456 ，就能获取到。

如果是post请求的话，只要改成app.post()就好了，但要在里面配置一下相关中间件。当然，不仅仅是app.post()这种应用级中间件哈，router.get() 、router.post()等中间件也能这样获取。

const express = require('express')

// 创建express实例
const app=express();

const router = express.Router();

//配置解析post参数，不用下载第三方中间件，有一个内置的可以使用
app.use(express.urlencoded({extended:false}));

router.post("/",(req, res) => {
    console.log(req.body);
    res.send({message:"ok"})
})

app.listen(3000,()=>{
    console.log("server start")
})

5. 利用 Express 托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 static 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

app.use("/static",express.static('static'))
app.use("/image",express.static('image'))

现在，/image 和 /static 目录下面的文件就可以访问了。

访问localhost:3000/image/dog.gif：

6. 在 Express 中使用模板引擎

服务端渲染：

我们先安装ejs模板引擎：

npm install ejs

需要在应用中进行如下设置才能让 Express 渲染模板文件：

1.创建views文件夹 , 用于放模板文件的目录，比如： app.set(‘views’, ‘./views’) 2.配置view engine, 模板引擎，比如： app.set(‘view engine’, ‘ejs’) 3.views文件夹下面创建test.ejs模板文件，用res.render( )来渲染模板。

下面简单演示一下：编写test.ejs模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<h1>姓名：<%=name%></h1>
<h1>年龄：<%=age%></h1>
</body>
</html>

然后编写index.js：

const express = require('express')

// 创建express实例
const app=express();


app.set('views','./views')
app.set('view engine','ejs')

app.get("/test",(req, res) => {

    //渲染模板返回给前端,第一个参数传模板的名字，第二个参数传渲染的动态数据(这里模拟一下)
    res.render("test",{name:"害恶细君",age:20})

})


app.listen(3000,()=>{
    console.log("server start")
})

模板引擎的使用就体验到这里了，如果想体验更多模板的语法，请参考ejs的官方文档。

7. Express 应用程序生成器

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

安装生成器：

npm install -g express-generator

安装好后，就可以使用express命令来生成项目底座了。

express生成器默认使用jade模板引擎，jade对新手很不友好。如果我要创建一个基于ejs模板引擎的底座，可以在运行express命令时指定一些参数来创建。比如：

express myapp --view=ejs

然后会得到如下的项目结构：

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
	├── error.ejs
	└── index.ejs

然后我们在改项目的根目录下运行 npm i 安装一下依赖。