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

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

悟纤：师傅，我看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配置参考：

       
            de.codecentric
            spring-boot-admin-starter-server
            2.2.0
            
                
                     de.codecentric
                     spring-boot-admin-server-ui
                
            
        

          
                de.codecentric  
                spring-boot-admin-server-ui-custom  
                2.2.0  
                system  
                ${project.basedir}/libs/spring-boot-admin-server-ui-2.2.0-SNAPSHOT.jar  
        

2.7 验证

    运行admin-server，然后访问一下，看一下效果：

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

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

我就是我，是颜色不一样的烟火。

我就是我，是与众不同的小苹果。