猿实战09——实现你设计的类目系统

猿实战是一个原创系列文章，通过实战的方式，采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统，跟着教程走下来，变身猿人找到工作不是问题。更多精彩内容，敬请大家关注公主号猿人工厂，点击猿人养成获取！

上两个章节，猿人君教会了你如何通过设计落地实现了属性库，今天我们继续来实现系统的另一个基石地位的模块——后台类目。

为什么会有后台类目

大家都知道，商品是可以分类的，比如手机、电脑、数码、生鲜、这些名词的背后，都代表着不同类别的商品。那么我们对商品做分类，按照类别去分就可以了。那搞出后台类目这几个字，您是几个意思？

其实呀，能够称得上主流电商网站的商品都非常多（jd亿级，tb十亿级都挡不挡得住另外讲），商品和类目是有关联的，就不用掰扯了。就说类目，它是一棵树，商品的细分会导致树的层级越来越深。如果买家直接使用后台类目，那么查找商品会变得越来越困难。从运营层面去考虑，如果运营人员在调整类目时，都需要去变更商品的类目，那么工作量绝对是海量的。但是运营这个事情又是长期的，经常随着节日、季节变化而做出相应的调整，如果不解决这个问题，离关门大吉也不远了。

所以从设计上来看，前台类目和后台类目，必须分离了。后台类目相对固定，建立了就不要轻易改动了。用后台类目去应对商家或供应商（自家玩耍的也算），大家都做生意，朝令夕改，会导致都不想和你玩耍的，这样子做也便于建立标准化的商品服务，也利用后续仓储的库存分类分区管理。

 

前台类目面向用户，方便用户查找商品，方便运营根据销售策略及时调整，甚至可以针对不同的客户端进行不同的设置（PC\M\APP终端大小都不同），前、后台类目之间可以通过建立关联关系，方便以后台类目为基础，快速调整去适应前台的运营策略。

 

功能概览

在之前的文章中猿设计5——真电商之颠覆你的类目认知，我们其实已经分析过类目的设计了，简而言之，类目更像是一片森林，而属性更像是森林里的各种元素，动物，植物，而后台类目将作为一条主线，负责串联着这些最近本的元素，维护着生态平衡。

聊这些话题，可能有些为时过早，不过在这之前，我们可以先看一看类目的功能。

在后台类目模块中，后台类目体现了一种典型的层级关系，每一级类目都有对应的列表、新增/编辑功能。同时，在每一级后台类目都可以绑定相应的属性，用于赋能类目下的商品特性（本章节暂不讨论）。

数据库设计

根据之前的后台类目设计文章，我们很清楚的获知了后台类目的一些特征，我们根据之前的设计，将这些设计落地为数据库的物理设计，大家可以看一下。

就类目而言，类目就像是一棵树，每一级类目都有可能有下一级类目，像这种特性，在数据库的设计上，是一种典型的自关联结构。但是类目用于检索时，往往伴随着层级关系的查找，比如提取某一级类目的信息。所以，我们在设计时，给予了一个level字段，用于方便提取固定层级的信息。

后台类目整体前端

类目的层级维护，从功能上讲，依然是一种整体和部分的关系，出于业务的考虑，在规模不是特别庞大的情况下，三级已经足够支撑你的运营。我们可以参考下之前的实现思路——将一级类目、二级类目、三级类目分别定义成小的组件。最后，由一个view来组织和整合它们就好了。

<template>
  <div id="backgroundCategoryDiv">
    <div v-if="oneCategoryShow">
      <backgroundCategoryOneSearch ref="backgroundCategoryOneSearch" @lookSubordinate="lookOneSubordinate" />
    </div>
    <div v-if="twoCategoryShow">
      <backgroundCategoryTwoSearch ref="backgroundCategoryTwoSearch" :pid="parentId" :pname="parentName" @lookSubordinate="lookTwoSubordinate" @returnBack="returnTwoBack" />
    </div>
    <div v-if="threeCategoryShow">
      <backgroundCategoryThreeSearch ref="backgroundCategoryThreeSearch" :pid="parentId" :pname="parentName" @returnBack="returnThreeBack" />
    </div>
  </div>
</template>
 
<script>
import backgroundCategoryOneSearch from '@/components/productManage/backgroundCategoryOneSearch'
import backgroundCategoryTwoSearch from '@/components/productManage/backgroundCategoryTwoSearch'
import backgroundCategoryThreeSearch from '@/components/productManage/backgroundCategoryThreeSearch'
export default {
  components