1. 小郑聊编程
  2. 首页
  3. Spring Boot Admin
  4. 正文

04、Spring Boot Admin系列-自定义开发UI界面

分类：Spring Boot Admin    2024-02-01    阅读(148)

前言

Spring Boot Admin提供了丰富的监控及其他功能，但是在正式上线前，需要二次开发，包含修改界面为自家公司或者去掉不需要的功能，下面将修改UI界面。

UI界面修改

1、 环境准备；
安装nodejs/npm/cnpm等VUE开发环境
 

下载admin源码
 
2、 导入源码；
IDEA打开源码
 
使用IDEA打开spring-boot-admin-server-ui模块，或者使用VS Code导入UI模块
 

 
3、 package.json添加项目启动命令：“serve”:“vue-cli-serviceserve”；
 

1、 运行项目；
安装依赖：npm install
运行项目：npm run-script serve
 
访问：http://localhost:8080，接下来就可以修改界面代码了！
 
2、 修改示例：这项比较多余，于是想要删除关于我们这个菜单；
 
3、 注释about下这个这段代码；
 
4、 保存后访问首页，发现已被删除；
 
5、 打包UI项目：npmrun-scriptbuild；
 
6、 切换至spring-boot-admin根目录下，执行打包脚本：mvnw-Dmaven.test.failure.ignore=true-Dmaven.test.skip=truecleanpackage（过程很慢，耐心等待）；
 
 
7、 自定义包需要引入到server包中，实际开发时，需要上传到maven私服，然后引入私服包，这里博主就直接引用本地，修改admin项目pom； 

        <dependency>
            <groupId>de.codecentric</groupId>
            <artifactId>spring-boot-admin-starter-server</artifactId>
            <version>${

     sring.admin.version}</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</artifactId>
            <version>2.3.0</version>
            <scope>system</scope>
              <!--添加jar包路径-->
            <systemPath>E:\open-source\spring-boot-admin\spring-boot-admin-server-ui\target\spring-boot-admin-server-ui-2.3.0-SNAPSHOT.jar</systemPath>
        </dependency>

1、 重启admin项目，发现修改成功，后续根据公司实际情况，二次开发即可；
&nbsp;