Express框架
优点
- 提供方便简洁的路由定义方式；
- 对获取HTTP请求参数进行了简化处理；
- 对模板引擎支持程度高，方便渲染动态HTML页面；
- 提供中间件机制有效控制HTTP请求；
- 拥有大量第三方中间件对功能进行扩展；
vscode命令行输入下载express
npm install express
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
app.get('/',(req,res) =>{
//send()
//1.send方法内部会检测响应内容的类型
//2.send方法会自动设置http状态码
//3.send方法会帮我们自动设置响应的内容类型及编码
res.send('Hello Mr.lizeyan-victor');
});
app.get('/list',(req,res) =>{
res.send({name:'Mr.lizeyan-victor',age:22});
});
//监听端口
app.listen(3000);
console.log('Welcome to express，Mr.lizeyan-victor');
启动服务器，找到他的文件地址
node expressdemo.js
中间件
- 中间件就是一堆方法，可以接收客户端发来的请求，可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理；
- 中间件主要由两部分构成，中间件方法以及请求处理函数；
- 中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求；
- 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理；
- 默认情况下，请求从上到下依次默认匹配中间件，一旦匹配成功，终止匹配；
app.get('/request',(req,res,next) =>{
req.name = 'Mr.lizeyan-victor';
//定义中间件会继续向下查找
next();
});
app.get('/request',(req,res,next) =>{
res.send(req.name);
});
app.use
匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求，必须定义在其他中间件前面也可以对某一个进行请求；
//接收所有请求的中间件
app.use((req,res,next) =>{
console.log('请求走了app.use中间件');
next();
});
//当客户端访问/request请求的时候走当前中间件
app.use('/request',(req,res,next) =>{
console.log('请求走了app.use / request中间件');
next();
});
app.get('/list',(req,res,next) =>{
res.send('/list');
});
中间件应用
- 路由保护，可判断是否拦截请求；
- 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接对客户端做出响应；
- 自定义404页面；
- 可以链式调用；
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
app.use('/admin',(req,res) =>{
res.send('网站维护中...');
})
app.use('/admin',(req,res,next) =>{
//用户登录验证
let isLogin = false;
//判断
if(isLogin){
//继续向下执行
next();
}else{
//如果没有登录，为客户端做出响应
res.send('您还没登录，不能访问/admin页面');
}
})
app.get('/admin',( req, res) =>{
res.send('您已经登录，可以访问页面');
})
app.use((req,res,next) =>{
res.status(404).send('当前访问的页面不存在');
})
//监听端口
app.listen(3000);
console.log('Welcome to express，Mr.lizeyan-victor');
错误处理中间件
在程序执行的过程中不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败，错误处理中间件是一个集中处理错误的地方
同步代码：
app.get('/index',(req,res) =>{
throw new Error('程序发生了未知错误');
res.send('程序正常运行');
})
异步代码：
//引入express框架
const express = require('express');
//读取文件的模块
const fs = require('fs');
//创建网站服务器
const app = express();
app.get('/index',(req,res,next) =>{
// throw new Error('程序发生了未知错误');
fs.readFile('./read.txt','utf8',(err,result) =>{
if(err != null){
next(err);
}else{
res.send(result);
}
})
// res.send('程序正常运行');
})
//错误处理中间件
app.use((err,req,res,next) =>{
res.status(500).send(err.message);
})
//监听端口
app.listen(3000);
console.log('Welcome to express，Mr.lizeyan-victor');
try catch
可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型的API发生的错误；
//引入express框架
const express = require('express');
//读取文件的模块
const fs = require('fs');
//导入方法
const promisity = require('util').promisify;
//重新包装一个读取文件的方法
const readFile = promisity(fs.readFile);
//创建网站服务器
const app = express();
app.get('/index', async (req,res,next) =>{
try{
await readFile('./aaa.js');
}catch(ex){
next(ex);
}
});
//错误处理中间件
app.use((err,req,res,next) =>{
res.status(500).send(err.message);
})
//监听端口
app.listen(3000);
console.log('Welcome to express，Mr.lizeyan-victor');
构建模块化路由
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
//导入路由模块
const home = require('./route/home.js');
const admin = require('./route/admin.js');
//路径匹配
app.use('/home',home);
app.use('/admin',admin);
//端口监听
app.listen(3000);
const express = require('express');
const home = express.Router();
home.get('/index',(req,res) =>{
res.send('welcome to home,Mr.Victor');
});
//模块成员导出
module.exports = home;
const express = require('express');
const admin = express.Router();
admin.get('/index',(req,res) =>{
res.send('welcome to admin,Mr.Victor');
});
//模块成员导出
module.exports = admin;
获取get请求参数
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
app.get('/index',(req,res) =>{
//获取get请求参数
res.send(req.query);
})
//端口监听
app.listen(3000);
获取POST参数
Express中接收post请求参数需要借助第三方包 body-parser；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://localhost:3000/add" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" name="">
</form>
</body>
</html>
//引入express框架
const express = require('express');
//第三方模块
const bodyParser = require('body-parser');
//创建网站服务器
const app = express();
//extended:false 方法内部使用querystring模块处理请求参数的格式
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
//拦截所有请求
app.use(bodyParser.urlencoded({extended:false}));
app.post('/add',(req,res) =>{
res.send(req.body);
})
//端口监听
app.listen(3000);
Express路由参数
//引入express框架
const express = require('express');
//第三方模块
const bodyParser = require('body-parser');
//创建网站服务器
const app = express();
app.get('/index/:id/:name/:age',(req,res) =>{
//接收post请求参数
res.send(req.params);
})
//端口监听
app.listen(3000);
静态资源处理
通过express内置的express.static可以方便的托管静态文件，例如img、CSS、js等；
//引入express框架
const express = require('express');
const path = require('path');
//创建网站服务器
const app = express();
//实现静态资源访问功能
app.use('/static',express.static(path.join(__dirname,'public')));
//端口监听
app.listen(3000);
模板引擎
const express = require('express');
const path = require('path');
const app = express();
//1.告诉express使用什么模板引擎渲染什么后缀的模板文件
//参数1是模板后缀 参数2使用的模板引擎
app.engine('art',require('express-art-template'));
//2.告诉express框架模板存放的位置是什么
//参数1 views是固定的 参数2指定模板位置，使用绝对路径，文件夹一般叫views
app.set('views',path.join(__dirname,'views'));
//3.告诉express框架模板的默认后缀是什么
app.set('view engine','art');
//1.拼接模板路径
//2.拼接模板后缀
//3.哪一个模板和哪一个数据进行拼接
//4.将拼接结果响应给了客户端
app.get('/index',(req,res) =>{
res.render('index',{
msg: 'message'
})
})
app.get('/list',(req,res) =>{
res.render('list',{
msg: 'list page'
})
})
//端口监听
app.listen(3000);
app.local对象
const express = require('express');
const path = require('path');
const app = express();
//模板配置
app.engine('art',require('express-art-template'));
app.set('views',path.join(__dirname,'views'));
app.set('view engine','art');
//所有模板都能拿到
app.locals.users = [{
name: '李泽言',
rank: '倔强青铜',
},{
name: '黑夜的猫不是喵',
rank: '百强大佬',
}]
app.get('/index',(req,res) =>{
res.render('index',{
msg:'首页'
});
});
app.get('/list',(req,res) =>{
res.render('list',{
msg:'列表页'
})
})
//端口监听
app.listen(3000);
{{msg}}
<ul>
{{each users}}
<li>
{{$value.name}}
{{$value.rank}}
</li>
{{/each}}
</ul>
扫一扫
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
