介绍话不多说，直接动手。珍惜生命，远离背景。背景在前后端分离模式项目的开发过程中，前端的界面展示和交互逻辑往往需要后端界面数据支持，但邪恶的后端永远跟不上进度我们美丽的前端女士。于是我们不禁仰天长叹，难道就没有一种方法可以不依赖后台，完美展示界面数据，即保证前端交互的完整性，又不会太麻烦吗？？答案当然是肯定的~~~~请我们的主角上台吧。Mockjs介绍了Mock官网首页的定义：生成随机数据，拦截Ajax请求。Portal&example功能降低开发成本前后端分离其实是增加了开发成本，但是因为它带来的优势让我们能够承担这个成本，但是在前后端剥离的时候克服这个成本的目标一直没有停止端开发完成本阶段开发的详细设计后，前端就可以开始本阶段的开发了。由于在详细设计阶段已经统一了基本设置，因此在开发过程中前后端应该完全独立。但是在实际开发中，前端往往会保留一些界面接收逻辑等待与后端对接后填充，无法完全完成前端自身的界面展示和交互逻辑。而使用mockjs模拟界面和数据前端，可以最大程度的完全分离开发和后端的耦合成本，基本完成开发时所有的前端逻辑编写，减少对接时间前端和后端接口。在后台对接阶段，很多项目组都会在这个阶段花费大量的调试时间和成本。但实际上，如果前端完成数据和交互的逻辑，后台完成所有的界面自测，这个阶段应该是一个非常快速的前端自建项目的演示。很多前端开源项目没有后台，模拟数据演示。例如，vue-element-admin、d2-admin、wl-admin。在项目中引入js，依赖npminstallmockjs建立一个mock文件夹，统一管理我们的mock数据。在mock文件夹下新建一个demo.js，试试看。在mock/demo.js中写入如下代码：importMockfrom'mockjs'随机生成一个包含20-40条数据的数组TryconstprojectList=Mock.mock({"list|20":[{'name':'@cname',//中文名称'account':`@word`,//英文单词'phone':/1[3-9][0-9]{9}/,//正则模式'deptName':Mock.mock('@cword(2,4)'),//随机2-4个汉字'id':'@guid',//guid}]})有多种模式可以选择，看官方网站的详细信息示例。有了数据之后，我们如何模拟数据，通过接口返回呢？导出默认值[{url:'/Api/Project/GetList',type:'post',response:(res)=>{let_filter_list=[];if(res.body.key){let_filter_list=projectList.filter(i=>i.name==res.body.key)}//没错，你应该猜到res.body就是我们传入的接口We可以在这里做一些逻辑操作//res包含完整的请求头信息return{code:200,message:"Operationsucceeded",data:_filter_list}//使用return返回前端需要的数据}}...//多个接口]既然有了数据，那么如何让mockjs拦截我们前端发来的请求，准确区分对应的接口呢？在mock/文件夹下再新建一个index.js，用来编写我们mock的监控逻辑intercept:true,//你可能需要一个开关让模拟请求和真实请求共存'?')[1]if(!search){返回{}}returnJSON.parse('{"'+decodeURIComponent(search).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"').replace(/\+/g,'')+'"}')}//关键！复制一个前端模型构建函数（或者你也可以构建一个模拟服务器）{if(this.custom.xhr){this.custom.xhr.withCredentials=this.withCredentials||falseif(this.responseType){this.custom.xhr.responseType=this.responseType}}this.proxy_send(...arguments)}functionXHR2ExpressReqWrap(respond){返回函数(options){letresult=nullif(respondinstanceofFunction){const{body,type,url}=options//https://expressjs.com/en/4x/api.html#reqresult=respond({方法：类型，主体：JSON。解析（正文），查询：param2Obj（url）}）}其他{结果=响应}返回模拟。mock(result)}}for(constiofmocks){if(i.intercept){for(constfetchofi.fetchs){Mock.mock(newRegExp(fetch.url),fetch.type||'获取',XHR2ExpressReqWrap(fetch.response))}}}}经过上面的代码，我们已经初步完成了前端模拟数据的技术条件，但是一定不要忘记在main.js中引入并使用它import{mockXHR}来自'../mock'if(process.env.NODE_ENV=='development'){mockXHR();}万事俱备，只需要请求，现在就可以写请求试水了。axios.post('/Api/Project/GetList').then(res=>{console.log(res)})但是，我们不建议你直接在项目中这样做！请稍等片刻，让我们稍微封装一下请求。在src下创建一个api文件夹，然后在src/api/下创建一个_request.jsimportaxiosfrom"axios"；//定义axios配置consthttp=Axios.create({baseURL:'',//api的base_urlwithCredentials:true,//启用跨域身份凭证method:"post",headers:{"Content-Type":"application/json;charset=UTF-8"},timeout:5000//请求超时});//设置全局请求次数，请求间隔，用于自动再次请求http.defaults.retry=2;http.defaults.retryDelay=1000;//请求拦截器http.interceptors.request.use(function(config){returnconfig;},function(error){returnPromise.reject(error);});//响应拦截器http.interceptors.response.use(function(res){returnres;},function(err){letconfig=err.config;leterrres=err.response;leterr_type=errres?errres.status:0;//收集错误信息switch(err_type){case400:err.message="invalidrequest";break;case401:err.message="长时间不活动导致登录超时，请重新登录";休息;case403:err.message="拒绝访问";休息;case404:err.message=`错误请求地址：${errres.config.url}`;休息;案例405:err.message=`Unauthorized`;休息;case408:err.message="请求超时";休息;case500:err.message="服务器内部错误";休息;case501:err.message="服务未实现";休息;case502:err.message="网关错误";休息;case503:err.message="服务不可用";休息;case504:err.message="网关超时";休息;case505:err.message="不支持HTTP版本";休息;default:err.message="网络波动，请重试";}//如果配置不存在或者没有设置重试选项，则拒绝(!config||!config.retry)returnPromise.reject(err);//设置用于跟踪重试计数的变量config.__retryCount=config.__retryCount||0;//检查我们是否已经达到重试总数的最大值if(config.__retryCount>=config.retry){//拒绝并返回错误returnPromise.reject(err);}//增加重试次数config.__retryCount+=1;//创建新的承诺来处理指数退避letbackoff=newPromise(function(resolve){setTimeout(function(){resolve();},config.retryDelay||1);});//返回调用axios重试请求的promisereturnbackoff.then(function(){returnhttp(config);});});导出默认http；封装axios后，还是建议统一管理所有api接口。我们在api/文件夹下再建一个项目.js用于统一管理项目模块的所有接口importrequestfrom"../_request";//1获取部门列表接口functiongetProjectListApi(data){returnrequest({url:"/Api/Project/GetList",method:'post',data});}//2添加项目接口functionaddProjectApi(data){returnrequest({url:"/Api/Project/Add",method:'post',data});}//3删除项目接口函数delProjectApi(data){returnrequest({url:"/Api/Project/Add",method:'post',data});}export{getProjectListApi,//1获取部门列表接口addProjectApi,//2添加项目接口delProjectApi,//3删除项目接口}接下来就是最后一步了，在.vue文件中我们从“@/api/project.js”开发了Import{getProjectListApi}；//导入用户列表接口exportdefault{data(){return{projectList:[]}},created(){this.getProjectList()},methods:{getProjectList(){getProjectListApi().then(res=>{console.log(res)})}}}结语不出意外的话，经过上面这一系列的操作，我们的数据就出来了，mockjs在项目中的应用方式也介绍完了。如果你还想被我感动，就来我的Github交友吧~Github&segmentfault&Nuggets&csdn&语雀
