Vue实战商城项目（十一）—— 分类页

---

前言

本章概述：页面布局，数据获取与切换功能的实现

---

一、页面布局

分类页分为左侧导航栏部分以及右侧内容部分，两部分组成，左侧导航栏我们可以封装成一个组件，右侧内容部分我们可以分多个组件进行封装。

关于样式的问题，这里就不多做阐述。

二、数据获取与切换功能的实现

1.分类页的数据

	分类页的数据我们同前面一样的方法请求过来保存到data中，需要注意的是左侧导航栏里面的内
	容同样是从服务器请求过来的数据进行渲染的，并不是我们写死的数据。

代码如下（示例）：

export function getCategory() {
  return request(
    {
      url: '/category',

    }
  ).catch(err => err)
}

值得注意的是右侧的数据同之前一样是需要传入对应参数才能请求过来的，右侧分三列的商品数据展示则需要传入两个参数

// 右侧图文等数据
export function getSubcategory (maitKey) {
  return request({
    url: '/subcategory',
    params: {
      maitKey
    }
  }).catch(err => err)
}
// 右侧下方三个分类数据
export function getSubCategoryDetail(miniWallkey,type) {
  return request({
    url: '/subcategory/detail',
    params: {
      miniWallkey,
      type
    }
  }).catch(err => err)
}

2.切换

左侧导航栏中每一项都有对应的maitKey，每点击一次就将其对应的maitKey传给父组件（分类页）并保存到data中。
代码如下（示例）：

//点击左侧导航栏从子组件中获取相关数据并保存在data中
          activeIndex(data){
            this.currentIndex = data.index;
            this.maitKey = data.maitKey;
            this.miniWallkey = data.miniWallkey

            this.getSubcategory(data.maitKey)
            this.getSubCategoryDetail(data.miniWallkey,this.currentType)
          }

得到maitKey后则可获取到右侧对应的图文数据，拿到数据后进行渲染即可。右侧下边三列商品数据同理。

    //右边分类
        getSubcategory(maitKey){
            getSubcategory(maitKey).then(res=>{
              this.subCategoryList = res.data.list;
            })
        },

        getSubCategoryDetail(miniWallkey,type){
          getSubCategoryDetail(miniWallkey,type).then(res=>{
            this.goods[type] = res
          })
        }

---

总结

简单对分类页进行了讲解，因为分类页并没有新的知识点，所以我们过一下即可。当做对之前知识点的巩固。值得注意的是下边三列商品数据展示所用的组件是我们之前封装好的组件，这里体现了组件的复用和封装的好处。