• 搞毕设项目,使用前后端分离技术,后端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、从登录到首页的前端流程

  1. 将前端与后端工程分别运行起来。
  2. 了解前端工程目录基本作用
  3. 主要操作都在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>

Logo

快速构建 Web 应用程序

更多推荐