mockjs.png
为何
之前写过一篇文章vue-cli项目中怎么mock数据?，虽然这种方法不错，但是显然存在一个很明显的弊端，那就是要自己手写数据，因此我现在推荐大家使用mockjs，至于好处大家就手动点进去了解啦。
vue-cli项目中如何使用
在项目中安装mockjs、axios（http请求库）
cnpm install mockjs axios --save
在项目中新建一个mock.js文件，用于定义接口返回的数据
在main.js引入mock.js
mock.js
const Mock = require('mockjs') // 获取mock对象const Random = Mock.Random // 获取random对象，随机生成各种数据，具体请翻阅文档const domain = 'http://mockjs.com/api' // 定义默认域名，随便写const code = 200 // 返回的状态码// 随机生成文章数据const postData = req => {
console.log(req) // 请求体，用于获取参数
let posts = [] // 用于存放文章数据的数组
for (let i = 0; i main.js
import Mock from './mock' // 刚刚手写的mock.js文件import axios from 'axios' // axios http请求库axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的urlVue.prototype.$http = axios
组件中
this.$http.get("/posts").then(res => { console.log(res);
});
data.png
注意
get请求有带参数时，请把接口url写为正则匹配，否则匹配不到就报错（Mock.mock('此处为正则'）
作者：daydreammoon
链接：https://www.jianshu.com/p/aea89b5e6d33
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4758/viewspace-2810096/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
