Vue2+ElementUI 电商后台管理系统项目解析

项目仓库地址:gitee.com/gleenwu/vue… , 项目实例: www.escook.cn/vue-shop/#/… 项目描述: 一个基于Vue2的电商后台管理系统, 具有用户管理(编辑或添加用户信息, 比如修改姓名为张三这个用户的邮箱,添加一个姓名为李四的用户并赋予它测试员的角色.在这个系统里,不同的用户具有不同的角色,而角色具有一系列具体的权限), 权限管理(控制系统中的角色,让他们具有一系列具体的权限. 比如测试员具有添加商品,修改商品,删除商品等权限), 商品管理(具有显示商品, 管理商品的功能),订单管理(具有显示订单和管理订单的功能)和数据统计(可以动态的显示过往用户数据)功能.

项目结构如下:

更具体一点说包含了对登录用户的权限验证和访问数据请求的验证,用户或商品各项属性的增删改查,图片的上传下载和数据统计与可视化功能. 在与后台数据的交互过程中使用了Get,Post,Put,Delete这四种http请求 使用技术栈是Vue2, VueRouter, Axios, ElementUI, Echarts 还包括一些第三方依赖如iconfont, VueQuillEditor, NProgress, Lodash

首先,在设计上, 这个后台管理系统具有登录页面和功能页面,各个页面之间的跳转通过Vue Router实现. 登录页面到功能页面的跳转需要通过需要经过服务器的验证. 待验证通过后,服务器会返回一个用户token,在之后的功能界面访问服务器需要使用这个token. 在这里,我们使用ajax请求拦截器axios.interceptor来将token装到每次向服务器发送请求的请求头中.

启动服务器后,我们需要使用http协议的post请求将用户登录信息发送到服务器, 待校验通过后才能进入主界面. 这个过程中,需要使用axios,async和await来完成对post请求的发送和接受. 在完成校验后我们将获得的用户token使用sessionStorage.setItem方法放到浏览器的内存中. 之后通过VueRouter中的router.push方法跳转到主页面. 进入主页面后,首先进入的是欢迎界面, 主页由Element UI设计,分为头部区域和主体区域上下两部分,其中主体区域又分为了左右两部分. 左边区域作为主页面的导航栏,首先获得后用户角色列表数据(一个二维数组)再用el-submenu标签将他们依次渲染出来, 右边区域则使用一个路由占位符作为数据的待显示区域.

关于项目的优化, 我使用了对Element UI和Echarts这两个第三方组件库实行按需导入的方式,大量的减少了第三方依赖的体积. 此外, 在项目打包后, 为了解决单文件体积过大的问题, 使用了chainWebpack对Vue cli中的配置文件vue.config进行打包配置将项目, 在生产模式和开发模式下使用不同的规则对项目进行打包. 经过简单的分析, 我发现体积较大的打包文件是项目第三方依赖文件和路由导航文件. 于是进行如下配置, 在生产模式下,声明一个externals节点并在节点内声明项目所有的第三方依赖包. 在发布文件夹(public)下的页面文件(index.html)中的头部区域引入第三方依赖包的样式文件外链和脚本文件外链. 使得这些依赖包在项目打包期间不会被输出到一个合并的文件中, 而是作为项目页面文件中的windows全局对象, 等待在项目中被通过外链的方式应用.

而对于路由文件,在项目中使用了路由懒加载的方式对功能相似的路由组件打包到同个异步块中, 减少了打包构建应用时JS包的体积. 实现了把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

打包完成后,项目的体积由原先的7mB变为了315kB.