vue项目中mockjs的使用

Posted 志在指尖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中mockjs的使用相关的知识,希望对你有一定的参考价值。

mock.js是一个库,源码托管:https://github.com/nuysoft/Mock

github上的原话:Mock.js是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开,并减少某些单调性,尤其是在编写自动化测试时。

mockjs的原理是替换原生的XMLHttpRequest,来达成本地数据模拟请求。

优点:

1、不用改变现有的请求代码,后续后端给予开发的API后再进行关闭即可。

2、提供丰富的数据类型,但无法支持blob类型,所以无法模拟下载


 

// 此处使用vue-cli3进行模块化开发。

安装:npm install mockjs

// 直接引入也行

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

更多如Amd等其他使用方法,还是看官方的好。

使用:

 1 // 创建一个mock.js文件,来进行初始化(mock/index.js也行,习惯看个人)
 2 
 3 import Mock from ‘mockjs‘  // 导入mockjs
 4 // 可以引入数据
 5 import  xxx from xxx
 6 
 7 // 这里先写个简单的模拟数据,数据为json数据
 8 home = {
 9     ‘error_code‘: 0,
10      msg: ‘成功‘,
11      data: {xxxxx}
12 }
13 
14 // 使用Mock.mock方法,。
15 // Mock.mock(rurl?, rtype?, template|function(option))
16 // 三个参数: 一、rurl,用来匹配请求的URL。可以是字符串,也可以是正则表达式
17 // 二、rtype为处理什么请求,如get,post
18 
19 Mock.mock(‘/home/’, get, home) 

请求:

1 // 此处使用axios进行请求
2 
3 axios.get(‘/home‘).then(res => {
4     console.log(res.data)  // 打印出来就是模拟的数据home了   
5 })

注:记得需在入门文件main.js中引入mockjs来做初始化

 

以上是关于vue项目中mockjs的使用的主要内容,如果未能解决你的问题,请参考以下文章

mockjs的增删改查(vue)

在vue-cli项目中mockjs和vConsole的使用

vue项目中使用mockjs模拟接口返回数据

mockjs 的使用步骤

vue+mockjs 模拟数据,实现前后端分离开发

mockjs 使用简介