nacos界面定制化

nacos界面定制化

前言
为什么要做nocos定制化？
随着eureka达到了性能瓶颈，官方不在提供维护更新。这将需要替代品出现，而nacos在阿里这么多年的支撑下已成蓬勃发展之势。所以我申请用nacos替换eureka，并得到批准。由于我在替换的过程中，发现了一些问题，且现有nacos界面不满足我们的使用场景，并且官方镜像nacos-1.2.1版本存在部分小缺陷，阿里的大佬应该不至于犯这种低级错误，所以我猜测阿里开源的nacos不是内部使用的。所以需要定制化。
一、下载源码
源码地址：https://github.com/alibaba/nacos，下载之后导入idea。

一、address ：地址服务相关
二、api ： 这个里面，主要是把naming和config的api进行了抽取，从结构上看更清晰一些，api的具体实现，都还在client模块里面
三、client： 这个里面放的是Nacos客户端的代码，服务发现和配置管理2个功能的客户端
四、cmdb：Nacos近期发布了0.7.0版本，该版本支持对接第三方CMDB获取CMDB数据、使用Selector机制来配置服务的路由类型、支持单机模式使用MySQL数据库、上线Node.js客户端，并修复了一些bug
五、common：共用工具类
六、config： Nacos配置中心的实现
七、console: Nacos 控制台相关实现
八、core： 属性加载，初始化，监听器相关
九、distribution：发布相关
十、naming：Nacos的核心功能，动态服务发现

二、定制化内容与官方nacos-1.2.1镜像的小缺陷
官方nacos服务详情界面是这样的：

而我们实际项目中，eureka界面中有一个服务地址穿透，点击需要跳转到swagger接口界面或者其他界面。


所以也希望nacos有这样的服务地址穿透，但官方开源的nacos并不支持

1、优化的bug

​ (1)、自定义分组无法上下线。

​ (2)、配置管理界面，在不是首页的情况下点击详情或者编辑、或者删除、或者新建，再点击返回，会回到首页。

​ (3)、在配置历史页面输入dataid和分组名搜索后，搜索条件切换菜单会一直存在，除非重新登录）

2、定制化内容

​ (1)、去掉header上面的（首页、文档、博客、社区）导航按钮，仅保留国际化按钮，登录页、登陆后logo与网页logo更换成蓝莲花图标。

(2)、服务实例列表增加服务实例访问地址（支持动态配置、默认配置、有效期配置）

配置说明：

需要配置元数据，key值为suffix注意一定得是suffix，代码写死的key，若不配置或者key值配置错误，则默认不配置，不配置时，访问地址为ip:port。若配置suffix=none，则该实例无访问地址，表格里展示该实例无访问地址。若suffix不为none，则访问地址为ip:port拼接上suffix。

配置方式：

1、重启实例服务依然有效：

在实例服务bootstrap.yml文件中增加配置内容：**metadata: {suffix: /doc.html}**多个元数据配置用英文，隔开。

2、重启实例服务失效（动态配置）

在服务想去列表，点击编辑，修改增加元数据，再点击确认。注意这种配置方式，实例服务重启后便失效。

2、源码修改

实例服务详情表格增加一列访问地址：

格式渲染：

点击事件：地址读取元数据配置，如若没有配置元数据，则默认IP:port的形式

自定义分组无法正常上下线问题：
由于状态改变接口没有传分组名，所以只能正常上下线默认分组

logo替换：