Vue+koa2开发一款全栈小程序(4.Koa入门)

时间:2023-03-08 17:30:46

1.Koa是什么?

基于nodejs平台的下一代web开发框架

1.Express原班人马打造,更精简

2.Async+await处理异步

3.洋葱圈型的中间件机制

新建一个koa项目

1.打开cmd,cd到指定目录下

mkdir koa-demo
cd koa-demo
npm init //然后一直默认回车
cnpm install koa --save

2.在vscode中打开koa-demo项目,新建server.js

Vue+koa2开发一款全栈小程序(4.Koa入门)

const Koa=require('koa')
const app=new Koa() app.use(async(ctx,next)=>{
ctx.body='hello koa'
}) app.listen(3000)

在cmd中,执行node server.js

3.在浏览器,访问http://localhost:3000/

Vue+koa2开发一款全栈小程序(4.Koa入门)

代码疑问

1.ctx是什么 封装了request和response的对下个

2.Next是什么 下一个中间件

3.App是什么 启动应用

2.异步处理方案 async+await

新建asyncawait.js文件

function delay(word){
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove('hello'+word)
},2000)
})
} //async+await 一起使用
async function start(){
const word1=await delay('孙悟空')
console.log(word1)
const word2=await delay('猪八戒')
console.log(word2)
const word3=await delay('沙悟净')
console.log(word3)
} start()

执行node asyncawait.js 命令,依次输出

hello 孙悟空
hello 猪八戒
hello 沙悟净
//每隔两秒,顺序执行,没有发生异步的抢执行

async+await在koa中的使用

将server.js改写为

const Koa=require('koa')
const app=new Koa() function delay(){
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove()
},1000)
})
} app.use(async(ctx,next)=>{
ctx.body='1'
await next()
ctx.body+='2'
}) app.use(async(ctx,next)=>{
ctx.body+='3'
await delay()
await next()
ctx.body+='4'
}) app.use(async(ctx,next)=>{
ctx.body+='5'
await next()
ctx.body+='6'
}) //
app.listen(3000)

在cmd中,ctrl+c退出服务状态,再执行node server.js

Vue+koa2开发一款全栈小程序(4.Koa入门)

async+await在koa中的实践应用例子,定义一个打印日志的中间件

在项目目录下,新建koa-logger.js文件

module.exports=async(ctx,next)=>{
const start=new Date().getTime()
await next()
const end=new Date().getTime() console.log(ctx.request.url,end-start,ctx.body.length)
}

然后在server.js中引用

Vue+koa2开发一款全栈小程序(4.Koa入门)

在cmd重启命令:node server.js

访问 http://localhost:3000/

在cmd界面,打印出日志

/ 1003 6 //代表访问了根目录,用了1003毫秒,返回体有多长

3.koa路由koa-router入门

1.打开cmd,在项目目录下下,安装koa-router

cnpm install koa-router --save

2.server.js中

const Koa=require('koa')
const Router = require('koa-router');
const app=new Koa();
const router = new Router(); router.get('/', (ctx, next) => {
ctx.body='孙悟空'
});
router.get('/1', (ctx, next) => {
ctx.body='猪八戒'
}); app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods()); app.listen(3000)

在cmd重启命令:node server.js

访问 http://localhost:3000/  返回孙悟空

访问http://localhost:3000/1 返回猪八戒