.showJson{width:500px;边距：10px自动；最小高度：500px；背景颜色：淡绿色；}上篇写的这篇文章主要目的是学习使用koa框架搭建web服务，为前端提供一些后端接口结束通话。搭建这个环境的目的是：在前端工程师和后端工程师在接口上达成一致之前，在联调之前，向后端请求数据相关的功能可以走前端搭建的http路径-端工程师自己做，而不是直接在前端写几个死数据。即模拟后端接口。当然，在整个过程中（搭建环境+开发实例demo），涉及到以下知识点。包括：koa2的知识点、node的知识点、跨域问题、fetch的使用、axios的使用、promises的使用、vuex->state的使用、mutations、action。第一部分：环境建设。vue+vuex环境首先是vue+vue-router+vuex的环境。我们使用vue-cli脚手架生成项目，会用vue的同学应该不陌生。//全局安装脚手架工具npmivue-cli-g//验证脚手架工具安装是否成功vue--version//构建项目vueinitwebpack项目名//测试vue项目是否运行成功npmrundev是脚手架生成的vue项目中不包含vuex，所以重新安装vuex。//安装vuexnpmivuex--savekoa2环境前端项目搭建完成，我们开始搭建我们的后端服务。首先，在你的开发工具（无论是webstorm还是sublime）中新建一个目录，构建一个基于koa的web服务。这里，我们不妨将这个目录命名为koa-demo。然后执行：//进入目录cdkoa-demo//generatepackage.jsonnpminit-y//安装如下依赖npmikoanpmikoa-routernpmikoa-cors安装koa和两个中间件，环境就搭建好了.第二部分：示例开发环境是为了使用，所以我们马上写一个demo。demo开发不仅是在开发环境中练习如何写代码的过程，更是验证环境搭建是否正确、是否好用的过程。后端接口开发在这个例子中，我们只在后端提供一个服务，就是提供给前端返回json数据的接口。代码有注释，直接上代码。server.js文件//server.js文件letKoa=require('koa');letRouter=require('koa-router');letcors=require('koa-cors');//导入modejs文件系统APIletfs=require('fs');constapp=newKoa();constrouter=newRouter();//提供一个/getJson接口router.get('/getJson',asyncctx=>{//The后端允许cors跨域请求awaitcors();//数据返回给前端ctx.body=JSON.parse(fs.readFileSync('./static/material.json'));});//koaConnect有两个中间件app.use(router.routes()).use(router.allowedMethods());//监听端口3000app.listen(3000);这里使用了一个json文件，在'./static/material.json'路径，json文件的代码为：//material.json文件[{"id":1,"date":"2016-05-02","name":"张三","address":"北京清华大学",},{"id":2,"date":"2016-05-04","name":"李斯","address":"上海复旦大学",},{"id":3,"date":"2016-05-01","name":"王武","address":"广东中山大学",},{"id":4,"date":"2016-05-03","name":"赵刘","address":"广东深圳大学",},{"id":5,"date":"2016-05-05","name":"韩梅梅","address":"四川大学",},{"id":6,"date":"2016-05-11","name":"刘晓璐","address"":"湖南中南大学",},{"id":7,"date":"2016-04-13","name":"曾坦","address":"江苏南京大学",}]然后我们使用如下命令启动服务节点server.js来测试界面是否良好。打开浏览器输入http://127.0.0.1:3000/getJson，查看页面是否显示json文件中的json数据。如果是显示的话，说明已经搭建了提供json数据的服务。前端调用后端接口的例子，突出重点，排除干扰，便于理解。我们前端写了一个组件，组件有两部分：首先是一个按钮，用来调用web服务的getJson接口；其次是一个内容展示区，拿到后端返回的数据后，放在组件的这部分区域展示。首先，让我们看一下组件文件。从后端获取json{{json}}
