- Express框架是什么
Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。 - Express框架特性
- 提供了方便简洁的路由定义方式
- 对获取HTTP请求参数进行了简化处理
- 对模板引擎支持程度高,方便渲染动态HTML页面
- 提供了中间件机制有效控制HTTP请求
- 拥有大量第三方中间件对功能进行扩展
- https://www.expressjs.com.cn
(一) 基础使用
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
//处理客户端请求
app.get('/', (req, res) => {
// send()取代end()
// 1.send方法内部会检测响应内容的类型
// 2.send方法会自动设置http状态码
// 3.send方法会自动设置响应内容类型及编码
res.send('hello express');
})
//监听端口
app.listen(3000);
console.log('网站服务器启动成功');
(二) 中间件
什么是中间件:
- 中间件就是一堆方法,可以接收客户端发来的请求、可以对请求做出响应,也可以将请求继续交给下一个中间件继续处理。
- 中间件主要由两部分构成,中间件方法以及请求处理函数。
- 中间件方法由Express提供,负责拦截请求,请求处理函数由开发人员提供,负责处理请求。
- 可以针对同一个请求设置多个中间件,对同一个请求进行多次处理。
- 默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。
- 可以调用next方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。
[1]. app.use 中间件
- 没有请求地址参数,app.use 匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求。
- app.use 第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地址就接收这个请求。
app.use([path,] (req, res[, next])){ .... }
[2]. 错误处理中间件
当程序出现错误时,调用next()方法,并且将错误信息通过参数的形式传递给next()方法,即可触发错误处理中间件。
app.get("/", (req, res, next) => {
fs.readFile("/file-does-not-exist", (err, data) => {
if (err) {
next(err);
}
});
});
app.use((err, req, res, next) => {
res.status(500).send('服务器发生未知错误');
})
[3]. 捕获错误
在node.js中,异步API的错误信息都是通过回调函数获取的,支持Promise对象的异步API发生错误可以通过catch方法捕获。
https://www.expressjs.com.cn/guide/error-handling.html
app.get("/", async (req, res, next) => {
try {
await User.find({name: '张三'})
}catch(ex) {
next(ex);
}
});
(三) 请求处理
[1]. 路由模块化
// app.js
const home = require('./route/home.js');
const admin = require('./route/admin.js');
//将路由和路径进行匹配
app.use('/home', home);
app.use('/admin', admin);
// home.js
const express = require('express');
const home = express.Router();
//用户请求/home/index页面时进入
home.get('/index', (req, res) => {
res.send('欢迎来到博客展示页面');
});
module.exports = home;
// admin.js
const express = require('express');
const admin = express.Router();
admin.get('/index', (req, res) => {
res.send('欢迎来到博客管理页面');
});
module.exports = admin;
[2]. get参数的获取
Express框架中使用req.query即可获取GET参数,框架内部会将GET参数转换为对象并返回。
app.get('/', (req, res) => {
console.log(req.query); // {"name": "zhangsan", "age": "30"}
});
[3]. post参数的获取
Express中接收post请求参数需要借助第三方包 body-parser。
// 引入body-parser模块
const bodyParser = require('body-parser');
// 配置body-parser模块
//extended: false表示使用系统模块的queryString来处理请求参数的格式
//extended: true表示使用第三方模块qs来处理
app.use(bodyParser.urlencoded({ extended: false }));
// 接收请求
app.post('/add', (req, res) => {
// 接收请求参数
console.log(req.body);
})
[3]. express路由参数
请求路径:
localhost:3000/find/123
服务器处理:
//如果没有参数,则匹配不到
app.get('/find/:id', (req, res) => {
console.log(req.params); // {id: 123}
});
[4]. 静态资源处理
通过Express内置的express.static可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。
设置静态资源路径后,在html页面中请求页面的页面是 app.use(express.static(‘public’));中的路径拼接上html页面中静态资源的路径。
//static参数是静态资源所在的位置,建议使用绝对路径
app.use(express.static('public'));
(四) express-art-template模板引擎
[1].模板引擎
- 为了使art-template模板引擎能够更好的和Express框架配合,模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。
- 使用npm install art-template express-art-template命令进行安装。
- https://aui.github.io/art-template/zh-cn/express/index.html#Install
// 当渲染后缀为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) => {
// 渲染模板
res.render('index',{
user: {
name: 'aui',
tags: ['art', 'template', 'nodejs']
}
});
});
[2] app.locals
将变量设置到app.locals对象下面,这个数据在所有的模板中都可以获取到。
// req.app.locals.userInfo = userData;
app.locals.users = [{
name: '张三',
age: 20
},{
name: '李四',
age: 20
}]
[3] 模板变量
http://aui.github.io/art-template/zh-cn/docs/imports.html
app.js中
//导入dateformat日期处理模块
const dateFormat = require('dateformat');
//向模板内部导入dateFormate变量
template.defaults.imports.dateFormat = dateFormat;
index.art中
<span>{{dateFormat($value.createDate, 'yyyy-mm-dd')}}</span>