定制化UI界面

简介: 本文介绍如何基于若依(RuoYi)框架定制化项目界面,包括更换浏览器标签页logo与标题、系统页面logo与标题、登录页名称及背景图,并去除源码地址、文档地址及官网标识,同时调整主题UI风格,打造符合企业形象的前端界面,适用于Vue3版本脚手架项目。

ogo、背景图更换
如果使用若依框架项目做为脚手架,那么我们肯定需要在页面显示中,使用符合自己公司或者项目的标识才行,需要更换的地方很多,我们依次来解决它
● 浏览器标签页logo标识、标题
● 系统页面中的logo标识、标题
● 登录名称及背景图
● 去除源码地址 & 文档地址 &若依官网标识

浏览器标签页logo标识、标题
● logo替换
找到资料中UI资料目录下的logo图标,替换前端项目中的public文件夹,删除原有的favicon.ico,把新拷贝过来的logo更名为favicon.ico即可

● 标题更换
找到根目录下的index.html文件,把title更换为自己想要的内容即可

● 标题替换
若依的系统页面标题引用的是开发环境的配置,我们只需要修改开发的环境的VITE_APP_TITLE属性即可
如下图:

扩展阅读:
关于环境的文件一般有三个
● .env.development 开发环境的配置,默认的环境
● .env.production 生产环境
● .env.staging 测试环境
在打包或启动项目的时候,可以加参数来使用不同的环境,需要参考package.json中的配置
● logo替换
找到当天资料中的logo文件,替换 src/assets/logo/logo.png文件

最终效果:

登录名称及背景图
登录名称和背景图,我们可以直接找到登录的组件进行修改即可
组件位置:src/views/login.vue
● 登录名称

● 背景图

资料中已经提供了背景图,可以自行命名更换,注意图片名可能不一样
最终效果图:

去除源码地址 & 文档地址 & 若依官网标识
● 利用菜单功能,去除若依官网菜单项目

● 使用VS Code全局搜索功能,去除右上角的源码地址和文档地址
○ 文件路径:RuoYi-Vue3-master\src\layout\components\Navbar.vue
● 最终效果:

主题UI风格调整

相关文章
|
20小时前
操作日志-处理流程
`@Log` 是一个自定义操作日志注解,用于记录系统操作信息。可指定模块标题、业务类型、操作人类型,并支持是否保存请求/响应参数及排除敏感字段,适用于管理类操作的日志追踪。
|
20小时前
|
NoSQL MongoDB
3.4.1 文档的插入
MongoDB中使用insert()或insertMany()向集合插入文档,支持单条或批量添加。若集合不存在则自动创建,未指定_id时自动生成,整型需用NumberInt(),日期用new Date()。键值对有序,区分类型和大小写,不可重复,键命名需遵循UTF-8规范,避免特殊字符。批量插入失败不回滚已成功数据,建议用try-catch捕获异常。
|
20小时前
|
存储 NoSQL Linux
2.4 Linux系统中的安装启动和连接
本文介绍在Linux系统部署单机MongoDB用于生产环境的完整步骤,包括下载、解压、目录配置、日志与数据路径设置、配置文件编写及服务启停方法。操作类似Windows,通过配置`mongod.conf`实现后台运行,支持命令行与图形工具连接,并提供防火墙处理与安全关闭服务方案,确保稳定运行。
|
20小时前
|
JSON NoSQL MongoDB
3.4.2 文档的基本查询
MongoDB使用`find()`查询数据,支持条件筛选与投影。`find({})`查所有文档,`_id`字段默认存在;可指定条件如`{userid:'1003'}`查询匹配记录,用`findOne()`返回第一条。投影参数控制字段显示,如`{userid:1,nickname:1,_id:0}`仅显指定字段,省略 `_id`。
|
20小时前
3.3.3 集合的删除
集合删除语法为 `db.collection.drop()` 或 `db.集合.drop()`,成功返回 true,失败返回 false。例如:`db.mycollection.drop()` 可删除 mycollection 集合。
|
1天前
|
安全 Java 大数据
ArrayList扩容机制
初始化Map应避免容量设置不当,推荐使用Guava的`newHashMapWithExpectedSize`或手动计算初始容量。禁止使用`Executors`创建线程池,易因无界队列或过多线程引发OOM,应显式通过`ThreadPoolExecutor`构建,推荐结合Guava设置命名线程工厂。`Arrays.asList`返回不可变列表,禁止修改操作;遍历Map时优先使用`entrySet`提升性能;`SimpleDateFormat`非线程安全,建议用`ThreadLocal`隔离或JDK8新时间API;并发更新记录需加锁,推荐乐观锁(version控制),冲突率低时重试不少于3次。
|
20小时前
3.5.3 排序查询
sort()方法用于对查询结果排序,1为升序,-1为降序,可按多字段排序。语法:db.集合名.find().sort({字段:1/-1})。与skip()、limit()联用时,执行顺序为先排序,再跳过,最后限制显示。
|
20小时前
|
NoSQL MongoDB
3.4.3 文档的更新
MongoDB update语法用于修改集合中的文档,支持覆盖更新与局部更新。使用`$set`可避免字段丢失,`multi: true`实现批量修改,`$inc`则用于数值增减。注意指定查询条件与选项,确保数据准确更新。(238字)
|
20小时前
|
存储 NoSQL 关系型数据库
4-MongoDB索引知识
MongoDB索引通过B树结构提升查询效率,避免全表扫描。支持单字段和复合索引,前者适用于单一字段排序与查询,后者按字段顺序构建,优化多条件查询与排序操作,显著提升大数据量下的查询性能。