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

image.png


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

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

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

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

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

师傅:徒儿,莫慌,让为师带你慢慢给你演示下

image.png

 

一、思路

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

(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

目录下。

 image.png

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

image.png

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

image.png

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

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

image.png

image.png

image.png

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

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


猜你喜欢

转载自blog.51cto.com/11142439/2481025
今日推荐