一、Express框架简介及体验
1.1 Express框架简介
Express是一个基于Node.js平台的应用程序开发框架，它提供了一系列强大的特性，帮助你创建各种Web和移动应用程序。我们可以使用 npm install express 命令进行安装。
1.2 Express框架特性
- 提供了方便简洁的路由定义方式
- 对获取HTTP请求参数进行了简化处理
- 对模板引擎支持程度高，方便渲染动态HTML页面
- 提供了中间件机制有效控制HTTP请求
- 拥有大量第三方中间件对功能进行扩展
1.3 原生Node.js与Express框架对比之路由
Node.js 详细可以看 【请求响应原理及HTTP协议】 的 【二、创建Web服务器】部分
// Node.js
const http = require("http");
// 用于处理 url 地址
const url = require('url');
// app 就是网站服务器对象
const app = http.createServer();
app.on('request', (req, res) => {
// 获取客户端的请求路径
let { pathname } = url.parse(req.url);
// 对请求路径进行判断 不同的路径地址响应不同的内容
if (pathname == '/' || pathname == 'index') {
res.end('欢迎来到首页');
} else if (pathname == '/list') {
res.end('欢迎来到列表页面');
} else if (pathname == '/about') {
res.end('欢迎来到关于我们页面')
} else {
res.end('抱歉, 您访问的页面出游了');
}
});
app.listen(3000); // 监听端口
// Express
const express = require('express')
const app = express()
// 当客户端以 get 方式访问时
app.get('/', (req, res) => {
// 对客户端做出响应
res.send('Hello Express');
});
// 当客户端以 post 方式访问/add路由时
app.post('/add', (req, res) => {
res.send('使用post方式请求了/add路由');
});
app.listen(3001); // 监听端口
1.4 原生Node.js与Express框架对比之获取请求参数
// Node.js
app.on('request', (req, res) => {
// 获取 GET 参数
let {query} = url.parse(req.url, true);
// 获取 POST 参数
let postData = '';
req.on('data', (chunk) => {
postData += chunk;
});
req.on('end', () => {
console.log(querystring.parse(postData)
}));
});
// Express
app.get('/', (req, res) => {
// 获取GET参数
console.log(req.query);
});
app.post('/', (req, res) => {
// 获取POST参数
console.log(req.body);
})
1.5 Express 体验
使用Express框架创建web服务器及其简单，调用express模块返回的函数即可。对请求作出响应不再用end方法，而是功能多得多的 send 方法：
- send方法内部会检测响应内容的类型
- 会自动设置http状态码
- 会帮我们自动设置响应的内容类型及编码
- 参数除了传字符串还可以是JSON对象，甚至 Buffer 对象, 布尔值、数组。
// 引入Express框架
const express = require('express');
// 使用框架创建web服务器
const app = express();
// 当客户端以get方式访问/路由时
app.get('/', (req, res) => {
// 对客户端做出响应 send方法会根据内容的类型自动设置请求头
res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}
});
// 程序监听3000端口
app.listen(3000);
二、中间件
中间件就是一堆方法，可以接收客户端发来的请求(req)、可以对请求做出响应(res)，也可以将请求继续交给下一个中间件继续处理。
中间件主要由两部分构成，中间件方法以及请求处理函数。
中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。
app.get('请求路径', '处理函数') // 接收并处理 get 请求 查询功能
app.post('请求路径', '处理函数') // 接收并处理 post 请求 添加功能
app.put('请求路径', '处理函数') // 接收并处理 put 请求 修改功能
app.delete('请求路径', '处理函数') // 接收并处理 delete 请求 删除功能
可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。
默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。
如果需要下面的中间件也能匹配并执行，可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。
app.get('/request', (req, res, next) => {
req.name = "张三";
next();
});
app.get('/request', (req, res) => {
res.send(req.name);
});
2.1 app.use 中间件用法
app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。注意需要放在所有中间件的最上面。
app.use((req, res, next) => {
console.log(req.url);
next();
});
app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求。
app.use('/admin', (req, res, next) => {
console.log(req.url);
next();
});
2.2 中间件应用
- 路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。
- 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
- 自定义404页面
//需要处理没有匹配到的路由，因此要放在所有中间件的最下面
//status方法设置状态吗
app.use((req, res, next) => {
// 为客户端响应404状态码以及提示信息
res.status(404).send('当前访问的页面是不存在的')
})
2.3 错误处理中间件
在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。
错误处理中间件是一个集中处理错误的地方。
app.use((err, req, res, next) => {
res.status(500).send('服务器发生未知错误');
})
当程序出现错误时，调用next()方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件。
app.get("/", (req, res, next) => {
fs.readFile("/file-does-not-exist", (err, data) => {
if (err) {
// next(); next方法没有传递参数，即表示把控制权交给下一个中间件
next(err); // 传了则表示要去处理错误中间件
}
});
});
2.4 捕获错误
在node.js中，异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获。
异步函数执行如果发生错误要如何捕获错误呢？
try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能其他类型的API发生的错误。
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);
app.get("/", async (req, res, next) => {
try {
await User.find({name: '张三'})
// await readFile('./aaa.js')
} catch(err) {
next(err);
}
});
2.5 cookie-parser 中间件 (第三方)
用来实现 cookie 的解析。为了方便操作客户端中的cookie值。相当于服务端将信息存在 cookie 里面，那么客户端可以通过 cookie 获取值。cookie 一般用来记录用户的登录信息。
第三方中间件都是需要先安装的：npm install cookie-parser
// app.js
const cookieParser = require('cookie-parser')
app.use(cookieParser());
2.6 express-session 中间件 (第三方)
客户端可通过 cookie 来获取值，而服务端是通过 session。
session是服务器记录用户状态信息的技术，当客户端首次请求服务器时，服务器会为该客户端创建一个唯一的对象，称之为 session 对象。即是用 session 存储 cookie 的过程。
const session = require('express-session')
// 配置 session
app.use(
session({
secret: 'secret key',
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 24 * 60 * 60 * 1000,
},
store: MongoStore.create({
mongoUrl: `mongodb://${config.get('db.user')}:${config.get(
'db.pwd'
)}@${config.get('db.host')}:${config.get('db.port')}/${config.get(
'db.name'
)}`,
}),
})
)
三、Express请求处理
3.1 通过 express.Router 路由中间件构建模块化路由
一个通过express.Router()创建的 Router 实例是一个完整的中间件和路由系统，我们可以定义一些路由器模块，并将它们挂载到主应用程序的路径上。
app.use('/home', home);
解析：当客户端访问/home这个路径时，用 home 这个路由 (对象) 进行处理
// app.js
const express = require('express')
// 引入创建的路由对象
const home = require('./route/home')
const admin = require('./route/admin')
// 将路由和请求路径进行匹配，创建一级路由
// 第一个参数是请求路径，第二个是路由对象
app.use('/home', home);
app.use('/admin', admin);
// /route/home.js
// 创建路由对象
const home = express.Router();
// 二级路由
home.get('/index', () => {
// 客户端访问/home/index，请求在这里处理
res.send('欢迎来到博客展示页面');
});
module.exports = home;
// /route/admin.js
const admin = express.Router();
admin.get('/index', () => {
res.send('欢迎来到博客管理页面');
});
module.exports = admin;
访问/home/index，页面输出 ‘欢迎来到博客展示页面’
访问/admin/index，页面输出 ‘欢迎来到博客管理页面’
3.2 GET 参数的获取
Express框架中使用req.query即可获取 get 参数，框架内部会将 get 参数转换为对象并返回。
例如: http://localhost:3000/?name=zhangsan&age=30
// 接收地址栏中问号后面的查询参数
app.get('/', (req, res) => {
console.log(req.query); // {"name": "zhangsan", "age": "30"}
});
3.3 POST 参数的获取
Express中接收 post 请求参数需要借助第三方包 body-parser。
Express 的内置中间件 express.json 和 express.urlencoded 可以帮助我们解析 post 请求发送的数据，它们都是基于 body-parser 的。
- express.json：用于解析带有 JSON payloads (请求体数据为 json 格式) 的请求。payload(有效载荷) 就是对接收者有用的数据。
- express.urlencoded： 用于解析带有 url-encoded payloads (即请求体数据为 URL 编码格式) 的请求。
使用方法如下：
// 引入 body-parser 模块
// const bodyParser = require('body-parser');
// 配置 body-parser 模块
// app.use(bodyParser.urlencoded({ extended: false }));
// parse 请求头 Content-Type: application/json
app.use(express.json())
// parse 请求头 Content-Type: application/x-www-form-urlencoded
app.use(express.urlencoded({
extended: false // 使用 querystring 库 来解析
}))
// 接收请求
app.post('/add', (req, res) => {
// 接收请求参数
console.log(req.body);
})
注意：extended的值为false时，会在方法的内部使用nodejs的queryString系统模块对参数格式进行处理；如果是true会使用一个叫qs的第三方模块（也能处理成对象类型，但功能更为强大）对请求参数进行处理。但目前queryString完全够用，因此设置为false即可，也是官方推荐配置。
使用 multer 中间件 (第三方) 实现文件上传
只会处理 multipart/form-data 类型的表单数据，如果需要手动指定，请设置enctype="multipart/form-data"
const express = require('express')
const multer = require('multer')
const app = express()
// 上传目录
const uploadUrl = multer({
dest: 'public/uploads/',
});
// 单个上传，avatar 是上传文件的字段名 (fieldname)
app.post('/single/upload', uploadUrl.single('avatar'), function (req, res, next) {
// req.file 是 `avatar` 文件的信息
// req.body 将具有文本域数据，如果存在的话)
const file = req.file
const fileExtArray = file.originalname.split(".");
const ext = fileExtArray[fileExtArray.length - 1];
const targetPath = file.path + "." + ext;
const targetName = file.originalname.length > 20 ? file.originalname.substring(0,20) + '...' : file.originalname;
fs.rename(path.join(process.cwd(), "/" + file.path), path.join(process.cwd(), targetPath), function (err) {
if (err) {
// 对于从路由处理程序和中间件调用的异步函数返回的错误，
// 必须将它们传递给next()函数，在这Express会捕获并处理它们。例如：
// next(err)
return res.status(400).json({
code: 400,
message: "上传文件失败" + err.message
});
}
res.status(200).json({
"code": 200,
"data": {
"name": targetName,
"path": '/' + targetPath,
"url": "http://102.33.168.206:1016/" + targetPath // 拼上服务器地址
},
message: '上传成功'
})
})
})
// 批量上传，photos 是上传文件数组的字段名 (fieldname)，10 为可选参数 maxCount，用来限制上传的最大数量
app.post('/upload', uploadUrl.array('photos', 10), function (req, res, next) {
// req.files 是 `photos` 文件数组的信息
// req.body 将具有文本域数据，如果存在的话
const files = req.files;
let fileInfos = [];
for (var i in files) {
const file = files[i];
let fileInfo = {};
const fileExtArray = file.originalname.split(".");
const ext = fileExtArray[fileExtArray.length - 1];
const targetPath = file.path + "." + ext;
// fs.renameSync('./upload/' + file.filename, './upload/' + file.originalname); // 这里修改文件名。
fs.renameSync(path.join(process.cwd(), "/" + file.path), path.join(process.cwd(), targetPath))
// 获取文件基本信息
fileInfo.mimetype = file.mimetype;
fileInfo.name = file.originalname.length > 20 ? file.originalname.substring(0,20) + '...' : file.originalname
// fileInfo.size = file.size;
fileInfo.path = '/' + targetPath;
fileInfo.url = "http://102.33.168.206:1016/" + targetPath
fileInfos.push(fileInfo);
}
// 设置响应类型及编码
res.set({ 'content-type': 'application/json; charset=utf-8'});
res.status(200).json({
code: 200,
data: fileInfos,
message: '上传成功'
});
})
3.4 路由参数的获取
app.get('/find/:id', (req, res) => {
console.log(req.params); // {id: 123}
});
:id 不是实际参数，是一个占位符，表示请求当前路由需要传一个id作为参数。而请求参数不再写在?后面，而是直接写在/后面。
localhost:3000/find/123
3.5 静态资源的处理
通过 Express 的内置中间件 express.static 可以方便地托管静态文件，例如img、CSS、JavaScript 文件等。
// 托管静态文件，static会自动判断发来的请求是否是静态资源请求，如果是直接将静态资源响应给客户端。
app.use(express.static(path.join(__dirname, 'public')));
static会自动判断发来的请求是否是静态资源请求，如果是直接将静态资源响应给客户端。如果不是会调用next方法，把控制权交给下一个中间件。现在，public 目录下面的文件就可以访问了。
- http://localhost:3000/images/kitten.jpg
- http://localhost:3000/css/style.css
- http://localhost:3000/js/app.js
- http://localhost:3000/images/bg.png
- http://localhost:3000/hello.html
app.use('/static',express.static(path.join(__dirname, 'public')));
我们可以在第一个参数设置一个虚拟路径，我们就可以通过虚拟路径访问静态资源。
模版文件（***.art）中外链静态资源（如css、js）的相对路径（如
css/base.css或../css/base.css）是相对于客户端请求路径的（不是相对于当前文件）。因为静态资源是由浏览器来解析的。
请求路径可能会变因此不安全，因此外链时我们需要使用静态资源的绝对路径，如/admin/css/login.css。
另外模版的路径是由模版引擎来解析的，因此可以使用相对路径（相对的就是当前文件）
四、在 Express 中使用模板引擎
与Express一起使用的一些流行模板引擎是Pug、 Mustache和EJS，Express 应用程序生成器 express-generator 默认使用 Jade。
ps：模版引擎这个东西，在实际业务中可能不太直接使用，但主流前端框架，如 vue 的 template 部分，react 的 jsx 等等，大多都内置采用了模板引擎的思想。学习成本也不高，还是可以了解下的。
为了使 art-template 模板引擎能够更好的和 Express 框架配合，模板引擎官方在原 art-template 模板引擎的基础上封装了 express-art-template。
使用npm install art-template express-art-template命令进行安装。
// 当渲染后缀为art的模板时 使用express-art-template
app.engine('art', require('express-art-template'));
// 设置模板存放目录
app.set('views', path.join(__dirname, 'views'));
// 渲染模板时不写后缀 默认拼接art后缀
app.set('view engine', 'art');
app.get('/', (req, res) => {
// 渲染模板，index为模版的名称
res.render('index', { msg:'你好' });
});
app.locals 对象
将变量设置到app.locals对象下面，这个数据在所有的模板中都可以获取到。
app.locals.users = [{
name: '张三',
age: 20
},{
name: '李四',
age: 20
}]
