4 Spring Cloud集群服务清单及搜索页面实现

在使用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>