我命由我不由天,我的UI我做主「定制Spring Boot Admin UI的页面」- 第298篇

相关历史文章(阅读本文之前,您可能需要先看下之前的系列👇

为数据可视化赋能Spring Boot Admin - 第297篇

 

「这么变态的需求,还真不是我想研究的,多浪费时间」

悟纤:师傅,我看admin-ui的页面不是挺好看的嘛?

师傅:不可否认admin-ui的页面很好看,但是在实际中,领导总是***,你懂得,所以产品就说,这个要融进整个项目,需要统一外观风格。

悟纤:产品有毒吧,不应该是领导有毒吧(领导没在这里吧,这么说领导,明天不得领工资让我回家了)。

悟纤:虽然心里有一万只“草泥马”,但是还得做。这就是产品和技术的战争。

师傅:徒儿,莫慌,让为师带你慢慢需它的外壳。

 

一、思路

       这里只是提供一种撕开的思路,不见得是唯一的思路,但是这种思路实操性比较强,确实可以在实际中采用的方式。

(1)找到spring-boot-admin的源码。

(2)找到有关spring-boot-admin-server-ui的源码,可以看到一个frontend目录,就是使用vue写的前端页面了。

(3)对前端页面进行修改,改完之后,重新进行编译。

(4)重新打包项目。

(5)使用我们自己编译的admin-server-ui。

 

二、实际操作

2.1 下载源码

    下载源码spring-boot-admin-master,下载地址:

https://github.com/codecentric/spring-boot-admin

2.2 修改前端文件

前端文件在:

spring-boot-admin-master/spring-boot-admin-server-ui/src/main/frontend

目录下。

比如我们修改一下views/applications/i18n.zh.json文件: 

2.3 对前端文件进行编译

在frontend目录下使用如下命令编译:

npm install

npm run build

编译成功的话,在spring-boot-admin-server-ui/target/dist可以看到编译的文件。

 

2.4 打包项目

    将前端文件打包到admin-server-ui.jar文件中,在spring-boot-admin-master下执行如下命令:

./mvnw clean package

注意:第一次使用这个打包命令会感觉卡主一样,等待几分钟,然后就会有信息打印了,第一次打包也会时间比较长。

 

打包之后,可以看到spring-boot-admin-server-ui/target下的jar文件:spring-boot-admin-server-ui-2.2.0-SNAPSHOT.jar ,其它的jar就不用管了。

 

2.6 引入到admin-server项目中使用

       要想有效果,地方要找对,不然白忙乎了… 看正确的姿势。

    使用方式可以将这个jar上传到maven中,另外一方面直接使用本地文件,还有需要注意的地方就是原先的admin-start-server就要排除admin-ui的依赖,pom.xml配置参考:

        <dependency>
            <groupId>de.codecentric</groupId>
            <artifactId>spring-boot-admin-starter-server</artifactId>
            <version>2.2.0</version>
            <exclusions>
                <exclusion>
                     <groupId>de.codecentric</groupId>
                     <artifactId>spring-boot-admin-server-ui</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>  
                <groupId>de.codecentric</groupId>  
                <artifactId>spring-boot-admin-server-ui-custom</artifactId>  
                <version>2.2.0</version>  
                <scope>system</scope>  
                <systemPath>${project.basedir}/libs/spring-boot-admin-server-ui-2.2.0-SNAPSHOT.jar</systemPath>  
        </dependency>

2.7 验证

 运行admin-server,然后访问一下,看一下效果:

悟纤:师傅,咱们还是和产品友好相处吧,没啥情况就要定制开发,没有必要吧。

师傅:这个确实是,在非必要的情况下,还是不要花这个经历在这个上面了,还是把时间用在更有价值的其它功能上吧,毕竟这个是给开发人员使用的,已经长得很好看。

我就是我,是颜色不一样的烟火。
我就是我,是与众不同的小苹果。

学院中有Spring Boot相关的课程:

à悟空学院:https://t.cn/Rg3fKJD

SpringBoot视频:http://t.cn/A6ZagYTi

Spring Cloud视频:http://t.cn/A6ZagxSR

SpringBoot Shiro视频:http://t.cn/A6Zag7IV

SpringBoot交流平台:https://t.cn/R3QDhU0

SpringData和JPA视频:http://t.cn/A6Zad1OH

SpringSecurity5.0视频:http://t.cn/A6ZadMBe

Sharding-JDBC分库分表实战:http://t.cn/A6ZarrqS

分布式事务解决方案「手写代码」:http://t.cn/A6ZaBnIr

 

 

悟纤 CSDN认证博客专家 知远公司创始人 架构师 访问1000万+
「公众号SpringBoot」:
①阿里巴巴前高级研发工程师;②估值20亿美金的Blued架构师;③北京知远公司创始人;④浙江甄才公司架构师;⑤云课堂学员10000+;⑥博客访问量1000万+;⑦10年互联网行业从业;⑧340万的访问《从零开始学SprngBoot》作者;⑨技术加盟多个独立项目。
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 19.89元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值