在使用Spring Cloud的叢集中，有時候想要看到叢集中所提供的所有服務清單。但目前未找到較好的應用。Swagger能夠提供每一個應用所提供的服務清單，但叢集中所有的服務清單並沒有整合起來。想要看哪個應用提供的服務清單需要到各個應用上去檢視。而且它所提供的資訊過多，很多時候都不需要使用到。

因此，在基於Actuator及Swagger基礎上，開發了一個整合顯示所有清單的頁面，並提供簡單的搜尋功能。當然這還只是個原型，所提供的介面資訊有限。後續會將IP、埠等資訊新增進去。甚至可以更進一步，通過Slueth一起，整合每個服務的呼叫時間資訊、成功率等，甚至是錯誤時的錯誤資訊。

先來看這個簡單的應用是如何實現的。其顯示效果如下所示：

1. Maven依賴

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-eureka</artifactId>
            <version>1.4.2.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>${swagger2.version}</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>${swagger2.version}</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.9</version>
        </dependency>

    <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

2. API介面

原理就是通過EurekaClient獲取叢集中所有應用清單，然後再遍歷每一個應用，呼叫Swagger的介面獲取其每一個介面資訊。

package com.liuqi.learn.spring.testService.web;

import com.alibaba.fastjson.JSONObject;
import com.netflix.discovery.EurekaClient;
import com.netflix.discovery.shared.Applications;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import sun.rmi.log.ReliableLog;

import java.util.*;

/**
 * 擴充套件的API介面，提供如服務清單等服務
 */
@RestController
@RequestMapping("/api")
@Api("API介面")
public class ApiController {
    private  static Logger logger = LoggerFactory.getLogger(ApiController.class);

    @Autowired
    private RestTemplate restTemplate;

    @Autowired
    private EurekaClient eurekaClient;

    /**
     * 測試介面，返回test字串
     *
     * @return
     */
    @GetMapping("/services")
    @ApiOperation(value = "獲取服務清單", notes = "用於獲取Spring Cloud叢集中所有應用提供的服務清單")
    @SuppressWarnings("unchecked")
    public List<Map<String, String>> test() {
        Applications applications = eurekaClient.getApplications();
        List<Map<String, String>> apiList = new ArrayList<>();

        // 遍歷叢集中每個應用
        applications.getRegisteredApplications().stream().forEach(application -> {
            String name = application.getName();

            // 呼叫actuator的info請求獲取該應用的資訊
            JSONObject infoObject = null;
            try {
                infoObject = restTemplate.getForObject("http://" + name + "/info", JSONObject.class);
            } catch (Exception ex) {
                // 失敗時處理下一應用
                logger.error("獲取應用資訊失敗！", ex);
                return;
            }

            String appName = Optional.ofNullable(infoObject.getString("name")).orElse(name);
            String appDescription = Optional.ofNullable(infoObject.getString("description")).orElse("");

            // 呼叫swagger介面獲取該應用提供的介面資訊
            JSONObject apiObject = restTemplate.getForEntity("http://" + name + "/v2/api-docs", JSONObject.class).getBody();
            JSONObject pathsObject = apiObject.getJSONObject("paths");

            if (null == pathsObject) {
                return;
            }

            // 處理該應用的每一個介面資訊
            pathsObject.forEach((path, value) -> {
                JSONObject contentObject = ((JSONObject) value);
                contentObject = contentObject.getJSONObject(contentObject.keySet().toArray()[0].toString());

                MapBuilder<String, String> mapBuilder = new MapBuilder<>();

                apiList.add(mapBuilder
                        .put("name", contentObject.getString("summary"))
                        .put("description", contentObject.getString("description"))
                        .put("path", path)
                        .put("appName", appName)
                        .put("appDescription", appDescription)
                        .getMap());
            });
        });

        return apiList;
    }

    /**
     * Map構建器
     *
     * @author LiuQI 2018/5/25 8:32
     * @version V1.0
     **/
    private class MapBuilder<K, V> {
        private Map<K, V> map;
        public MapBuilder() {
            this.map = new HashMap<>();
        }

        /**
         * 向Map中新增鍵值對
         *
         * @param key
         * @param value
         * @return
         */
        public MapBuilder put(K key, V value) {
            this.map.put(key, value);
            return this;
        }

        /**
         * 獲取構建的Map
         *
         * @return
         */
        public Map<K, V> getMap() {
            return map;
        }
    }
}

3. 前臺頁面

呼叫後臺提供的介面展示資料，並提供搜尋功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <script src="js/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>

    <style>
        td, th {
            border: 1px solid gray;
            border-width: 0px 1px 1px 0px;
            padding: 0px 10px;
            line-height: 1.8em;
        }

        th {
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="text-align: center; ">
            <input type="text" style="line-height: 2em; margin-bottom: 10px; width: 500px; " placeholder="關鍵字..." id="keyInput"
                autofocus/>
            <input type="button" value="搜尋" v-on:click="search"/>
            <input type="button" value="清空" v-on:click="clear"/>
        </div>

        <table cellpadding="0" cellspacing="0" border="1"
                style="font-size: 0.9em; line-height: 1.4em; width: 100%; ">
            <tr>
                <th>應用</th>
                <th>應用說明</th>
                <th>服務</th>
                <th>服務描述</th>
                <th>服務路徑</th>
            </tr>
            <tr v-for="item in apps">
                <td>{{item.appName}}</td>
                <td>{{item.appDescription}}</td>
                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
                <td>{{item.path}}</td>
            </tr>
        </table>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                apps: null,
                orginalApps: null
            },
            created () {
                var _this = this;
                $.ajax({
                    url: '/api/services',
                    type: 'get',
                    success: function (data) {
                        _this.orginalApps = data
                        _this.apps = data
                    }
                });
            },
            methods: {
                search: function () {
                    var key = $("#keyInput").val();
                    this.apps = new Array();
                    for (var i in this.orginalApps) {
                        var item = this.orginalApps[i];
                        if (-1 != item.appName.indexOf(key)
                               || -1 != item.appDescription.indexOf(key)
                               || -1 != item.name.indexOf(key)
                               || -1 != item.description.indexOf(key)
                               || -1 != item.path.indexOf(key)) {
                            this.apps.push(item);
                       }
                    }
                },
                clear: function () {
                    this.apps = this.orginalApps;
                    $("#keyInput").val("");
                }
            }
        });
    </script>
</body>
</html>