vue+mock.js实现前后端分离


Posted in Javascript onJuly 24, 2019

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离。

安装:

npm install mockjs

这里先写个小案例介绍一下具体使用,写法不规范,仅供参考。

然后案例讲完后我们讲具体的规范使用

那么一起来看看这个案例吧:

<script>
 import Mock from "mockjs"
 export 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();
  }
 }
</script>

首先引入了mock.js,然后定义了一个方法,用axios请求后台数据,在创建后调用此方法,然后我在创建后使用mock.js拦截请求,模拟数据(这里我模拟的是一个5位长度的users数组),只要mock的url地址和请求的地址相同,就会自动拦截请求。

我们打印了一下请求的结果response:

vue+mock.js实现前后端分离

大家可以看到,和后端返回的数据格式一致,只是里面内容是我们自己模拟的,所以,只要提前和后端商量好数据格式,我们自己进行模拟数据,完成界面得渲染,等到后端写好数据接口,到时候只要把mock部分删除,就是我们自己想要的结果了。

但是每个请求都这样在vue页面中去写mock,后期删除起来也不方便,可维护性低,高耦合,所以我们这里就涉及到规范的写法。

1、安装:

npm install mockjs

2、手动新建mock.js文件(当然新建文件夹把它抽离出来也是可以的)

内容如下(根据实际需求更改):

import Mock from 'mockjs' // 引入mockjs
 
let 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文件的路径)

// 引入mock
require('./mock.js');

4、页面中使用:

<script>
 import Mock from "mockjs"
 export 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();
  }
 }
</script>

以此我们就完成了抽离mock.js,之后只要往mock的js文件中添加请求即可,后续只要等后端接口写好,把main.js中的引入mock.js注释(删除)即可。

还有一种更直接的方法,因为mock只是我们生产环境需要的东西,当我们发布上线肯定不需要这部分请求,都会换成实际请求地址和数据,所以直接把mock.js配置到生产环境,上线部署打包不打包这部分即可,就和vue中的代理部分,上线是不会打包这部分的一样。

感兴趣的童鞋可以自己去研究研究哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
js异或加解密效果代码
Jun 25 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
详解原生js实现offset方法
Jun 15 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
解决vue 表格table列求和的问题
Nov 06 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python count函数使用方法实例解析
2020/03/23 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
护理专业推荐信
2013/11/07 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
2014年安全员工作总结
2014/11/13 职场文书
淘宝好评语句大全
2014/12/31 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python
Python IO文件管理的具体使用
2022/03/20 Python