Maxon's Blog

记毕设开发

4

毕设主体快写完之后突发奇想要不要记录一下开发过程,于是本文于 2023/02/25 15:58 创建。

首先介绍一下我的毕设吧!

它是一个固定资产维修系统(一个报修平台),有管理员、负责人、报修员和维修员四个角色,每个角色都有自己的权属范围。 我是使用SpringSecurity然后配合RBAC五表进行的权限控制,这样做的话,权限和角色控制起来更清晰且易于维护。 由于是前后端分离的系统就用SpringBootVue来开发后端和前端。 这是此项目的Github地址:Aealen/FixedAssetManagementSystem: 固定资产维修系统的设计与实现 (后端部分) 前端部分的代码也可以在仓库里找到。

之后的一些改动或者想法也可能在项目readme里添加,就不在这边写了,这边只记录关键性的里程碑。

2023/02/25

今天完成了除了图表之外的所有管理员模块,也算是整体完成了70~80%了。其余角色的功能大多是管理员功能的删减版。 接下来的任务是 要在 Vue做权限控制(一开始设计的时候没想到),要给各个权限加路由列表,来控制角色能访问的路由url。 我已经找到了解决办法:在meta里打赏角色标签,然后登陆的时候根据角色异步生成路由列表。

2023/02/26

开始解决前端角色的页面路由问题了,至于原理我是跟着这两篇文章 ( 文章1 文章2 )来的。 **大体流程:**当用户登录之后,通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes动态挂载路由。

addRoutes

在之前通过后端动态返回前端路由一直很难做的,因为vue-router必须是要vue在实例化之前就挂载上去的,不太方便动态改变。不过好在vue2.2.0以后新增了router.addRoutes

Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option.

有了这个我们就可相对方便的做权限控制了。

具体实现

  1. 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
  2. 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。
  3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
  4. 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。

按照上面步骤折腾好之后,会遇到个问题

Q:页面刷新之后vuex的数据就会丢失,所以之前添加的动态路由也就失效!!

A:真正有效解决vue动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行! - 简书 (jianshu.com) 查阅了多方资料,大概知道了原因,刷新之后由于没有路由数据,路由数据会重新加载,但是问题就出现在这个加载上面,由于是异步操作,加载路由的操作在页面生成之后,所以页面生成之后并没有对应的路由,因此,白屏产生。

这个坑先留着吧,暂时解决不了!

接下来搞报修员模块:

报修员模块主要也就三个功能:新建订单,查看自己的订单,确认自己的订单

刚才pull之后才想起来 我改了order的表结构,那么发起订单的时候也该加上worker的信息,算了明天再加吧(已经12:40了)

2023/02/27

至此(2023年2月27日23点41分),功能都已经完成了。还剩下一个支付模块,就是个按钮然后扣余额。 剩下的就是页面美化工作,加一些图表 然后sys_log表里应该开始加东西了(我是想最后所有模块写完了 再去加log)