仿若依后台项目总结

项目使用

该项目使用vue-cli脚手架创建基于vue3项目 使用到vuex，vue-router，element-plus组件库

功能介绍

登录模块

登录页面样式

登录使用element-plus中的表单和按钮组件 登陆时使用md5插件进行密码加密并调用后端登录接口 发送用户名及加密后的密码

当拿到后端返回的登录成功状态码及token时 把拿到的token保存到本地 并跳转到个人中心首页

个人中心

在一进入和人中心页面前 向后端发送请求左侧菜单列表和首页需要渲染的数据

但在这里后端返回的左侧菜单数据是未处理的格式 我们需要自己手动处理

 处理后的树状菜单数据为

 这时候我们就可以通过循环 渲染出左侧菜单了

其实该项目主要功能为右侧全屏，换肤，中英文切换功能

全屏

全屏功能通过安装 screenfull 插件完成  样式上我们使用element-plus中的 FullScreen 图标渲染 

点击时直接调用该组件的 toggle 方法

 就能实现全屏切换的功能

换肤

换肤功能通过点击弹出Dialog对话框  使用element-plus中的 el-color-picker 组件完成

该组件通过v-model绑定一个默认颜色  通过 acitve-change 事件  绑定切换颜色的方法

这个方法自带一个参数  为选中的颜色

 中英文切换

中英文切换功能需要下载vue-i18n插件  i18n就是国际化英文单词internationalization的简写，因为i-n之间有18个字母，所以叫i18n。

在使用时  我们需要新建一个js文件进行初始化实例

 当我们点击页面上的中英文切换时 使用elementPlus的el-dropdown组件展示语言

 

 当我们点击中文或者English的时候，触发事件，传递对应的参数，将i18n的locale字段的value改成相对应的zh或者en  同时不允许点击已经显示的语种

 目前为止我们的中英文切换就基本完成了  但我们需要考虑到 当语言切换时  后端给我们返回的数据 怎么控制语种呢  这时后端会通过请求头中的Accept-Language字段的值来向我们前端返回对应的数据，所以我们在发送请求的时候，需要在请求拦截器中添加上这个字段

 

 然后我们在页面通过watch监听本地或vuex中的语言切换 从而重新请求数据

 动态标签

动态标签就是将我们打开的路由地址保存在页面的tab区域 

 主要就是在home页面监听路由的变化  将点击的路由地址保存到vuex中 在页面中通过循环渲染出对应的路由地址

 Excel的导入导出

在项目中 当我们需要在页面添加表格数据时 可以借助xlsx插件 直接导入 而不是一条一条的添加

 点击上传

通过点击上传按钮 触发input的点击事件 然后判断用户是否上传了文件 如果没有就直接return掉 如果上传了就执行上传事件

 拖拽上传

当用户直接将文件拖拽到指定区域时 也可以上传文件 我们需要判断是否为一个文件 是否为我们指定的文件格式 如果都满足 就执行上传事件

 当用户上传成功后触发读取数据事件

 

 当文件上传成功后 调用后端的接口 将文件数据上传到后端 再重新渲染页面

 上传成功的事件需要进行数据的处理  处理成与后端对应的数据结构

 Excel导出

导出表格需要用到 file-saver 和 dayjs 插件  当用户点击确认导出时 触发相应事件

首先 我们需要设置导出的表格格式

 导出文件的方法

 在导出文件的方法中 我们需要对数据格式进行处理

 动态路由

在这个项目中 我认为比较难的就是动态路由了 因为后端返回给我们的数据并不是树状的数据格式 所以需要我们进行二次处理

 这种情况下 我们就需要先写好所有页面的私有路由  下面为其中一个

 这里我们统一引入在一个js文件中

 

当我们获取到后端返回的菜单列表权限后 根据获取到的列表权限 动态的添加到路由里

以上是私有路由  代表用户没有权限的情况下不允许进入的  有私有路由就有公有路由 像登录 404页面 不需要权限就可以进入  这样的页面我们可以直接写在router.js中

我们先定义两个方法 一个是查看当前登录账号的菜单列表中是否有私有路由表中的路由，另一个方法是根据权限 初始化公有私有路由表

 通过这两个方法 在router.js中就可以直接通过Router.addRoute()方法添加到路由中了

 目前为止 我们已经可以通过url进行路由跳转了 但是 我们还需要渲染左侧菜单列表  我们可以通过router.getRoutes() 这个方法 获取所有的路由页面  

 生成左侧菜单树状结构

 

 最后我们拿到的就是处理后的树状数据了