完整开放完一个vue后台管理系统小结

Posted 2022-08-17 ganmy

最近业余帮朋友做两个vue项目，一个是面向用户纯展示系列的（后统称A项目），一个是后端管理系统类的（后统称B项目）。两者在技术上都没难度，这里对开发过程遇到的问题、取舍等做一个小节。

关于项目搭建

目前vue-cli脚手架已经很成熟，创建项目很方便，按照官网文档或网上相应教程即可快速搭建（https://cli.vuejs.org/zh/guide/deployment.html）

优点：快速、方便、零配置、可扩展性强、灵活性强

缺点：对于小项目来讲，搭建不够精简，会默认安装多余的包（比如会默认按照jest，nightwath，这些测试框架一般都没有用到）

PS：如果有用到单元测试且在本地运行，需在jest.config.js配置下新增两个字段：

verbose: true,

testURL: ‘http://localhost/‘

并移除如下字段

mapCoverage: true,

关于http请求

采用axios，对http请求结果做统一处理后，列如请求结果返回code为200时处理后直接返回期望值data，非200时按实际情况处理，比如统一弹toast或者跳转、重定向等。

 

关于UI框架

A项目采用iview，B项目采用elementUI

从使用舒适度来讲，elementui完胜iview。其组件引用更便捷、自定义样式更灵活，事件绑定更贴近vue开发习惯。

iview体验较差的原因有:

 1. button组件、以及menu组件下的menuitem等点击事件绑定需要写成@click.native形式，否则点击事件可能不生效;

 2. 按官网文档引入iview-loader后，并不是所有组件都能直接以组件名的方式引用，如menu组件下的menuitem，依然要写成i-menu-item才生效 （对此，既然官网文档已出但却没有达到如述期望，因此对它不太信任...）

 

关于路由非登录重定向

这里提供两种方案：

1. 保存登录状态，在目标路由页面进行登录状态判断，若未登录，重定向

2. 在路由管理处，通过路由导航守卫做登录检测，若未登录，重定向（推荐这种方式，实现请参考https://github.com/vuejs/vue-router/blob/dev/examples/auth-flow/app.js）

A、B项目的登录状态isLogin均挂载在vue实例上，通过this.$root.isLogin可全局访问。其取值来自localStorage里键名为loginState的值。loginState的值是在登录或退出成功的时候设置。其弊端是当loginState的值被手动修改，那么展示状态也会随着更改。但因接口都需权限，且在路由或相应页面做了处理，所以几乎没什么影响。【之所以没用cookie，是为了用户安全起见，服务端将cookie设置为只读，本地拿不到cookie，一定程度上防御了xxs攻击】

 

关于upload组件上传文件跨域问题

因为elementui或iview upload组件上传文件时使用的是其底层的axios请求，若其action属性下的接口地址与本地的域名或ip不统一，就会存在cookie跨域的问题。解决方法就是统一域名或ip。

关于elmentui upload组件有删除提示时，终止文件上传会提示“是否删除文件xxx”的bug绕行

elementui upload组件做文件上传类型限制时，有两种方案：

1. 直接在其accept属性里设置允许上传的文件类型（推荐这种）

2. 在其beforUpload里做类型判断，如果为期望类型，返回true允许上传，否则返回false，终止上传。

方案2本来是没问题，但如果在beforeRemove函数下引入了this.$confirm(‘确定删除xxxxx‘)?，就会出现bug：beforUpload返回false，upload组件下任务会展示文件上传进度及上传成功，并同时弹出“确定删除xxxxx”的提示框。在这里文件确实没有上传，推测upload里展示的上传可能是个假象，但会给人莫名其妙的感觉，为了避免这个问题，在beforeRemove里做一个判断，即：当文件允许上传时才调用this.$comfirm方法，否则不做处理。

 

关于菜单激活项与当前路由匹配的解决方案

两种UI框架的思路一样，以elementui为例，设置为router模式，对应el-menu-item的index属性取值为目标路由名，如‘/dashboard’，点击这个菜单项时就会自动导航到目标路由。我们希望点击这个菜单项时，菜单为激活状态，menu有个属性为default-active，将该属性动态取值为路由名就行，假设default-active=‘activeIndex‘, 通过coumputed监测当前路由值即可：

computed:

 activeIndex ()

   return this.$route.path // 此处建议路由名称统一小写，在取得路由值的时候将字母统一小写，不然名称大小写不一致会影响激活状态的展示

 

 

关于数组遍历后单项选中状态的样式设置

有两种方案，

1. 后端字段返回selected状态值，假设true为选中，false为选中，前端点击后，将这个值取反

2.前端设置一个curIndex变量，点击之后就复制当前index给curIndex，在html片段里做条件判断，如果curIndex === index，则展示选中样式。

 

关于内容块如课程模块（涉及章、节标题）的新增、删除、修改的开发

惯用的思维可能会联想到点击新增、删除等会直接进行dom节点的相应操作，这其实不太可取。因为新增的模块越多，就不好管理消耗比较大。但直接利用vue数据的特性，对其课程模块数组进行增、删、改就会容易很多。