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模拟的数据
-
api/index.js中定义ajax请求方法
/* * 获取商家信息(下列请求由mock拦截并返回 不需要代理) */ export const reqShopInfo = () => ajax('/info') /** * 获取商家评价数组 */ export const reqShopRatings = () => ajax('/ratings') /** * 获取商家商品数组 */ export const reqShopGoods = () => ajax('/goods')
-
再写一套用来管理从后台接收到的数据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}) } }
-
在shop.vue中测试获取商家信息数据
// 可以在控制台的vuex中查看到info数据 mounted () { this.$store.dispatch('getShopInfo') }