vue+koa2搭建mock数据环境

前段时间写了一篇前端vue项目如何实现mock数据的文章，主要是在vue项目中使用mock数据。数据和项目耦合在一起，不是很优雅。作为一个追求效率的前端怎么能容忍这种做法呢？本文记录使用koa2搭建服务器的方法，提供mock数据。初始化vue项目。这里以vue项目为主。当然其他类型的项目还是可以使用这种模拟数据的方式。vuecreatevue-koa2-demo的前提是安装了vue-cli的脚手架，我的电脑安装的是vue-cli3的版本。按照要求一步步选择好之后，记得选择安装vuex，后面启动项目就可以使用了。koa2项目初始化前端项目做好后开始安装koamkdirkoa-democdkoa-demonpmkoakoa-routerkoa-cors安装完成后在项目根目录新建server.js.letkoa=require('koa')letRouter=require('koa-router')letcors=require('koa-cors')letfs=require('fs')constapp=newKoa()constrouter=newRouter()router.get('/getData',asyncctx=>{//允许cors跨域请求awaitcors();//返回数据ctx.body=JSON.parse(fs.readFileSync('./static/data.json'));})//连接koa和中间件app.use(router.routes()).use(router.allowedMethods());letport=3000;app.listen(port,()=>{上面的console.log('serverisrunningon'+port)})请求了一个data.json。需要在项目根目录下新建文件夹static，新建data.json[{"id":1,"name":"曹操","age":"18"},{"id":2,"name":"孙权","age":"20"},{"id":3,"name":"刘备","age":"24"},{"id":4、"name":"WeiYan","age":"28"}]在终端执行命令启动koa项目nodeserver.js当看到下图时，说明项目已经成功启动，前端项目已经改造。修改Home.vue文件修改App.vue文件修改store/index.jsimportVuefrom"vue";importVuexfrom"vuex";importaxiosfrom"axios";Vue.use(Vuex);exportdefaultnewVuex.Store({state:{list:[]},mutations:{setlist(state,data){state.list=data;}},actions:{getData({commit}){axios.get("/api/getData",{headers:{Accept:"application/json","Content-Type":"application/json"}}).then(res=>{if(res.status===200){returnres.data;}}).then(res=>{commit("setlist",Array.from(res));});}},modules:{}});记得提前安装axios，需要使用axios请求后台接口新建配置文件，在根目录下新建vue.config.js。由于前后端项目是跨域的，所以需要使用代理来实现。module.exports={devServer:{port:8085,//端口号https:false,//https:{type:Boolean}open:true,//配置浏览器自动启动proxy:{"/api":{target:"http://127.0.0.1:3000",changeOrigin:true,pathRewrite:{"^/api":"/"}}}}};重启项目npmrunserve会看到页面显示koa-demo项目中定义的json数据准备好了，大功告成。这样以后mock数据项目就可以和具体的前端项目分开，使用起来更方便。不再向后端乞求模拟数据，自己动手吧！参考资料koa官网