tnblog
首页
精品
资源
登录
本来什么都没有,终将什么都失去。不应贪心没得到的,而该珍惜和感恩拥有的
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术

自己实现一个consul的服务管理,功能持续完善

626人阅读 2020/6/8 15:16 总访问:423464 评论:2 手机 收藏
分类: 微服务

因为自带的consul服务管理功能还是比较有限,比如想要移除一个consul中不要的服务,服务集群管理,consul作为配置中心管理等,所以就想自己来写一个consul服务的管理,一点一点的做慢慢的完善。


目前大概的一个效果:

上面的服务名是使用Tab菜单展示出来的,然后点击Tab菜单拿到服务名对应的服务实例,然后实现了一个不要服务的删除


这里暂时用到了consul三个接口:

获取consul服务名:http://consul地址/v1/catalog/services

获取consul实例:   http://consul服务地址/v1/catalog/service/<consul服务名>

删除consul接口:   http://consul服务地址/v1/agent/service/deregister/<consul服务id>


有接口的话其实就会比较方便了,后台写个接口调用前台展示即可

后台接口可以这样简单调用一下

public IActionResult GetConsulService()
{
    HttpClient httpClient = new HttpClient();
    string reuslt = httpClient.GetAsync("http://consul地址/v1/catalog/services").Result.Content.ReadAsStringAsync().Result;
    return Content(reuslt);
}


public IActionResult GetConsulInstancesByService(string serviceName)
{
    HttpClient httpClient = new HttpClient();
    string reuslt = httpClient.GetAsync("http://consul地址/v1/catalog/service/" + serviceName).Result.Content.ReadAsStringAsync().Result;
    return Content(reuslt);
}

public IActionResult DeleteConsulServiceByName(string serviceId)
{
    HttpClient httpClient = new HttpClient();
    string reuslt = httpClient.PutAsync("http://consul地址/v1/agent/service/deregister/" + serviceId, null).Result.Content.ReadAsStringAsync().Result;
    return Content(reuslt);
}

前台使用的是vue+layui

html:

<div class="layui-tab" id="consulservice" lay-filter="consulservice" style="margin-top:5px">
    <ul class="layui-tab-title">
        <li v-for="(item,key,index) in consulservice" v-bind:class="index==0?'layui-this':''" v-bind:lay-id="key" :key="item.key">{{key}}</li>
    </ul>
    <div class="layui-tab-content">
        <table class="layui-table layui-form">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Node</th>
                    <th>Address</th>
                    <th>Port</th>
                    <th>Node Checks</th>
                    <th>显示</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in instances">
                    <td>{{item.ServiceID}}</td>
                    <td>{{item.Node}}</td>
                    <td>
                        {{item.ServiceAddress}}
                    </td>
                    <td>{{item.ServicePort}}</td>
                    <td>是</td>
                    <td>
                        <input type="checkbox" checked lay-skin="switch">
                    </td>
                    <td><a href="/admin/category/update/id/9.html">修改</a> | <a class="del" data-id=".id9" @@click="deleteService(item.ServiceID,index)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

js:

<script>

    var consulserviceVue = new Vue({
        el: "#consulservice",
        data: {
            consulservice: {},
            instances: []
        },
        created: function () {
        },
        updated: function () {
            //数据是vue动态加载的,需要重新渲染某些layui组件
            layui.use(['form'], function () {
                var form = layui.form;
                form.render();
            });
        },
        methods: {
            deleteService: function (serviceId, index) {
                if (confirm("确定删除嘛?删除服务很危险的哦")) {
                        $.post('/Consul/DeleteConsulServiceByName', { serviceId: serviceId }, function (result) {
                            if (result == "") {
                                alert("删除成功!");
                                //删除数据源中对应的数据,vue会自动删除对应的dom节点
                                consulserviceVue.$data.instances.splice(index, 1);
                            }
                        });
                }
            }
        }
    });

    layui.use(['element', 'form'], function () {
        var element = layui.element;
        var form = layui.form;
        //监听Tab菜单事件
        element.on('tab(consulservice)', function () {
            var serviceName = this.getAttribute('lay-id');
            getConsulInstancesByService(serviceName);
        });
    });

    var getConsulInstancesByService = function (serviceName) {
        $.get('/Consul/GetConsulInstancesByService', { serviceName: serviceName }, function (result) {
            var instances = JSON.parse(result);
            consulserviceVue.$data.instances = instances
        });
    }

    $(function () {
        $.get('/Consul/GetConsulService', function (result) {
            var jsonobj = JSON.parse(result);
            consulserviceVue.$data.consulservice = jsonobj;
            //先获取第一个分类下的服务
            var poi = 0;
            for (var key in jsonobj) {
                if (poi == 0) {
                    getConsulInstancesByService(key);
                }
                poi++;
            }
        });
    });
</script>

未完待续......下期准备实现一个添加服务与权限管理相关的内容



评价