新乡做网站的,猪八戒网站 怎么做兼职,akcms做的网站,wordpress 课程管理系统之前都是介绍在普通项目中使用mock.js#xff0c;那么本次就来介绍一下在vue中使用mock.js实现前后端分离。安装#xff1a;npm install mockjs这里先写个小案例介绍一下具体使用#xff0c;写法不规范#xff0c;仅供参考。然后案例讲完后我们讲具体的规范使用那么一起来看…之前都是介绍在普通项目中使用mock.js那么本次就来介绍一下在vue中使用mock.js实现前后端分离。安装npm install mockjs这里先写个小案例介绍一下具体使用写法不规范仅供参考。然后案例讲完后我们讲具体的规范使用那么一起来看看这个案例吧import Mock from mockjsexport default {name: FunctionsDbSource,methods:{// 接口测试init(){// 请求后端数据,查询数据源this.axios({method: get,url:${this.baseURL}/GetAll,headers: {Account: Admin,Password:888888}}).then((response) {console.log(response);}).catch((error) {console.log(error);});}},created(){Mock.mock(${this.baseURL}/GetAll, {users|5: [ {name: cname, //中文名称age|1-100: 100, //100以内随机整数birthday: date(yyyy-MM-dd), //日期city: city(true) //中国城市}]});this.init();}}首先引入了mock.js然后定义了一个方法用axios请求后台数据在创建后调用此方法然后我在创建后使用mock.js拦截请求模拟数据(这里我模拟的是一个5位长度的users数组)只要mock的url地址和请求的地址相同就会自动拦截请求。我们打印了一下请求的结果response大家可以看到和后端返回的数据格式一致只是里面内容是我们自己模拟的所以只要提前和后端商量好数据格式我们自己进行模拟数据完成界面得渲染等到后端写好数据接口到时候只要把mock部分删除就是我们自己想要的结果了。但是每个请求都这样在vue页面中去写mock后期删除起来也不方便可维护性低高耦合所以我们这里就涉及到规范的写法。1、安装npm install mockjs2、手动新建mock.js文件(当然新建文件夹把它抽离出来也是可以的)内容如下(根据实际需求更改)import Mock from mockjs // 引入mockjslet data users|5: [ {name: cname, //中文名称age|1-100: 100, //100以内随机整数birthday: date(yyyy-MM-dd), //日期city: city(true) //中国城市}]Mock.mock(/data/index, get, data) // 根据数据模板生成模拟数据3、main.js中引入(注意自己js文件的路径)// 引入mockrequire(./mock.js);4、页面中使用import Mock from mockjsexport default {name: FunctionsDbSource,methods:{// 接口测试init(){// 请求后端数据,查询数据源this.axios({method: get,url:data/index,}).then((response) {console.log(response);}).catch((error) {console.log(error);});}},created(){this.init();}}以此我们就完成了抽离mock.js之后只要往mock的js文件中添加请求即可后续只要等后端接口写好把main.js中的引入mock.js注释(删除)即可。还有一种更直接的方法因为mock只是我们生产环境需要的东西当我们发布上线肯定不需要这部分请求都会换成实际请求地址和数据所以直接把mock.js配置到生产环境上线部署打包不打包这部分即可就和vue中的代理部分上线是不会打包这部分的一样。感兴趣的童鞋可以自己去研究研究哈。以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持我们。时间 2019-07-22
