Vue——mock模拟数据的使用

叁歲伎倆 2022-12-12 04:51 258阅读 0赞

### 在获取不到后台数据的时候我们也可以把页面搞起来 ###

*  生成随机数据
 *   *  1. 首先应该先建立一个json文件，把模拟数据写进去
     *  2. 安装
     *  3. 建立js文件，使用mockjs提供mock数据接口
     *  4.在main文件在加载js文件
 *  拦截ajax请求
 *   *  1. 不使用本地代理
     *  2.ajax请求后会影响store
     *   *  首先增加新的state变量，例如商家列表
         *  再者增加mutations
         *  最后增加actions并进行异步请求

# 生成随机数据 #

## 1. 首先应该先建立一个json文件，把模拟数据写进去 ##

## 2. 安装 ##

npm install mockjs

## 3. 建立js文件，使用mockjs提供mock数据接口 ##

阅读官网，mockjs的mock方法有以下几种

*  rurl 可选。  
    表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。
 *  rtype 可选。  
    表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
 *  template 可选。  
    表示数据模板，可以是对象或字符串。例如 \{ ‘data|1-10’:\[\{\}\] \}、’@EMAIL’。
 *  function(options) 可选。  
    表示用于生成响应数据的函数。
    
    1.  Mock.mock( rurl?, rtype?, template|function( options ) )  
        根据数据模板生成模拟数据。
    2.  Mock.mock( template )  
        根据数据模板生成模拟数据。
    3.  Mock.mock( rurl, template )  
        记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
    4.  Mock.mock( rurl, rtype, template )  
        记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
    5.  Mock.mock( rurl, rtype, function( options ) )  
        记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回

注意返回的模板template要和文档的一样，例如用code：0，表示请求成功

import Mock from 'mockjs'
    import data from './data.json'
    // 返回goods的接口
    Mock.mock('/goods', { code:0, data: data.goods})

## 4.在main文件在加载js文件 ##

import './mock/mockServer' // 加载mockServer即可

# 拦截ajax请求 #

## 1. 不使用本地代理 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]  
直接在ajax/index.js中  
注意没有加/api，还有要和mockjs的mock方法中的rurl一样

export const reqShopInfo = () => ajax('/info')

## 2.ajax请求后会影响store ##

### 首先增加新的state变量，例如商家列表 ###

export default { 
      goods: [], // 商品列表
      ratings: [], // 商家评价列表
    }

### 再者增加mutations ###

[RECEIVE_GOODS](state, { goods}) { 
        state.goods = goods
      }

### 最后增加actions并进行异步请求 ###

// 异步获取商家商品列表
      async getShopGoods({ commit}, callback) { 
        const result = await reqShopGoods()//请求mock模拟数据
        if (result.code === 0) { 
          const goods = result.data//获取结果
          commit(RECEIVE_GOODS, { goods})//更新数据
          // 数据更新了, 通知一下组件
          callback && callback()
        }
      }

[在线文档戳它][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9f7409334e0e47c3889baabab1538ddf.png
[Link 1]: http://mockjs.com/