Introduction

  茶叶项目是今年上半年做的，主要是做一个关于茶叶的安全溯源系统，涵盖茶叶的种植、采收、加工、物流和销售这五大方面，系统负责汇集并管理这五个阶段产生的信息，从而进一步实现对茶叶质量与安全的监控和追踪。而我主要参与加工和销售模块的前端实现。

  前端技术栈主要是：vue + vue-router + axios + element-ui
  其实，对于我们前端小组来说，我们大多数人包括我，在刚接到项目的时候对vue框架都不是十分熟悉，这导致我们在用vue去做时，遇到许多的坑，也没有充分利用组件化的思维去实现，导致组员做了很多重复的东西。我做到后期对vue有了进一步的了解，于是想重新从零开始重构一下我负责的模块，但是由于后期项目基本定型，而我的重构会造成大面积的改动，所以我只能自娱自乐了呗，技术还是要融合一下滴！

Idea

大部分界面基本如下：

我的想法：

• 利用动态路由和嵌套路由匹配，实现组件的层层拼接，形成完整的页面。
• 对于各个页面（主要是表格区）的所特有的信息的展示，比如表头字段、操作对应的后台接口url，则通过定义一个个类似配置文件的js文件，在路由匹配时，通过vue的路由钩子读取相应配置文件的信息，并props传递给子组件，从而实现table表头的切换和组件模板的重用。
• 其实路由的路径结构与嵌套对象的结构很像（从vue-router的嵌套路由受到的启发），可以直接利用路由路径的结构去设计配置文件里的js嵌套对象，什么样的嵌套路径，就读取配置文件的哪部分js嵌套对象，达到统一的结构。

流程图如下：

Analysis

抽离出组件

每个界面基本可以抽离出header、侧边的nav和中间的tabs组件以及tabs里的table子组件，如下：

分析各个组件担当的角色

• 对于header和nav组件，这两个主要充当导航的角色，基本上是使用router-link实现路由跳转
• 对于tabs组件，主要进行路由解析、根据解析结果读取配置文件和将配置信息props给子组件table，起一个中转站和路由解析器的作用
• 对于table组件，主要向用户提供表格的各项功能操作。由于多数界面的功能操作都类似，对于不同界面，只要切换功能操作的后台接口url就基本可以实现table各项功能逻辑的重用

确定组件的对外接口或核心部分

• header和nav没有特别的对外接口
• tabs也没有特别的对外接口，不过，它的核心是路由钩子里的路由解析函数，
   这个函数接受路由钩子里的to和from路由信息，以及tabs组件实例，作为函数参数。
   由于之前说过用路由路径去设计配置文件里的js对象，所以，函数里的路由解析基本上是利用to路由信息动态匹配到的params，去配置文件找对应信息对象，并将其传给table子组件，使table组件的显示根据路径而定制化。
   此外，该函数还可以处理错误的路径，大致实现：如果根据该路径获取不到配置信息，函数则强制跳转到某些路由下。
• table组件可以再划分为几个小区域，如图：
  

每个区域对应相应的table组件的props接口数据，注意接口数据的部分属性名直接对应element-ui组件的接口属性

table组件的props接口分别是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

tabLabel:'',//对应table所在的el-tab-pane的label
active:true,//tabs父组件通过active指定当前table是否active，亦指table所在el-tab-pane是否active
searchObj:{
  placeholder:'',//搜索框的placeholder
  label:'',//搜索按钮上的文字
  suburl:''//搜索请求的子路径
},
pageObj:{
  suburl:'',//向后台请求分页数据的子路径
  sizes:[],//对应el-pagination组件的pageSizes属性
},
operateObj:{
  add:{
    label:'新建',//表格左下角的操作按钮上的文字
    suburl:''//操作对应的请求的子路径
  },
  upload:{
    label: '导入',//上传按钮的label
    suburl: '',//后台接口子路径
    dialogTitle:'导入客户信息',//上传dialog的title
    dialogTip:'客户类型、所属公司、联系人、联系电话、传真、地址、等级、备注',//上传dialog的文字tips
  },
  exportIt:{
    label: '导出',
    suburl: customerURL + '/exportExcel',
  }
},
tableObj:{
  heads:[//el-table的表头信息
    {
      prop:'',//对应el-table-column的prop,
      label:'',//对应el-table-column的label
      sortable:true,//对应el-table-column的sortable
      width:'20',//对应el-table-column的width
    }
  ],
  operate:{
    update:{
      label:'编辑',//表格每行的操作按钮的label
      suburl:'',//操作对应的后台接口子路径
    },
    deleteIt: {
      label: '删除',
      suburl: '',//后台接口子路径
    }
  },
},

 table组件的功能操作挺多的，就不一一说了，这篇blog就单纯讲一下重构的大概思路吧。

  写完了，第一次正式写blog，Enjoy!

  由于项目原因，我主要放了我负责并重构的销售部分，一些关键文件也删了，大家就看看代码好了吧~

  重构部分的茶叶项目github