vue实战（10）：开发店铺详情（一）

认真学习的样子

登录部分完成的比较扑街，本篇开始做店铺的详情页面,而这里的数据使用mock

0. 其它

---

vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）

1. 安装 mockjs 与设计数据

---

Mockjs： 用来拦截 ajax 请求, 生成随机数据返回

• 前端可以使用 mockjs 来自己做一些数据，而不用等待后端开发人员的接口，当然数据结构是需要与后端开发人员制定好的。
• 链接：mockjs官网
• 在项目中安装引入
  npm install mockjs --save
• 设计数据
  创建 mock 文件夹，并创建 data.json 文件与 mockServer.js 文件；
  data.json 文件为数据文件；
  mockServer.js 文件为应用数据文件；

/*
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 })

• 在 main.js 中引用（这边的引用类似引用css文件）
  import './mock/mockServer'

2. 创建模块与路由

---

• 创建模块
  在 views 文件夹下创建 Shop 文件夹并创建 ShopHeader.vue 文件，为商铺内容；
  在 Shop 文件夹下创建 Goods 文件夹并创建 Goods.vue 文件，为商品内容；
  在 Shop 文件夹下创建 Info 文件夹并创建 Info.vue 文件，为店铺活动等内容；
  在 Shop 文件夹下创建 Ratings 文件夹并创建 Ratings.vue 文件，为评价内容；

• 创建头部模块
  在 components 文件夹下创建 ShopTop 文件夹并创建 ShopTop.vue 文件，为商铺头部；

• 创建相应路由

   {
      path: '/shopheader', // 店铺详情
      component: ShopHeader,
      children: [
        {
          path: '/goods', // 内容
          component: Goods
        },
        {
          path: '/info', // 活动公告
          component: Info
        },
        {
          path: '/ratings', // 评价
          component: Ratings
        },
        {
          path: '',
          redirect: '/goods' // 默认
        }
      ]
    }

• ShopList.vue 添加点击事件
  在列表上添加点击事件，可以跳转详情页面 @click="$router.push('/ShopHeader')"
• 目录结构
  

3. 页面搭建与创建请求

---

• 搭建 HTML 与 css
  

• 创建请求
  1） 创建 ajax 请求

     /**
   * 获取商家信息
   */
  export const reqShopInfo = () => ajax('/info')
  /**
   * 获取商家评价数组
   */
  export const reqShopRatings = () => ajax('/ratings')
  /**
   * 获取商家商品数组
   */
  export const reqShopGoods = () => ajax('/goods')

2）在 vuex 中请求数据
与前面的请求数据方式相同，直接在原本的方法下面补充新方法

import { // 引入
  reqShopInfo,
  reqShopRatings,
  reqShopGoods
  } from '../../api/index'

const state = {
  goods: [], // 店铺商品
  ratings: [], // 评价
  info: {} // 店铺信息
}

const mutations = {
  RECEIVE_GOODS: (state, { goods }) => { // 店铺商品
    state.goods = goods
  },
  RECEIVE_INFO: (state, { info }) => { // 店铺信息
    state.info = info
  },
  RECEIVE_RATINGS: (state, { ratings }) => { // 评价
    state.ratings = ratings
  }
}

const actions = {
  // 异步获取商家信息
  async getShopInfo ({ commit }) {
    const result = await reqShopInfo()
    if (result.code === 0) {
      commit('RECEIVE_INFO', { info: result.data })
    }
  },
  // 异步获取商家评价列表
  async getShopRatings ({ commit }) {
    const result = await reqShopRatings()
    if (result.code === 0) {
      commit('RECEIVE_RATINGS', { ratings: result.data })
    }
  },
  // 异步获取商家商品列表
  async getShopGoods ({ commit }) {
    const result = await reqShopGoods()
    if (result.code === 0) {
      commit('RECEIVE_GOODS', { goods: result.data })
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

• 应用数据
  1）请求数据方法完成，到页面中看一下是否能获取到
  在 ShopHeader.vue 页面引用import { mapActions } from 'vuex'，
  然后mounted () { this.getShopInfo() }, methods: { ...mapActions('msite', ['getShopInfo']) }。
  2）在 ShopTop.vue 页面引用import { mapState} from 'vuex'，
  然后computed: { ...mapState('msite', ['info']) }，
  最后把得到的数据赋值到相应的位置。
  
• $\color{red}{一个小坑}$
  一开始在获取数据的时候报错了[vuex] unknown action type: msite，百度了半天也没有解决，原因是根据视频里面，在 ShopHeader.vue 页面方法写的是mounted () { this.$store.dispatch('msite',['getShopInfo']) }'这样的，讲道理应该是没有问题的，但是就是报错了，还是改用上面的方式就好了。

4. 结束

---

本篇结束，下面是页面上的tab切换部分，也就是3个子路由的页面。