码迷,mamicode.com
首页 > Web开发 > 详细

vue项目中mockjs的使用

时间:2020-04-30 23:10:13      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:模拟   一个   asc   使用方法   模拟请求   编写   sof   fun   入门   

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的使用

标签:模拟   一个   asc   使用方法   模拟请求   编写   sof   fun   入门   

原文地址:https://www.cnblogs.com/lsAxy/p/12811395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!