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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
XENON基于JSON变种
Jul 27 Javascript
了解一点js的Eval函数
Jul 26 Javascript
js获取图片宽高的方法
Nov 25 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
js中less常用的方法小结
Aug 09 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
js实现计算器功能
Aug 10 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
Symfony数据校验方法实例分析
2015/01/26 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
js left,right,mid函数
2008/06/10 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
js实现json数组分组合并操作示例
2019/02/12 Javascript
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python实现多属性排序的方法
2018/12/05 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
新教师工作感言
2014/02/16 职场文书
会计专业导师推荐信
2014/03/08 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
党员民主评议自我评价
2014/10/20 职场文书
个性与发展自我评价
2015/03/06 职场文书
结婚典礼主持词
2015/06/29 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
七年级作文之冬景
2019/11/07 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
关于Vue中的options选项
2022/03/22 Vue.js
关于EntityWrapper的in用法
2022/03/22 Java/Android