项目总结

淩亂°似流年 2023-01-03 01:22 155阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  这是一个怎样的项目
 *  用到了什么技术，为什么用这项技术（以及每项技术很细的点以及扩展）
 *  项目问题
 *   *  1、 运用vue+element-ui创建项目及配置、项目结构分配、模块定义
     *  2、 各页面功能展示：图表展示、数字滚动动画、列表展示及详细页、数据预览及下
     *  3、各模块组件封装
     *  4、token权限判断、动态路由实现权限管理
     *  5、vuex各模块数据管理
     *  6、登录用户不同判断不同的权限，路由动态处理
 *  过程中遇到了什么问题，怎么解决的。
 *  收获

--------------------

# 这是一个怎样的项目 #

**项目:信贷管理系统**  
这个项目属于后台管理系统类的项目  
**角色分配：**  
1、管理员  
2、销售人员  
3、初审人员

**结构分配：**  
1、登录页  
2、首页  
3、贷款申请  
4、申请管理  
5、贷款审批  
5-1、初审  
5-2、终审  
6、标的管理  
7、权限管理  
7-1、创建管理员  
7-2、列表展示

**权限管理：**  
销售人员 - 登录后只能看到‘首页’‘贷款申请’‘申请管理’  
初审人员 - 登录后只能看到‘贷款审批’‘初审’‘终审’‘标的管理’  
管理员 - 登录后拥有所有权限，能创建管理员

# 用到了什么技术，为什么用这项技术（以及每项技术很细的点以及扩展） #

**主要技术栈**:vue+element-ui+vuex+node.js+axios+token  
使用vue+element-ui进行开发渲染以及对于页面美观的处理  
使用node.js进行对于数据库的操作  
使用vuex 处理一些不同页面需要的变量  
使用axios进行请求和响应,拿到后端给与的数据来进行渲染  
使用token主要是为了系统的安全性处理,  
**部分技术**:全局组件的封装,过滤器的封装, axios的封装,接口的封装,token的封装,html5新特性–download属性  
全局组件的封装,以后不用引入,可以直接使用(优化,减少页面代码量)  
过滤器的封装,多个页面多次的使用(优化,减少页面代码量),这样对于系统的维护非常的不好.  
axios的封装,对于通过axios请求和拦截需要做一些处理,例如:每个请求在请求头中添加token,维护方便  
接口的封装:维护方便,对于发送请求需要类型,需要的数据一目了然.  
token的封装:方便在多页面的使用及维护方便,  
html5新特性–download属性:系统中有一个需要下载word文档的需求,所以需要通过这个html5提供的标签进行下载,由于后端返回的是一个url地址,所以我们需要再次发送请求来请求这个文件,然后通过创建标签,并且为这个标签提供这个文件及名字(此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件))

# 项目问题 #

## 1、 运用vue+element-ui创建项目及配置、项目结构分配、模块定义 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

## 2、 各页面功能展示：图表展示、数字滚动动画、列表展示及详细页、数据预览及下 ##

图表展示使用echart来做图标  
数字滚动动画使用vue-count-to这个插件来做

## 3、各模块组件封装 ##

token的封装,接口的封装,全局过滤器的封装,axios的封装

## 4、token权限判断、动态路由实现权限管理 ##

token权限判断  
token的权限判断最主要是判断是否已经登录

动态路由实现权限管理  
1.默认路由与需要动态处理的路由  
2.在meta中给与属性roles(不同角色分配不同的权限)  
3.在vuex中处理动态路由(最终得到不同角色分配不同的路由)  
4. router.addRoutes(asyncRoutes);动态添加这个路由  
5. 这样就可以实现角色权限路由分配

## 5、vuex各模块数据管理 ##

在vuex处理俩种数据  
角色数据  
1.通过发送请求获取详细的角色信息  
路由数据  
2.通过角色来过滤出相对于的路由信息

## 6、登录用户不同判断不同的权限，路由动态处理 ##

登录用户的不同,角色也会不一样  
通过vuex来过滤出路由信息

# 过程中遇到了什么问题，怎么解决的。 #

1.在导航栏中没有设置router,导致无法导航栏点击没反应,通过查看api文档添加router解决.

2.在实现动态路由的时候重复点击菜单报错,ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题,通过查询资料添加代码  
3. 动态添加路由的addRoutes时候多次添加路由重复问题 =>因为addRoutes只是添加路由,并不会删除前面的所添加路由,所以需要重置路由,然后在添加路由  
4.在点击登录的时候需要点击俩次才能登录进去=>我先排查了看看是不是代码的问题,然后发现不是代码的问题,然后去网上查找资料,发现是form表单自带的默认行为干扰了我的点击事件,所以我在点击事件添加阻止默认行为.  
5.在为权限角色添加动态路由的时候,在登录页中点击登录的时候,无法进去首页,当时通过F12查看,发现并没有错误,然后通过打断点一步一步的去查看发现了原来是有一个属性出现错误,但是它又不报错误,后来对它修改了之后,然后才成功进去了首页

# 收获 #

1.对于vue的结构分配熟悉了.  
2.对于elelemnt-ui的使用更加的熟悉.  
3.对于页面的处理更加得心应手  
4.sass的使用入门了  
5.全局组件的封装,过滤器的封装, axios的封装,接口的封装,token的封装,html5新特性–download属性  
6.由于封装的接口,所以对于发送请求也变得非常简单了  
7.面包屑  
8.角色权限分配  
9.动态路由渲染(二级以及多级都可以处理)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/34e7dd4f02744acea46fba1571f4dc26.png