我命由我不由天，我的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配置参考：

<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，然后访问一下，看一下效果：

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

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

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