【从前端到全栈】-koa快速入门指南

前言随着技术的不断发展，前端工程师也被赋予了越来越多的职责。不再是图片切割机只需要切割一张图片，添加一个css样式就可以完成任务。下一篇，完成简单的登录注册，让你快速上手，成为“全栈小工程师”，开始吧！赶紧开始koa的安装，因为node.jsv7.6.x已经全面支持async/await语法，所以请确保node的版本在7.6以上。推荐一个node的多版本管理工具：nvm。如何安装这里不再赘述，网上教程很多https://github.com/creationix...//Initializepackage.jsonnpminit//安装koa2npminstallkoaahelloworld新建一个index.js，输入以下代码//index.jsconstKoa=require('koa')constapp=newKoa()app.use(async(ctx,next)=>{ctx.response.body='你好，我是吴彦祖来自中国大陆'})app.listen(3333,()=>{console.log('serverisrunningathttp://localhost:3333')})在我们的命令行中，我们可以通过输入来查看运行结果nodeindex.js:几个核心概念中间件朋友ctx和next在上面的代码中，我们可以看到app.use使用了2个参数，ctx和next。介绍一下这两个兄弟在做的一个ctxctx作为context，Koa将node的request和response对象封装成一个单一的对象。即ctx.request、ctx.response。Koa内部对一些常用的属性或者方法进行了代理操作，这样我们就可以直接通过ctx获取。比如ctx.request.url可以写成ctx.url。nextnext参数的作用是将处理控制权交给下一个中间件。经典的洋葱图概念可以很好的解释next的执行。请求从最外层进入，从最内层出来。让我们看一个例子constKoa=require('koa')constapp=newKoa()app.use(async(ctx,next)=>{letstartTime=newDate().getTime()awaitnext()letendTime=newDate().getTime()console.log(`本次响应时间为：${endTime-startTime}ms`)})app.use(async(ctx,next)=>{console.log('111,thendoSomething')awaitnext()console.log('111end')})app.use(async(ctx,next)=>{console.log('222,thendoSomething')awaitnext()console.log('222end')})app.use(async(ctx,next)=>{console.log('333,thendoSomething')awaitnext()console.log('333end')})app.listen(3333,()=>{console.log('serverisrunningathttp://localhost:3333')})查看运行结果：如果去掉'222'函数的next()，会发生什么？可以看出下面的'333'中间件并没有直接执行。所以中间件的顺序对下一个路由的执行有很大的影响koa-router我们经常使用koa-router来处理url安装npmikoa-router--save看一个例子：constkoa=require('koa')constapp=newKoa()constRouter=require('koa-router')constrouter=newRouter()router.get('/',async(ctx,next)=>{ctx.body='你好，我在这里am是索引页'})router.get('/user',async(ctx,next)=>{ctx.body='你好，这是用户页'})router.get('/error',async(ctx,next)=>{ctx.body='嗨，这是错误页面'})app.use(router.routes())app.listen(3333,()=>{console.log('serverisrunningathttp://localhost:3333')})koa-router也支持嵌套写法，通过一个通用路由加载所有子路由非常方便。看一个例子：constKoa=require('koa')constapp=newKoa()constRouter=require('koa-router')//子路由1letoneRouter=newRouter()oneRouter.get('/',async(ctx,next)=>{ctx.body='你好，这是oneRouter页面'})//子路由2lettwoRouter=newRouter()twoRouter.get('/',async(ctx,next)=>{ctx.body='你好，这是twoRouter页面'}).get('/home',async(ctx,next)=>{ctx.body='你好，这是主页'})//加载所有子路由,twoRouter.allowedMethods())app.use(indexRouter.routes()).use(indexRouter.allowedMethods())app.listen(3333,()=>{console.log('服务器运行在http://localhost:3333')})查看运行结果：获取请求数据koa-router提供了通用的.get.put.post.del接口来处理各种需求。在实际开发中，我们使用get和post的比较多。我们来看get的例子：constKoa=require('koa')constapp=newKoa()constRouter=require('koa-router')constrouter=newRouter()router.get('/data',async(ctx,next)=>{leturl=ctx.url//从ctx请求中获取我们想要的数据letdata=ctx.request.queryletdataQueryString=ctx.request.querystringctx.body={url,data,dataQueryString}})app.use(router.routes())app.listen(3333,()=>{console.log('serverisrunningathttp://localhost:3333')})输入http浏览器中://localhost:3333/data?user=wuyanzu&id=123456可以看到运行结果，可以看出区别。.query返回的结果是Object，.querystring返回的是字符串，这个很容易理解。（chrome插件显示的是json格式）如果你遵循RESTful规范，比如请求以'/user/:id'的形式发送，我们可以通过下面的例子来获取想要的数据并添加代码router.get('/data/:id',async(ctx,next)=>{//同样从ctx获取我们想要的数据，但是使用params对象letdata=ctx.paramsctx.body=data})浏览器运行http://localhost:3333/data/4396看结果。接下来，让我们看一下帖子示例。我们一般请求post，它的数据放在body里面。这时候给大家推荐一个很常用也很好用的中间件——koa-bodyparser。先安装npmikoa-bodyparser--save然后我们在刚才的代码中加上router.get('/post',async(ctx,next)=>{//模拟一个提交页面lethtml=`

你最像哪位明星