I could not help my life by the day, I am the master of UI "Spring Boot Admin UI customization of the page" - the first 298

image.png


"So perverted needs, not what I really want to study, more than a waste of time."

Wu fiber: Master, I see admin-ui page is not very pretty thing?

Master: It is undeniable admin-ui page looks good, but in practice, the leadership always ***, you know, so the product say, to melt into the entire project, requires a unified look and feel.

Wu Fiber: toxic product of it, it should not be toxic leadership (leadership did right here, say leaders, tomorrow I may not receive paychecks home).

Wu Fiber: Although she has ten thousand "***", but had to do. This is the war of products and technologies.

Master: disciples, Mo panic, let the teacher take you slowly show you the next

image.png

 

First, the idea

       Idea here is to provide a self-defined, is not necessarily the only way of thinking, but this idea practical operation relatively strong, indeed embodiment may be employed in practice.

(1) find spring-boot-admin source code.

(2) find information about spring-boot-admin-server-ui source code, you can see a catalog frontend is to use vue wrote a front page.

(3) on the front page to modify, change after completing, recompiling.

(4) repackaging projects.

(5) using our own compilation of admin-server-ui.

 

Second, the actual operation

2.1  Download Source

    Download Source spring-boot-admin-master, Download:

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

2.2  modify the front file


In front file:

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

Under contents.

 image.png

For example, we modify views / applications / i18n.zh.json file: 

image.png

2.3  front-end files are compiled

Use the following command to compile in the frontend directory:

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  verification

    Run admin-server, and then access it, look at the results:

image.png

Wu fiber: Master, we still live in friendship and product of it, nothing will custom development situation, it is not necessary.

Master: This is indeed, in the case of non-essential, or do not spend the experience in the above, or spend their time on other functions more valuable now, has looked after all this is for developer use good looking.

image.png

image.png

image.png

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

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


Guess you like

Origin blog.51cto.com/11142439/2481025