Koa 的中间件通俗的讲:中间件就是匹配路由之前或者匹配路由完成做的一系列的操作,我们就可以把它叫做中间件。
一、应用级中间件:
1.不加路径参数的中间件
app.use((ctx)=>{
ctx.body="这是一个中间件"
});
如上,这就是一个中间件,如果(ctx)前面不加路径的话,就匹配所有路由的路径,这时候路由就不起作用了,所有路径全都渲染中间件的内容。
2.中间件完成以后继续向下匹配路由
app.use(async (ctx,next)=>{
console.log(new Date()+"已经匹配到"+ctx.url);
await next();
});
这时候就会匹配路由,并打印出next结果
地址栏里输入http://localhost:3000/news/123/回车,控制台会打印出
Fri Mar 01 2019 10:41:28 GMT+0800 (GMT+08:00)已经匹配到/news/123/
结合moment可以把时间格式化
3.还是上面的案例,如果不写next
app.use(async (ctx)=>{
console.log(new Date()+"已经匹配到"+ctx.url);
});
你在浏览器输入地址,只会在控制台打印,就不会向下匹配路由渲染
二、路由级中间件
router.get("/",async (ctx)=>{
console.log("先打印中间件")
});
router.get("/",async (ctx)=>{
ctx.body="这是主页"
});
如果这样写,控制台打印出内容后就不向下匹配路由并渲染了
如果要继续向下,需要加next,如下
router.get("/",async (ctx,next)=>{
console.log("先打印中间件");
await next()
});
router.get("/",async (ctx)=>{
ctx.body="这是主页"
});
三、错误处理中间件
还是使用应用级中间件,加了判断
app.use(async (ctx,next)=>{
await next();
if (ctx.status==404){
ctx.body="这是一个404页面"
}
});
如果使用了app.use一定是先走app.use中间件的,再向下去匹配路由,如果匹配不到并且状态是404,那就渲染一个404页面
Koa中使用ejs模板
1.安装koa-views 和ejs
npm install --save koa-views
npm install ejs --save
2.引入使用
let views=require("koa-views");
app.use(views('viewsejs', { map: {html: 'ejs' }})); //模板后缀必须是html
然后就可以使用了,比如router里面使用
await ctx.render("index") //这里指的是viewsejs目录下的index.html文件
ejs模板语法的使用
router.get("/",async (ctx)=>{
let zhi="这是js传过来的数据"
await ctx.render("index",{
chuan:zhi
})
});
在js里设置一个zhi,到模板index里面渲染,写成<%=chuan%>即可
Ejs 模板中绑定数据<%=chuan%>
Ejs 模板中循环数据
<ul>
<%for(var i=0;i<list.length;i++) {
%>
<li><%=list[i] %></li>
<%
}%>
</ul>
Ejs 引入模板<% include header.html %>
获取post提交过来的数据
1.安装koa-bodyparser
npm install --save koa-bodyparser
2.引入并使用koa-bodyparser中间件
var bodyParser = require('koa-bodyparser');
app.use(bodyParser());
3.使用ctx.request.body 获取post 提交的数据
/login.html页面内容
<form method="post" action="/doLogin">
用户名:<input type="text" name="username">
密 码:<input type="password" name="passwd">
<button type="submit">提交</button>
</form>
配置路由信息如下:
router.get("/login",async (ctx)=>{
await ctx.render("login")
});
使用ctx.request.body 获取post 提交的数据
router.post("/doLogin",async (ctx)=>{
ctx.body=ctx.request.body;
console.log(ctx.request.body);
});
PS:提交数据后跳转到/doLogin,并渲染内容为提交的数据,是一个对象
html表单里面,name属性必须要,不然数据为空
koa-static静态资源中间件
安装npm install --save koa-static
引入const static = require('koa-static');
配置中间件app.use(static("static") );可以配置多个
这样就可以在模板引擎里直接使用静态资源了
<div>
<img src="imgs/a.png">
</div>
在index.html里面加入以上图片,默认会直接去静态资源目录static下面找imgs/a.png