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的使用的主要内容，如果未能解决你的问题，请参考以下文章