最近一个朋友找我开发一个用于库存管理的后台，虽然逻辑并不是很复杂而且系统也并不是很大，但是因为存在一些定制需求，所以就希望通过自行开发，而不是直接使用目前市场上的库存管理后台。我也正好最近在研究一些新的前端框架，这次开发周期并不是很紧，所以也就正好可以给我对于一些之前没有使用过的前端框架练练手。

为什么选vue-element-admin

因为有段时间没有直接开发PC端前端项目了，这次接到项目之后，从网上搜索了一下目前比较流行的前端开发框架，看看是否可以选择适合的框架，而且可以通过这个项目研究一下目前一些新框架的结构。看了不少关于前端框架的排名文章，包括GitHub等网站上最近几年关于前端框架的热门程度，最近几年比较热门和流行的主要集中在React、Angular和Vue这三者上。在根据这些框架找了一些资料，发现Vue和Angular目前更适合网络应用的开发，React更适合手机App的跨平台开发。

对于Vue和Angular更近一步的研究，发现基本上两者功能上还是比较接近的，虽然Angular比较稳定，但是目前国内Vue的开发者相对比较多，考虑到之后朋友的这套系统可能会自己找团队来维护以及扩展，所以还是选择了基于Vue框架来开发。因为Vue可以算是非常流行的前端开发框架，有很多前端组件库都是基于Vue或者支持Vue的。我个人认为还是找一个大厂开源的组件库会比较靠谱一点，应该会相对成熟一些（不过还是最终还是碰到一些坑的），也就选择了eleme开发团队的element-ui，相对来说组件比较齐全，而且可以直接通过模版来摸索。

vue和element-ui对于管理后台有个不错的开源项目vue-element-admin，虽然vue-element-admin只能算是将element-ui和vue做了一个结合，不过项目里面还是封装了不少基础的功能，例如封装了axios来简化了接口的请求等。而且vue-element-admin包括了一个全功能展示的Demo和一个Starter模版，可以非常容易的开始框架的熟悉和着手开发。

开发的一些心得

模版中的Mock数据转换成本地数据库

因为vue-element-admin是一个纯前端的框架，为了效果展示直接使用了Mock.js来模拟数据接口的调用。我为了直接可以连接我开发的后端接口，我碰到一个问题就是跨域调用的问题，因为前端代码在开发模式下是运行在vue-cli自带的服务器上，然后我的后端接口是运行本地Apache服务器上，虽然在一个电脑上，但是因为是两个不同的服务器（实际上调用ip都是相同的，只是端口不同），所以还是要解决跨域调用问题。可惜的是在vue-element-admin的文档上虽然提到了跨域问题，但是解决方案只是简单了说了一句在开发环境下建议使用Proxy的方式。最终通过对Webpack设置的一些研究，解决了Proxy设置的问题。也就是将接口指向的文件夹映射到本地Apache服务器上相应的文件夹。可以将如下的配置添加在vue.config.js中的module.exports中

devServer: {
    proxy:{
      "/api": {
        target: "http://localhost/",
        changeOrigin: true,
      }
    },
    port: 80,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
  },

路由的设置

接下来就是添加相应的页面了，这步vue-element-admin直接对于vue-router做了拓展，用过添加了meta参数来实现侧边栏的导航和权限设置功能。尤其是权限和路由的绑定对于管理后台还是非常重要的，毕竟系统的使用者有不同的角色和相应的查看使用权限。这里的路由分为固定路由以及动态路由，而且对于侧边栏可以选择显示路由和隐藏路由，例如登录和注册页面就属于隐藏路由不包括在侧边内。固定路由就是无论用户权限都可以查看的页面，动态路由是根据用户的权限不同选择性显示的。在设置路由的时候，还是注意一点就是虽然通配符来拦截的404页面是固定路由，但是需要添加在动态路由内，而且要添加在最后，不然的话在这个通配符之后的页面都不会显示出来。下面是我项目一个只有超级管理员和管理员才能查看的页面路由配置：

{
    path: '/log',
    component: Layout,
    alwasyShow: true,
    redirect : '/log/index',
    meta: {
      title: "日志",
      icon:"el-icon-notebook-2",
      roles:["superadmin","admin"]
    },
    children: [
      {
        path: 'index',
        name: 'Log',
        component: () => import('@/views/logs/index'),
        meta: { title: '操作日志', icon: 'el-icon-notebook-2', roles:['superadmin','admin']}
      }
    ]
  }

权限设置

配置完系统的页面和路由之后，就是设置用户权限了，vue-element-admin模版中只配置了两个用户权限admin和editor，实际上权限设置还是比较简单的，首先根据系统的开发需求设计不同的用户角色，例如这次这个系统中我就设计了5个不同的角色，这样的话，只需要在加载用户数据的时候由后端将用户所属的角色以数组形式返回，然后在状态管理中给user添加roles的参数就能在不同页面和组件中读取权限，便于对于不同权限不同显示的实现。不过这个里面有个小坑，就是因为我的管理员角色被命名为superadmin，和原本模版中的命名，admin不一致，一开始也没有找到如何对其做修改。最后对于整体代码梳理了一遍，才发现在状态管理文件夹下有一个permission文件来实现按权限实现动态路由的功能，这里直接将角色为admin的用户展示全部可显示的页面，只需要将这里判断条件改为自己管理员角色就可以了。代码如下：

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
        let accessedRoutes
        if (roles.includes('superadmin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

表格使用

对于库存管理后台，表格是最核心的展示组件。element-ui的表格组件整体来说还是功能非常完善的，可以直接通过配置列来完成整个表格的渲染，而且融合一些表格基础操控，例如直接通过添加一个sortable参数就可实现列的排序功能。简单说一下我在这个项目使用到的一些功能吧

基础的数据列表

直接通过后端传入的数据列表可以通过配置el-table-column中的prop属性来展示相应的数据项，只需要将相对应的数据数组赋值到el-table定义的data属性相对应的变量上就可以直接展示基础的表格数据了，这样对于基础展示的表格非常便捷，基本上对于配置好的表格结构只需要一行赋值代码就能解决了。

自定义单元格

虽然一半以上的表格数据展示都可以直接展示的，不过还是有一些列的展示方式不同或者说需要对于后端返回的数据做一些处理，这就可以用到el-table-column中formatter属性来回调一个处理数据展示格式的函数，不过有一点是formatter函数只能返回字符串而不能添加HTML标签来做更丰富的自定义，所以理论上formatter的作用只是局限于数据格式的调整，例如在我这个项目中，需要将库存数字转换成万件单位的，那就可以用如下的函数来处理，而且能通过列中的property对于一些列做特殊处理

	countCellFormater(r, c, value, index) {
      if (c.property == "pack_count") {
        if (value != 0) {
          var return_count = new Number((value * r.item.pack_size) / 10000);
          return value + "包（计：" + return_count.toFixed(2) + "万件）";
        }
      }
      if (value == 0) {
        return "-";
      } else {
        var return_count = new Number(value / 10000);
        return return_count.toFixed(2) + "万";
      }
    }

如果需要更丰富的展示方式，需要用到el-table-column的slot，这样通过定义slot-scope可以读取每行的数据以及相应行的下标，这样的就更自由了，不但可以以更丰富的样式展示数据，也可以将多个数据列组合在一起展示。

表格筛选

表格筛选的配置也比较直观，就是筛选条件数组（filters）和筛选处理函数（filter-method）来实现，筛选数组可以是固定的字符串数组或是通过调用函数来返回相应列的动态筛选条件数组，然后filter-method就是通过对于相应的数据属性和选择的筛选条件做比对就可以了。一般来说筛选条件会将数据相应属性中重复的内容剔除后的数组，不过像时间可能需要做多一些的处理，只显示日期作为筛选分类。因为绝大多数筛选数组生成函数和筛选处理函数都是类似的，唯一不同的就是选择的数据属性不同，这样就可以直接通过column.property来区分处理的数据属性，代码如下

	itemColumnFilters(label) {
      var dataset = this.tableData;
      var filters = [];
      var values = [];
      dataset.forEach(function (v, i) {
        if (v.item[label] != "" && values.indexOf(v.item[label]) == -1) {
          filters.push({
            text: v.item[label],
            value: v.item[label],
          });
          values.push(v.item[label]);
        }
      });
      return filters;
    },
    itemColumnFilterHandler(value, row, column) {
      return row.item[column.property] === value;
    },

表单使用

对于一个需要大量数据输入的库存系统，表单的使用频率是仅次于表格的。element-ui中表单的组件基本上能满足这个项目的需求，而且根据文档上来看，对于绝大多数的项目需要的表单组件都有，例如选择框、输入框、选择器、开关等等都有，而且还有数据穿梭框等相对比较复杂的组件，虽然这个项目中主要还只是用到输入框、选择器以及开关，不过这些组件的存在可以方便开发降低再造轮子的成本。表单我体验比较深的是两个功能:

自动完成的输入框

自动提示的输入框可以大大的提升使用体验和效率，对于这个项目中很多需要反复输入的输入框都直接使用了具有自动完成的输入框，而且自动完成的数据可以预先加载或是实时远程调用，都非常直观，这样用户体验上来说，可以减少很多的键盘输入。之前在开发小程序的时候，还自己写过一个自动提示的输入框插件，虽然实现的功能上来说基本一致，但是结合了element-ui的设计语言，还是美观不少。

async-validator的验证模式

表单中应该最耗费开发时间的可能就是输入数据验证了，这点上因为很多验证规则的过于复杂而需要自定义验证函数，不过element-ui基于async-validator的验证机制基本上还是能满足绝大多数验证规则的，就算比较复杂的验证规则也可以通过回调函数来处理，虽然这次项目中只是一些简单的必填验证、输入长度以及数字区间的验证，但是还是用到了异步服务器端验证的功能，结构还是非常直观易于理解的。不过开发过程中碰到一个小坑，就是对于数字的验证需要在输入框中model参数上添加.number的后缀，要不就会验证会以字符串来处理，那么数字区间就会变成字符串长度验证了。这个问题也是我在验证数字是一直不成功找到的问题，主要是在element-ui文档内没有找到相应的解决方案


	
		
	


//在规则中添加相应的type为number的规则即可

count:[{
	type:"number", min:0, message:"请填写正确的包装数量",trigger:"blur"
}]

对话框+表单

为了降低单页面内的操控数量，对于有较多操作的页面，我是结合了对话框和表单的方式，而且为了代码的整洁性，将不同功能的对话框以页面组件的方式实现，这样在页面代码中只需要引入组件，然后通过一个简单的显示参数的变化来控制对话框的显示和隐藏。然后将表单中相对复杂的业务逻辑就可以封装在对话框组件内了便于后期的维护。不过这个会引起一些后期的其他问题，例如移动端适配，因为element-ui对话框是根据屏幕宽度来定义宽度的，对于小屏幕的时候就会出现显示的问题，目前还没有做移动端适配，所以就放在之后处理了。

echarts的使用

最后是首页或是仪表盘中的数据展示，为了美观使用了图表的方式，就直接引入echarts，因为通过npm来对外部模块的管理，安装和引用echarts还是比较方便的，一个简单npm install就可以将echarts和相应的依赖项都安装了。不过不知道是因为版本不匹配还是vue本身的原因，直接应用echarts都会在渲染的时候报错，类似某个属性不存在等问题。因为时间有限，没有太深入的研究，然后再引入vue-echarts就能使用了，虽然粗略看了一下vue-echarts的代码和echarts官方使用方式基本一样，但是直接使用官方文档上的引用和调用方式就会报错。以后有时间的话，再仔细研究一下，毕竟echarts的功能还是非常强大的，虽然这次项目中我只用了简单的线性图，但是echarts基本能满足绝大多数的数据可视化的需求。

遇到的坑

没有坑的新尝试都是不完整的，不过这次因为项目相对比较简单，并没有碰到太多的坑，就说两个吧

移动端适配

因为管理后台的特性，element-ui对于移动端的适配是基本没有的，只是在布局上对不同尺寸显示区域做了适配和隐藏选项，也只能简单的将布局做调整。对于类似像表格和对话框这样的组件在手机端上的展示就非常惨不忍睹了，这点上对于现在移动互联网时代有点不太靠谱。不过，应该也能通过自行开发来做一定上的功能适配，比如对于不同的显示尺寸展示不同结构的表格和组件。

部署发布的根目录设置

这个可能是有一定的项目特性，因为项目的部署不是在域名根目录下的，所以需要在发布编译配置中修改根目录的设置，要不对于不是直接部署在域名根目录上项目，所有的路由都会出现资源调用的问题。不过这个设置还是比较简单的，就是一开始没有在文档中看到，所以算是一个小坑。可以直接在项目根目录下.env.production中修改下面这行就可以了。

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/api'

总结

总的来说，使用已有框架来开发的确能提高不少的效率，不过也不得不说，因为一些库的文档并不是非常的完善，需要花一点时间来摸索，所以还是会碰到坑。不过基于Vue的框架有一点优势不得不说，就是国内的开发者的确很多，在网上也能找到很多解决方案，不需要费力在国外网站找资料。总的来说，对于我来说新了解的一个框架，第一次开发的体验还是不错的。