Vue使用mockjs来生成模拟数据

野性酷女 2023-01-16 06:28 214阅读 0赞

# Mockjs生成模拟数据 #

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

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

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

npm i mockjs --save

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

**演示如下:**

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

// 引入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文件，表明我们要使用的模拟数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]

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`这个文件下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]

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

然后在对应的页面下就可以拿到模拟数据去使用了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 4]  
**关于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官网][mockjs]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70]: /images/20221022/1b18e8d5ad164249b4093f94548f5d0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221022/e6fa868b65f5489ba179dedce81ca3aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221022/722791888493420b8fddddf87b2e61d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221022/d03fb7973eb440c2b82b61de32e1a5bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221022/1d09cb2e06044182bb19a34de6af07cd.png
[mockjs]: http://mockjs.com/