koa与Express简单比较
Express connect 中间件 封装了 路由、视图，
koa co中间件 不包含任何中间件 callback ,需要自己手动引入中间件
koa具有体积小的特点
1、首先新建一个文件夹，下载koa插件
yarn add koa
新建一个my-koa-app.js,编写一个helloWorld的实例。
const Koa = require('koa');
//创建koa实例
const app = new Koa();
//配置路由
app.get('/index',async ctx => {
console.log(ctx.url)
ctx.body = '首页';
});
app.listen(8082,()=>{
console.log('接口已启动')
});
这样一个简单的koa的例子就完成了。
2、koa-router 路由 根据不同的路由获取不同的参数
首先还是要安装koa-router
yarn add koa-router
const Koa = require('koa');
const Router=require('koa-router')
//创建koa实例
const app = new Koa();
const router=new Router();
//配置路由
//静态路由 /index?title
router.get('/',async ctx=>{
//ctx 包含了request response
//获取参数的两种方式
//query 是一个对象 querystring() 是一个字符串
console.log(ctx.request.query)
console.log(ctx.request.querystring)
//推荐用法
console.log(ctx.query)
console.log(ctx.querystring)
ctx.body='首页'
})
//动态路由 /index/12
router.get('/about/:id',async ctx=>{
console.log(ctx.params)
ctx.body='介绍页面'
})
//启动路由
app
.use(router.routes())
.use(router.allowedMethods()) //官方推荐
app.listen(8082,()=>{
console.log('接口已启动')
});
结果：
image.png
3、koa中间件与模板的渲染
中间件是koa的精髓，中间件容器是负责各个组件和服务的关联和交互
中间件的执行方式比较像’洋葱模型‘
- 操作先进后出
- 有控制先进后出的机制 next
- 有提前结束的机制
中间件类型
- 应用级中间件 类似于vue全局导航守卫
- 路由级中间件 独享路由守卫
- 错误处理中间件 应用及中间件，处理错误兜底
- 第三方中间件 koa-bodyparser
末班引擎
- 模板引擎 ejs
- koa-bodyparse 中间件与post 请求
- koa-static 静态资源中间件
//yarn add koa-views ejs
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const app = new Koa();
const router = new Router();
app.use(
views('page',{
map:{html:'ejs'}
})
)
router.get('/', async (ctx, next) => {
console.log('路由级中间件1');
await next();
});
router.get('/', async (ctx) => {
const txt='nihao'
console.log('路由级中间件2');
await ctx.render('index',{txt});
});
//应用级中间件
app.use(async (ctx, next) => {
ctx.state.commondata='我是公共数据，每个页面都可以使用'
console.log('应用级中间件');
await next();
if (ctx.status == 404) {
ctx.body = '404页面';
}
});
//使用中间件
app.use(router.routes()).use(router.allowedMethods());
app.listen(8082);
page/index.html
<!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>
<p><%=commondata%></p>
<p><%=txt%></p>
</body>
</html>
结果：
image.png
网友评论