vue - 使用mock.js模拟数据接口

482 阅读2分钟

Json模拟数据

设计json数据的结构

商家店铺界面包括点餐、评价、和商家信息三个部分的数据(头部显示的数据也是商家信息),而且这三个方面的数据直接没有顺序关系,可以使用对象结构来存储它们。

// 点餐数据里包括各种不同分类的食品,可以用数组goods[]来存放这些数据对象(没有顺序关系但属于同一类型)
// 每一类食品除了分类名称name还有一个foods数据来存放这一类的食品
// foods数组内的每个对象都是一个食品实例
{
    "goods":[
        {
            name: "精选套餐",
            foods: [
                {
                    name: "南瓜粥",
                    price: 9
                }
            ]
        }
    ],
    "ratings":[
        {}
    ],
    "info":{}
}
// 评价数据都属于同一类型,可以使用数组来存放[{评价一},{评价二}..]
// 商家信息数据没有顺序,可以统一保存到对象内
  • 将设计好的data.json模拟数据保存在mock文件夹内

使用mockjs模拟数据接口

npm install --save mockjs
  • 在mock文件夹下定义mockServer文件配置mock模拟数据的接口
/*
使用mockjs提供mock数据接口
 */
import Mock from 'mockjs'
import data from './data.json'

// 返回goods的接口
Mock.mock('/goods', {code: 0, data: data.goods})
// 返回ratings的接口
Mock.mock('/ratings', {code: 0, data: data.ratings})
// 返回info的接口
Mock.mock('/info', {code: 0, data: data.info})

// export default ???  不需要向外暴露任何数据, 只需要保存能执行即可
  • 在main.js中加载mockServer文件即可

    import './mock/mockServer.js'
    

ajax请求mockjs模拟的数据

  1. api/index.js中定义ajax请求方法

    /*
     * 获取商家信息(下列请求由mock拦截并返回 不需要代理)
     */
    export const reqShopInfo = () => ajax('/info')
    /**
     * 获取商家评价数组
     */
    export const reqShopRatings = () => ajax('/ratings')
    /**
     * 获取商家商品数组
     */
    export const reqShopGoods = () => ajax('/goods')
    
  2. 再写一套用来管理从后台接收到的数据vuex配置

    // 1. state
    goods: [], // 商品列表
    ratings: [], // 商家评价列表
    info: {} // 商家信息
    
    // 2. mutations-type
    export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组
    export const RECEIVE_RATINGS = 'receive_ratings' // 接收商家评价数组
    export const RECEIVE_INFO = 'receive_info' // 接收商家信息
    
    // 3. mutations
    [RECEIVE_INFO] (state, {info}) {
      state.info = info
    },
    
    [RECEIVE_RATINGS] (state, {ratings}) {
      state.ratings = ratings
    },
    
    [RECEIVE_GOODS] (state, {goods}) {
      state.goods = goods
    }
    
    // 4. action
    // 异步获取商家信息
      async getShopInfo ({commit}) {
        const result = await reqShopInfo()
        if (result.code === 0) {
          const info = result.data
          commit(RECEIVE_INFO, {info})
        }
      },
    
      // 异步获取商家评价列表
      async getShopRatings ({commit}) {
        const result = await reqShopRatings()
        if (result.code === 0) {
          const ratings = result.data
          commit(RECEIVE_RATINGS, {ratings})
        }
      },
    
      // 异步获取商家商品列表
      async getShopGoods ({commit}) {
        const result = await reqShopGoods()
        if (result.code === 0) {
          const goods = result.data
          commit(RECEIVE_GOODS, {goods})
        }
      }
    
  3. 在shop.vue中测试获取商家信息数据

    // 可以在控制台的vuex中查看到info数据
    mounted () {
    	this.$store.dispatch('getShopInfo')
    }