在前端开发过程中，如果没有提供后端接口，前端无法获取到数据，一些交互代码可能无法继续编写。这个时候，我们一般会自己创建一些数据，让页面流转下去。最近项目转为Vue框架开发，发现json-server可以很好的解决接口mock的问题。json-server官方地址安装$npminstalljson-server-gstartjson-server$json-server--watchdb.json你通过官方的例子可以发现json-server其实是返回了中对应key的值访问界面时的db.json。比如：你访问http://localhost:3000/posts/，在db.json中返回json.posts那么问题来了1、如果我们要模拟很多接口，是否应该一个一个的添加到db.json中一？其他前端人员也会修改这个文件。每次合并代码，都要考虑冲突问题，这个文件会变得很大，很难维护2.如果我的接口是http://localhost:3000/a/b，如何解决http://localhost:3000/a/b/c本文主要讨论这两个问题的解决方案：1.将package.json中npmrunmock对应的命令修改为json-servermock/index.js。在项目中创建一个mock文件夹，在该文件夹下创建一个index.js（任意名称）文件，index.jsmodule。exports=function(){return{a:['接口a的返回数据'],b:['接口b的返回数据']}}此时启动npmrunmock，访问http://localhost:3000/a，就可以得到想要的结果2、在mock文件夹下新建几个js文件，比如我新建了一个└─mock│─test│├─a.js│└─b.js└─test2├─c.js└─d.js示例a.jsmodule.exports={url:'a',title:'',type:'GET',decs:'',query:{a:'1'},res:{ret:1,result:[{a:'2',b:'3',c:'4'}]}}修改index.jsletPath=require('path')letglob=require('glob')//读取所有API文件constapiFiles=glob.sync(Path.resolve(__dirname,'./')+'/**/*.js',{nodir:true})letdata={}//输出所有api文件i跳过index.jsfor(leti=1,l=apiFiles.length;i
