Nacos页面实现API接口文档(swagger)效果

一.问题描述

公司的微服务项目之前适配nacos只是用来读取配置文件（nacos的配置文件的页面确实更友好、简洁），最近需要把注册中心从eureka切换到nacos。但是有一个问题，nacos是不支持eureka的swagger页面跳转的，所以这个博客就是提供一个比较简便的解决思路：springcloud项目使用nacos作为注册中心，如何实现eureka的API接口文档(swagger)跳转效果。

注意：本博客非nacos使用教程，没有用过nacos的小伙伴戳这里先了解下：nacos官方文档

二.解决思路

2.1大致思路

后端获取API接口文档（下面统称为swagger）的页面地址，然后返回给前端展示。

2.2后端细节

其实后端确定了方案，前端按照后端来做就好了，就不再说前端的细节了。后端的主要问题在于：（1）swagger的页面地址怎么获取？（2）在哪一步将相关的数据返回给前端？

2.2.1获取swagger地址

这一点其实有点废话了，肯定是在配置文件里面配置swagger地址，然后魔改nacos对应的代码保存这个配置。（确定思路，暂定为魔改nacos代码这个方案）

2.2.2数据返回给前端

这一点其实想想也能明白，类似eureka，每个服务名下面都有多个实例，每个实例都是一个swagger跳转地址。那么相应的，在nacos里，肯定也是一样的道理，只要前端调用nacos-server接口获取实例信息，携带上swagger参数就行了。

三.解决方案

3.0准备工作

下载nacos源码导入idea，地址戳这里：nacos-1.4.0-tag

3.1确认前端调用的接口

先从简单的来，先确认前端调用的nacos-server是哪个接口，这样才好去找到对应的后端代码位置。（其实先看前端调用接口是为了全局观，不要某个地方一有思路就开干，要纵观全局，说不定其他地方有更简便的方法，同时这样也能梳理一下完整的流程）
打开nacos前端页面：http://ip:port/nacos

点击详情按钮，会调用接口获取该服务名下的所有实例信息：
接口路径：/v1/ns/catalog/instances（nacos-naming模块下的CatalogController）
接口返回信息：

注意这个metadata，其实就是可自定义配置的属性（个人理解）。eureka也有个metadata的配置，初步猜测用法一样，也就是配置文件metadata属性新增swagger地址参数。

3.2后端配置文件新增swagger地址

配置文件新增一个swagger地址：

status-page-url-path是和eureka的配置参数名保持一致，减少迁移的成本。重启后在查看前端的接口返回：

ok，获取到了swagger地址的配置，剩下的就是前端代码修改了。2.2.1的魔改nacos后端代码的方案落空了，又错过了成长的机会，痛心！
最终修改后的效果：

3.3 小提示

（1）实例列表详情前端代码（InstanceTable.js）位置：

（2）前端修改完需要打包
（3）后端整体打包
mvn -Prelease-nacos -Dmaven.test.skip=true clean install -U
打包后的nacos-server.jar在distribution模块文件夹下面

四.小结

（1）重要的事情说三遍：在接触到新技术/框架时，尤其是网上缺少相关案例的时候，一定要去官方查看相关文档 X 3！！！比如issues翻一翻有没有相似案例，比如去技术文档找一找有没有能用的api，还有最重要的就是观摩一下官方的demo。
（2）纵观全局真的很重要，如果我上来就按照魔改nacos后端代码的方案来，成本和难度太高了，估计会把自己搞吐血。所以有时候动手前先把整体流程梳理清晰，由浅至深反而事半功倍。
（3）本博客用到的nacos官方地址以及csdn相关案例
nacos-open-api    nacos-code-1.4.0-tag    nacos-issues相关案例    csdn相关案例
（4）本博客只是提供一种简单的思路，各位看官如果有更牛、灵活好玩的方法欢迎留言哦！

萌新发言，不喜勿喷，欢迎大佬指出不当之处！