- 搞毕设项目，使用前后端分离技术，后端springBoot，前端vue3+element plus。
- 自己已经写好前端与后端代码，但想换一个前端界面所以使用到了若依，前前后后遇到许多坑，记录一下，方便之后能够快速回忆。【本文章主要讲解前端部分（vue3），请耐心跟着文章的流程走，后端使用的是自己的工程，需要看后端的小伙伴可以看看其他的文章】
记于2024-7-30
若依官网：RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.vip
1、环境准备
1.1、前端下载
因为我原前端使用的技术栈是vue3+element plus，所以选择官网内项目扩展中的RuoYi-Vue3： https://github.com/yangzongzhuan/RuoYi-Vue3
需要注意官网内分离版的技术栈：
- Vue 2.6.x
- Axios 0.21.x
- Element 2.15.x
当时没注意直接使用官网分离版中的项目，后面把原前端的代码拷贝过去出了问题，原因是版本过低需要升级，而且就算升级后代码语法的差异也需要大作更改，所以根据需求选择。
1.2、后端下载
后端可以直接下载官网中的项目：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
里面包含了所需的后端工程以及（Vue 2.6.x）前端工程 ruoyi-ui。
需要多看官网文档，包含了前端与后端工程的目录结构说明，方便快速掌握。
2、从登录到首页的前端流程
- 将前端与后端工程分别运行起来。
- 了解前端工程目录基本作用
- 主要操作都在src文件夹中。
（1）修改 vite.config.js 文件中proxy的后端ip以及端口（使用反向代理实现跨域请求）
（2）在 src -> api 中定义好自己的请求js：
（3）登录页面：src -> views -> login.vue：
import引入user文件中的userUserStore对象，该文件主要写执行请求方法的action。
（4）执行login.vue中的登录方法后调用 store -> modules -> user 中的后端登录接口，成功后使用cookie保存token
（5）执行login.vue的登录方法成功后进行路由跳转router.push(....)，但会被 src -> permission.js 文件内的路由前置守卫拦截路由跳转，需要执行两个请求：
- userUserStore对象中的获取用户信息接口（src/store/modules/user）
- userPermissionStore对象中的获取路由菜单接口（src/store/modules/permission）
（5.1）获取用户信息 getInfo()
【需要注意获取用户信息后需要填写一些信息，因为每次加载完路由会 next({...to,replace: true}) 更新页面，发现有token，但是没用户信息，就会重复触发调用接口请求，出现循环执行两接口造成浏览器白屏问题】
可以根据需要写一些静态数据【具体的可以查看若依后端接口查看作用】
this.roles = ['admin'] // 菜单权限
this.permissions = ['*:*:*'] // 按钮权限this.id = data.id // 用户id
this.name = data.name // 用户姓名
this.avatar = avatar // 用户头像
（5.2）获取路由菜单表信息 generateRoutes()
该action方法会调用后端接口（src -> api -> menu.js）获取菜单表
路由表结构（可以参考，但具体以若依后端传递的菜单结构为准，可以在前端这文件使用控制台输出查看）【存在其他奇奇怪怪bug，需要根据自己项目去调试，最好是一次过】：
{
"code": 200,
"message": "操作成功",
"data": [
{
"name": "system",
"path": "/system", // 需要注意父菜单path需要加/，否则会找不到组件报404
"hidden": false, // 是否隐藏路由，当设置 true 的时候该路由不会再侧边栏出现
"redirect": "noRedirect", // 重定向地址，当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
"component": "Layout",
"alwaysShow": true, // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
"meta": {
"title": "系统管理",
"icon": "system",
"noCache": false, // 设置为true，则不会被 <keep-alive>缓存
"link": null // 内链地址（http(s)://开头）
},
"children": [
{
"name": "Role",
"path": "Role", // 子菜单path不需要加/
"hidden": false,
"component": "system/sysUser",
"meta": {
"title": "用户管理",
"icon": "user",
"noCache": false,
"link": null
}
},
{
"name": "User",
"path": "User",
"hidden": false,
"component": "system/sysRole",
"meta": {
"title": "角色管理",
"icon": "peoples",
"noCache": false,
"link": null
}
}
]
},
{
"name": "product",
"path": "/product",
"hidden": false,
"redirect": "noRedirect",
"component": "Layout",
"alwaysShow": true,
"meta": {
"title": "商品管理",
"icon": "shopping",
"noCache": false,
"link": null
},
"children": [
{
"name": "category",
"path": "category",
"hidden": false,
"component": "product/category",
"meta": {
"title": "分类管理",
"icon": "404",
"noCache": false,
"link": null
}
}
]
}
]
}3、修改若依框架图标与文字
若依RuoYi框架log图标与文字怎么改？_若依的图标文字-CSDN博客
3.1、修改菜单栏上方图标
图片路径: /src/assets/logo/logo.png
3.2、修改菜单栏上方文字
文件路径：/src/layout/components/Sidebar/Logo.vue
3.3、修改窗口标签图标
图标路径：/public/favicon.ico # 推荐尺寸64*64
3.4、修改窗口标签文字
文件目录：
/.env.development
/.env.production
/.env.staging
推荐全部修改，因为根据环境不同
3.5、免费图片转换网站
在线转换图像文件
4、出现的bug
4.1、RuoYi点击菜单出现空白页面，无报错
解决：RuoYi点击菜单出现空白页面，无报错_页面在菜单点击空白-CSDN博客
若依(vue3版本)，进入首页后选择左侧菜单栏会出现切换菜单或者tab 页面空白的情况，
刷新页面后又恢复正常。
vue3版本的若依框架存在一些bug，在src\layout\components\AppMain.vue中transition加跳转动画，keep-alive用作缓存，因为同时使用了transition和keep-alive，并在组件内又使用了transition导致的。
解决方案：
1、在keep-alive外包裹上div(推荐)
<router-view v-slot="{ Component, route }">
<transition
:duration="{ enter: 800, leave: 100 }"
mode="out-in"
name="el-fade-in-linear"
>
<div :key="route.path">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</div>
</transition>
</router-view>2、直接注释掉transition，但这样就没有菜单切换动画了
<router-view v-else v-slot="{ Component, route }">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
