vue外卖十四：商家详情：用mockjs模拟api数据接口

1）安装mockjs

官网：mockjs.com
文档：https://github.com/nuysoft/Mock/wiki/Getting-Started
http://mockjs.com/examples.html

cnpm install mockjs --save

2）创建目录/文件

2.1使用mockjs形成数据src/mock/mockServer.js

/*
使用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 ???  不需要向外暴露任何数据, 只需要保存能执行即可

2.2引入，用于打包编译src/main.js

// 入口文件
import Vue from 'vue'
import App from './App'
import router from './router/index.js'
import store from './store' //引入vuex管理状态
import {Button} from 'mint-ui'
import './mock/mockServer' // 【1】加载mockServer即可
// 注册全局组件
Vue.component(Button.name, Button)

// 2.0新版本es6写法
new Vue({
	el: '#app',
	render: h => h(App),
	router,
	store
})

/*
 //1.0版写法
 new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})*/

2.3mock/data.json

据页面设计稿写出数据结构，一层示例

{
  "info": {
    "name": "嘉禾一品（温都水城）",
    "description": "硅谷专送",
    "deliveryTime": 28,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "distance": "1000m",
    "bulletin": "是以粥为特色的中式营养快餐，自2004年10月18日创立“嘉和一品”品牌至今，不断优化管理，积极创新，立足于“贴近百姓生活，服务千家万户”",
    "supports": [
    	{
        "type": 0,
        "name": "首单",
        "content": "新用户下单立减17元(不与其它活动同享)"
      },
    ],
    "category": "包子粥店, 简餐",
    "phone": "18501083744",
    "address": "北京市丰台区太平桥44号",
    "workTime": "09:35-24:00"
  },
  "goods": [
    {
      "name": "优惠",
      "icon": "https://fuss10.elemecdn.com/b/91/8cf4f67e0e8223931cd595dc932fepng.png",
      "foods": [
        {
          "name": "南瓜粥",
          "price": 9,
          "oldPrice": "",
          "description": "甜粥",
          "sellCount": 91,
          "rating": 100,
          "info": "主、辅料:水、大米、南瓜、冰糖等",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "很喜欢的粥",
              "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
            },
           ]
	]
  "ratings": [
    {
      "username": "3******c",
      "rateTime": 1469281964000,
      "deliveryTime": 30,
      "score": 5,
      "rateType": 0,
      "text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
      "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
      "recommend": [
        "南瓜粥",
        "皮蛋瘦肉粥",
        "扁豆焖面",
        "娃娃菜炖豆腐",
        "牛肉馅饼"
      ]
    },
  ]
}

3）ajax请求 api/index.js

//获取mockjs模拟的后端商家数据
export const reqShopGoods=()=>ajax('/shop_goods') //食物列表 不加api，此请求不从代理走
export const reqShopRating=()=>ajax('/shop_rating') //评价列表
export const reqShopInfo=()=>ajax('/shop_info') //商家信息

4）vuex状态相关store/

4.0 state.js 状态保存

export default{
  ...略过
  goods: [], // 【1】商品列表
  ratings: [], // 【2】商家评价列表
  info: {}, // 【3】商家信息
}

4.1 mutation-types.js 改变类型-方便维护

export const RECEIVE_GOODS = 'receive_goods' // 【1】接收商品数组
export const RECEIVE_RATINGS = 'receive_ratings' // 【2】接收商家评价数组
export const RECEIVE_INFO = 'receive_info' // 【3】接收商家信息

4.3 mutations.js 改变状态

import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS,
  RECEIVE_USER_INFO,
  RESET_USER_INFO,
//【1】商家相关以下3个
  RECEIVE_INFO,
  RECEIVE_RATINGS,
  RECEIVE_GOODS,
} from './mutation-types.js'

export default{
	//中括号为计算属性名es6语法：作用是动态的写出当前函数名，方便后期维护
	...
	//【2】商家相关以下三个
  [RECEIVE_INFO](state,{info}){state.info=info},
  [RECEIVE_RATINGS](state,{rating}){state.rating=rating},
  [RECEIVE_GOODS](state,{goods}){state.goods=goods}
}

4.4 actions.js 触发mutation

知识点：action的 callback参数
async getShopRatings({commit}, callback) {
…
// 【新知识点】数据更新了, 通知一下组件
callback && callback()
},

// 控制mutations
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS,
  RECEIVE_USER_INFO,
  RESET_USER_INFO, //退出mutaion-types
  RECEIVE_INFO,//【1】以下3个商家相关
  RECEIVE_RATINGS,
  RECEIVE_GOODS,
} from './mutation-types.js'
import {
  reqAddress,
  reqFoodCategorys,
  reqShops,
  reqUserInfo, //获取session的用户信息
  reqLogout, //退出登录
  reqShopGoods,// 【2】以下3个商家相关请求
  reqShopRating,
  reqShopInfo,
} from '../api/index.js'

export default{
	//获取地址用于改变状态
	async getAddress({commit,state}){
		//构造纬,经度参数用于请求
		const geohash=state.latitude+','+state.longitude
		const result=await reqAddress(geohash)
		// 提交一个状态改变
		if(result.code===0){
			const address=result.data
			//提交mutation，commit(对象名,对象值)
			commit(RECEIVE_ADDRESS,{address})
		}
	},

	...略过

	//【3】商家信息
	async getShopInfo({commit}){
		const result=await reqShopInfo()
		if(result.code==0){	
			const info=result.data
			commit(RECEIVE_INFO,{info})
		}
	},

	// 【4】异步获取商家评价列表
  async getShopRatings({commit}, callback) {
    const result = await reqShopRatings()
    if (result.code === 0) {
      const ratings = result.data
      commit(RECEIVE_RATINGS, {ratings})
      // 【新知识点】数据更新了, 通知一下组件
      callback && callback()
    }
  },

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

5）src/pages/shop/shop.vue 用vuex的action发起ajax请求并触发mutation，再把数据放入state中

<script>
	import ShopHeader from '../../components/ShopHeader/index.vue'
	export default{
		mounted(){
			//【1】调用action发ajax请求，并放入vuex
			//getShopInfo源自actions.js函数名
			this.$store.dispatch('getShopInfo')
		},
		components:{...略过}
	}
</script>

效果：http://localhost:8080/#/shop/goods

查看vue开发者插件中info信息：