手记

vue-cli项目中使用mockjs模拟数据

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 < 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' // 设置默认请求的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

2人推荐
随时随地看视频
慕课网APP

热门评论

好文章呀,之前觉得写个json就可以了,但是如果数据数据随机性大,或者需要很多数据填充,那么手写的数据就捉襟见肘了,那么mockjs 真是一个不错的选择,虽然我用的不熟。

查看全部评论