首页 > 其他分享> > Vue使用mockjs来生成模拟数据

Vue使用mockjs来生成模拟数据

2021-04-24 14:59:10 作者：互联网

Mockjs生成模拟数据

在前端进行开发的时候，我们需要拿到后端的接口，然后调用进而拿到后端所提供的数据；但在实际情况当中，有可能后端的接口还没有设计好，但是你想要拿到数据进行测试，这个时候该怎么办呢？

这个时候，就该体现mockjs的作用了，它可以为我们提供模拟的数据，让我们在开发中便于测试，当后端接口设计好后，我们只需要将对应的接口请求函数的路径换掉，其他的地方不变，这样就大大提高了我们的开发效率。最近我也在写项目，然后遇到类似的问题，所以今天就特意总结了一下mockjs的基本使用！

一、首先，需要安装相应的依赖包

npm i mockjs --save

二、然后在项目对应的src下创建一个文该件夹`mockjs`，在这个文件夹内部创建一个`mock.js`的文件，在该文件内部，模拟mock产生的模拟数据格式。

演示如下:

引入mock.js
获取mock.Random对象
模拟数据：先创建一个生成数据的函数，在该函数内部创建一个空的数组dataList，然后使用for循环遍历产生对象，给每个对象添加所需要的相应的属性，然后将产生的对象添加到我们事先创建好的dataList当中，然后返回该数组。
请求本地的url路径，返回模拟的数据

代码如下：

// 引入mock.js
const Mock = require('mockjs')
// 获取mock.Random 对象
const Random = Mock.Random

// 模拟数据，包括标题、内容、创建时间
const data = function () {  
  let dataList = []
  for (let i = 0; i < 20; i++) {
    let dataObject = {
      title:Random.ctitle(), //Random.ctitle(min,max) 随机产生一个中文标题，长度默认在3-7之间
      content:Random.cparagraph(),  //Random.cparagraph(min,max) 随机生成一个中文段落，段落里句子个数默认3-7个
      createdTime:Random.date(),//Random.date() 指定生成的日期字符串格式
      img:Random.image(),// 生成默认图片
      username:Random.cname() //生成默认名字
    }
    dataList.push(dataObject)
  }
  return dataList
}

// 请求该url，就可以返回dataList
Mock.mock('http://localhost:8080/mock/mock_data',data)

三、在main.js中引入mock文件，表明我们要使用的模拟数据

在这里插入图片描述

四、在对应的 .vue文件来发送get请求获取数据

在这里插入图片描述

import {reqMockData} from '../../mockjs/reqMock' //引入模拟数据
export default {
  mounted(){
    reqMockData().then(res=>{
      console.log(res)
      this.mockData = res.data
    })
  },
  data() {
    return {
      active: 2,
      mockData:[]
    };
  },

我将模拟的数据单独搞到了这个reqMock.js这个文件下
在这里插入图片描述

import axios from "axios";

// 请求模拟数据
export const reqMockData = ()=>axios.get('http://localhost:8080/mock/mock_data')

然后在对应的页面下就可以拿到模拟数据去使用了
在这里插入图片描述
关于Mock.mock()的参数：

Mock.mock( rurl, rtype, template|function( options ) )
  rurl
    可选。
    表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 '/domian/list.json'。
          
  rtype
    可选。
    表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
          
  template
    可选。
    表示数据模板，可以是对象或字符串。
    数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
    // 属性名 name
    // 生成规则 rule
    // 属性值 value
    'name|rule': value
    例如：'name|1-10':1 会产生一个1-10之间的整数，详细规则参见官方文档
          
  function(options)
    可选。
    表示用于生成响应数据的函数。
      options
      指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

更多的相关操作可以去mockjs官网去查找！
mockjs官网