Vue后台管理项目

头发很多的前端
9,114 阅读4分钟

1、搭建框架

image.png

再修改文件目录，各文件编写示例 用了ts，所有的形参都要定义类型 配置 image.png

用单引号，取消分号等，统一代码，eslint禁用，就不会报错了

2、登录界面

1、界面

2、表单验证 image.png

3、确认密码 image.png

4、验证密码 image.png

3、菜单

image.png

3-1、动态权限菜单

 1、打印菜单组件，建立对应的路由组件(platform)
 2、格式化动态菜单，因为比接口菜单多了路由映射成的组件

image.png

引入view中的组件，实现后面的匹配

image.png

打印所有组件

image.png
image.png

 添加动态路由核心

image.png

界面显示动态菜单
pinia组件获取值与vuex有所不同

image.png
image.png image.png

3-2、动态菜单图标组件映射

动态组件 <component ：is=''/>实现

4、菜单管理

4-1、树形控件

利用el-tree组件

image.png

4-2、子菜单列表

界面 image.png image.png

可以调子菜单接口 image.png

也可直接调用store里面的菜单列表 image.png

4-3、 添加菜单

image.png image.png image.png

添加完成后关闭事件，涉及子传父 image.png

4-4、刷新

image.png image.png

5、角色管理

5-1、 对于数据格式不同的过滤操作

image.png

5-2、实现

image.png image.png

5-3、 添加角色

点击弹框 image.png image.png

界面，vue分离 image.png image.png

引用 image.png

添加后关闭弹框，子组件触发，故涉及子传父 image.png image.png image.png

5-4、编辑角色(复用添加弹框）

定义弹框类型-编辑/添加 image.png image.png

引用 image.png

引用添加弹框，框内赋对应值，编辑框涉及传参 父组件 image.png image.png

子组件 image.png

但先点了编辑后，点添加，还需判断编辑还是添加，如果是添加需重置成'' image.png image.png

5-5、角色权限管理

1、菜单权限

使用反馈组件中的抽屉组件el-drawer+el-tree image.png

选中菜单节点打勾，坑点---需要选中节点是否与菜单数据均为同步/异步 image.png

具体实现，涉及父传子

image.png image.png image.png image.png

权限自动根据节点勾上，点击一个换另一个，需要销毁组件，用v-if

设置角色的菜单权限
存在问题，设置权限后，菜单变多，出现重复，可以找后端联调，重复数据的问题出在哪里

2、按钮权限

1、自定义全局指令

即资源权限，使用自定义指令实现 image.png

接口 image.png

获取资源权限，登录时保存，同菜单列表一起，promise处理异步，async，await将异步变成同步写法 image.png

是否显示对应的编辑/删除框，利用自定义指令全局设置 image.png image.png

具体实现 image.png

分离，自定义指令，放进direcitve文件夹，app实例中引用 image.png 使用 image.png

2、自定义插件

介绍 image.png

将上述自定义指令设置为自定义插件，提供全局功能的技术 image.png

引用，app实例中集成 image.png

6、业务分离

6-1、js--封装hooks

image.png image.png

6-2、封装类型--ts

image.png

引用

image.png

7、组件通讯

父传子

image.png

子传父

组间双向数据绑定--父传子+子传父

image.png

案例 el-row三栏布局快速调 image.png image.png

8、用户管理

界面 image.png

1、定义类型 image.png 2、定义hooks

8-2、过滤url地址

image.png

8-3、添加账户

界面 image.png

注册带头像上传 image.png

注册的密码需要加密，否则登录不上 image.png

添加后自动关闭+刷新
 法一： 组间通讯，v-model绑定变量数据+watch侦听器

image.png image.png image.png

法二 ： 子传父

image.png

刷新也可在添加成功关闭弹框后后再调一次角色列表

8-4、图片上传

image.png

实现上传预览，读图片文件

image.png

检查图片格式，但下述方法由于自动上传图片功能取消了，因此可以换个地方检验，添加账户前或者预览图片前，也可将上传前的操作返回false，阻止自动上传 image.png image.png image.png

9、项目难点问题

9-1、 刷新界面数据消失白屏

法一：修改系统启动处 image.png image.png

法二：数据持久化存储 image.png image.png

9-2、统一登录认证

全局导航守卫，没登录情况下不能访问的页面直接跳转到的登录页 image.png

引入 image.png

9-3、无感刷新token

image.png

status: 1401,无token，1403，token过期需重新登录

image.png

实现原理，类似酒店 image.png image.png

前端具体设计

image.png image.png image.png

9-4、axios二次封装

image.png

10、echats图表

10-1 定时器轮询显示图表

倒计时轮询调接口更新图表，缺点：定时器的定时会导致大屏不能实时显示有延迟 image.png image.png

优化，离开当前页后不再实时更新图表 image.png

10-2 webSockets

image.png image.png image.png image.png

后面像前面方法的数据赋值，直接将数据单独设置变量 image.png

将分支推送到远程存储库时遇到错误: rejected Updates were rejected because the remote contains work that you do not have locally

在仓库目录下执行 git pull origin master --allow-unrelated-histories 之后就可以成功的pull，push了

avatar
文章
阅读
粉丝