vue2 elementUI 模拟chartgpt对话

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

• 生成随机数据

• 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. 不使用本地代理

直接在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()
    }
  }