RuoYi-Vue若依框架-如何更换标题、图标以及登录背景

最新推荐文章于 2025-03-28 15:41:47 发布
最新推荐文章于 2025-03-28 15:41:47 发布
阅读量8.3k 收藏 49
点赞数 15
分类专栏： 若依框架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52879387/article/details/137064880
版权
本文介绍了如何在已经启动的RuoYi-Vue项目中，使用VSCode进行全局搜索并替换项目名称、修改登录界面的图标（通过PNG图片替换）以及更换登录背景（使用JPG图片）。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下操作建立在RuoYi-Vue已成功启动可进行二次开发

更换标题

打开vue前端，我用的是vscode，进行全局搜索，把若依管理系统换成自己想要显示的项目名称即可，我这里已经换过了，所以没有显示，更换完了重启或者刷新试试即可
在这里插入图片描述

更换登录进去左上角的图标

登录进去左上角的图标是个png图片，所以自己找的时候也要找png图片进行更换，我这边图方便，直接删除了原logo图片，把自己找的图片更换进去改成了之前logo的名字，找logo可以点击阿里巴巴矢量图标库进行查找
在这里插入图片描述
原本的效果：
在这里插入图片描述
更换完了就是类似下面这种，只不过图标和我的不一样
在这里插入图片描述

更换登录背景

更换背景的操作和更换图标差不多，我也偷懒就删除原图片，把自己的jpg图片放了进去
在这里插入图片描述
原本的效果：
在这里插入图片描述
更换之后的效果：
在这里插入图片描述
记录一下

【若依前后端分离】登录页面背景加入轮播视频
敲厉害的燕宝的博客
04-13 1010
轮播图：【若依前后端分离】登录页面背景加入轮播图_vue 轮播图登入页-CSDN博客视频容器：使用一个 元素作为视频的容器，具有样式 。 ：使用 Vue 的数据绑定将视频的 属性设置为 ，这个属性会动态地指向当前播放的视频路径。 ：视频加载后自动播放。 ：视频静音播放。 ：视频循环播放。 ：根据 的值动态添加或移除 类，以控制视频的显示和隐藏。 2.JavaScript 部分 数据属性定义： 计算属性： 播放视频的方法： 生命周期钩子：
基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。
05-02
基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读。 基于SpringBoot+vue的前后端分离权限管理系
RuoYi-Vue若依框架-更换标题、图标、头像以及登录背景
weixin_58689039的博客
11-26 2687
在查看里搜索“若依”全部替换为自己的系统名字下面两处标题需要重启前段vue。
若依框架修改，根据用户角色，设置不同登录页面
最新发布
qq_43800158的博客
03-28 442
若依框架修改登录首页
若依框架自定义左侧导航栏图标，并变色
huang_jimei的博客
06-26 1829
若依框架自定义左侧导航栏图标
若依RuoYi框架log图标与文字怎么改？
c15112120076的博客
06-28 1万+
若依RuoYi修改log图标、网页上方图标、首页文字、网页上方文字
Ruoyi-Vue或者Ruoyi-Cloud登录进去之后的第一个页面如何修改（即如何去掉首页或者如何修改首页）
爱吃雪糕的小布丁的博客
11-30 4270
ruoyi-vue和ruoyi-cloud如何更换首页
若依框架把首页更换为其他页面
sosozys的博客
03-05 8192
若依前端更换首页
修改若依框架的标题以及logo
weixin_70025559的博客
05-25 5882
位置：src/layout/componentSidebar/Logo.vue修改七七管理系统就可以更改此处的名称。
若依管理系统修改页面标题和logo
m0_58565372的博客
04-18 1万+
把src/layout/components/Sidebar/Logo.vue里的title改成自己网站的标题。1.修改.env.development里的页面标题,将其标题，改成自己网站标题。2.修改.env.production里面的页面标题，将其标题，改成自己网站标题。把src/views/register.vue里的标题，改成自己网站的标题。3.修改.env.staging里面的网页标题，将其标题，改成自己网站标题。把src/views/login.vue里的标题，改成自己网站的标题。
vue路由配置
coding
08-12 1688
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /** * Note: 路由配置项 * * hidden: true // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1 * alwaysShow: true // 当你一个路由下面的 children 声明的路由大于1个时，自动.
若依登录页面改造源码资源
09-27
登录页面vue代码、验证码vue代码、背景图
若依框架ruoyi-vue-master(vue2版)
09-10
"若依框架ruoyi-vue-master(vue2版)"是一个基于Vue.js 2.x的前端框架，专门用于快速开发企业级Web应用。这个框架集成了多种功能和组件，为开发者提供了一站式的解决方案，旨在提升开发效率和代码质量。在软件架构...
基于yudao-vue-pro开源项目的ruoyi-vue-pro设计源码深度解析
10-05
通过对基于 yudao-vue-pro 开源项目的 ruoyi-vue-pro 设计源码的深度解析，开发者可以全面地学习到前端框架的构建、后端服务的开发、UI设计的实现、项目配置和部署的策略，以及多语言编程的实践。这份解析不仅有助于...
基于RuoYi-vue和flowable 6.x的流程管理平台设计源码
09-26
它采用Java语言编写，利用RuoYi-vue作为前端展示框架，并以flowable 6.x作为工作流引擎，实现了流程设计、监控、任务调度等核心功能。该平台高度可定制、扩展性强，能够满足各类组织机构对业务流程优化和自动化管理...
基于ruoyi-vue和Activiti框架的科技创新项目管理设计源码
10-05
前端采用ruoyi-vue框架，使得系统界面更加灵活、响应快速；后端则采用Java语言开发，保证了系统的稳定性和数据处理能力。同时，系统引入Activiti工作流引擎来设计和管理项目流程，通过BPMN 2.0标准的图形化流程设计...
若依(RuoYi-Vue)+Flowable工作流前后端整合教程
热门推荐
TangBoBoa的博客
03-22 4万+
此教程适合若依前后端分离项目，其他项目可以在扩展列表中进行查找。近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能，当然这个重任也是落在了我的身上（不然也不会有这篇文章），然后我在官网看到了RuoYi-Vue-Flowable这个项目，按照文档提供的迁移方式对于我们这个老版本的项目来说无法正常运行，所以我联系了作者并更新了一下文档，打算在网上在发布一篇（毕竟有的人懒得看官方文档）。
若依vue-修改标题和图标
Anorry的博客
11-23 1514
因为我们拉下来的代码,图标和logo是若依的,这和我们需要做出来的效果有差别这个时候就需要去对应的文件内去修改标题和图标(主要就是这两个地方的图标和标题)
基于ruoyi快速搭建一个接口
03-08
### 基于 RuoYi 框架快速构建 API 接口 #### 创建新模块 为了基于 RuoYi 构建新的 API 接口，首先需要创建一个新的业务模块。这可以通过复制现有的模板模块来实现，并修改其包名和路径。 ```bash cp -r ruoyi-system ruoyi-newmodule ``` 接着更新 `pom.xml` 文件中的模块名称和其他配置项[^2]。 #### 定义实体类 在新建的模块下定义所需的实体类。假设要创建一个名为 `User` 的实体： ```java package com.ruoyi.newmodule.domain; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; @Data @TableName("sys_user") public class User { @TableId private Long id; private String name; private Integer age; } ``` 此代码片段展示了如何利用 MyBatis Plus 注解简化数据库映射操作。 #### 配置Mapper接口 接下来编写对应的 Mapper 接口用于数据访问层的操作： ```java package com.ruoyi.newmodule.mapper; import com.ruoyi.newmodule.domain.User; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper extends BaseMapper<User> {} ``` 通过继承自 `BaseMapper<T>` 可获得基本 CRUD 方法支持而无需额外编码。 #### 编写Service服务逻辑 继续完成 Service 层的设计，在这里处理具体的业务需求并调用相应的 DAO 方法： ```java package com.ruoyi.newmodule.service.impl; import com.ruoyi.newmodule.domain.User; import com.ruoyi.newmodule.mapper.UserMapper; import com.ruoyi.newmodule.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class UserServiceImpl implements IUserService { @Autowired private UserMapper userMapper; public void saveOrUpdate(User user){ if(user.getId() != null && user.getId()>0L){ this.userMapper.updateById(user); }else{ this.userMapper.insert(user); } } // ...其他方法... } ``` 这段程序实现了保存或更新用户的简单功能。 #### 实现Controller控制器 最后一步是在 Controller 中暴露 RESTful API 给前端或其他客户端应用程序使用： ```java package com.ruoyi.newmodule.controller; import com.ruoyi.common.core.web.controller.BaseController; import com.ruoyi.newmodule.domain.User; import com.ruoyi.newmodule.service.IUserService; import io.swagger.v3.oas.annotations.Operation; import io.swagger.v3.oas.annotations.tags.Tag; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/api/user") @Tag(name="用户管理", description = "提供增删改查等基础CRUD操作") public class UserController extends BaseController { @Autowired private IUserService userService; @PostMapping("") @Operation(summary = "新增/编辑用户信息") public AjaxResult addEdit(@RequestBody User user) throws Exception { try { userService.saveOrUpdate(user); return success(); } catch (Exception e) { log.error(e.getMessage(),e); throw new RuntimeException(e); } } // ...更多API路由... } ``` 上述例子中不仅包含了最基本的 POST 请求处理器，还集成了 Swagger 文档生成功能以便更好地维护 API 版本控制与文档化工作。 #### 使用代码生成器加速开发过程 值得注意的是，RuoYi 提供了一个非常强大的 **全界面化的代码生成器** 功能，能够帮助开发者迅速生成以上提到的各种文件结构以及初始代码内容，极大提高了工作效率[^1]。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今年不养猪只除草

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值