mockjs.png
为何
之前写过一篇文章 vue-cli 项目中怎么 mock 数据?, 虽然这种方法不错, 但是显然存在一个很明显的弊端, 那就是要自己手写数据, 因此我现在推荐大家使用 http://mockjs.com/ , 至于好处大家就手动点进去了解啦.
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 <10; i++) {
- let post = {
- title: Random.csentence(10, 25), // 随机生成长度为 10-25 的标题
- icon: Random.dataImage('250x250', '文章 icon'), // 随机生成大小为 250x250 的图片链接
- author: Random.cname(), // 随机生成名字
- date: Random.date() + ' ' + Random.time() // 随机生成年月日 + 时间
- }
- posts.push(post)
- }
- // 返回状态码和文章数据 posts
- return {
- code,
- posts
- }
- }
- // 定义请求链接, 类型, 还有返回数据
- Mock.mock(`${domain}/posts`, 'get', postData);
- main.js
- import Mock from './mock' // 刚刚手写的 mock.js 文件
- import axios from 'axios' // axios http 请求库
- axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的 url
- Vue.prototype.$http = axios
组件中
- this.$http.get("/posts").then(res => {
- console.log(res);
- });
data.png
注意
get 请求有带参数时, 请把接口 url 写为正则匹配, 否则匹配不到就报错 (Mock.mock('此处为正则')
如果您喜欢这篇文章, 那么记得动动你们的, 给个 like 或者关注我哦.
来源: http://www.jianshu.com/p/aea89b5e6d33