Spring Cloud的Eureka自定义界面，启动界面自定义

前言

Github获取源码

spring cloud eureka server注册中心的界面不太好看，想自定义。经查看源码发现（源码位于spring-cloud-netflix-eureka-server），servers的首页由template/eureka目录下的四个ftl文件组成。

在这里插入图片描述

将里面的文件改称自己的包括logo等图片修改成自己想要的就好。

<#import "/spring.ftl" as spring />
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <base href="<@spring.url basePath/>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Eureka</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="eureka/css/wro.css">

</head>

<body id="one">
<#include "header.ftlh">
<div class="container-fluid xd-container">
    <#include "navbar.ftlh">
    <h1>已注册服务列表</h1>
    <table id='instances' class="table table-striped table-hover">
        <thead>
        <tr><th>应用</th><th>AMIs</th><th>可用地址</th><th>状态</th></tr>
        </thead>
        <tbody>
        <#if apps?has_content>
            <#list apps as app>
                <tr>
                    <td><b>${app.name}</b></td>
                    <td>
                        <#list app.amiCounts as amiCount>
                            <b>${amiCount.key}</b> (${amiCount.value})<#if amiCount_has_next>,</#if>
                        </#list>
                    </td>
                    <td>
                        <#list app.zoneCounts as zoneCount>
                            <b>${zoneCount.key}</b> (${zoneCount.value})<#if zoneCount_has_next>,</#if>
                        </#list>
                    </td>
                    <td>
                        <#list app.instanceInfos as instanceInfo>
                            <#if instanceInfo.isNotUp>
                                <font color=red size=+1><b>
                            </#if>
                            <b>${instanceInfo.status}</b> (${instanceInfo.instances?size}) -
                            <#if instanceInfo.isNotUp>
                                </b></font>
                            </#if>
                            <#list instanceInfo.instances as instance>
                                <#if instance.isHref>
                                    <a href="${instance.url}" target="_blank">${instance.id}</a>
                                <#else>
                                    ${instance.id}
                                </#if><#if instance_has_next>,</#if>
                            </#list>
                        </#list>
                    </td>
                </tr>
            </#list>
        <#else>
            <tr><td colspan="4">No instances available</td></tr>
        </#if>

        </tbody>
    </table>

    <h1>General Info</h1>

    <table id='generalInfo' class="table table-striped table-hover">
        <thead>
        <tr><th>Name</th><th>Value</th></tr>
        </thead>
        <tbody>
        <#list statusInfo.generalStats?keys as stat>
            <tr>
                <td>${stat}</td><td>${statusInfo.generalStats[stat]!""}</td>
            </tr>
        </#list>
        <#list statusInfo.applicationStats?keys as stat>
            <tr>
                <td>${stat}</td><td>${statusInfo.applicationStats[stat]!""}</td>
            </tr>
        </#list>
        </tbody>
    </table>

    <h1>Instance Info</h1>

    <table id='instanceInfo' class="table table-striped table-hover">
        <thead>
        <tr><th>Name</th><th>Value</th></tr>
        <thead>
        <tbody>
        <#list instanceInfo?keys as key>
            <tr>
                <td>${key}</td><td>${instanceInfo[key]!""}</td>
            </tr>
        </#list>
        </tbody>
    </table>
</div>
<script type="text/javascript" src="eureka/js/wro.js" ></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('table.stripeable tr:odd').addClass('odd');
        $('table.stripeable tr:even').addClass('even');
    });
</script>
</body>
</html>

最后修改为

在这里插入图片描述

最后

更多参考精彩博文请看这里：《陈永佳的博客》
喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

来源：CSDN

作者：陈永佳

链接：https://blog.csdn.net/Mrs_chens/article/details/103845204

标签

eureka

table