基于 Vue 3 + Naive UI 开发的 API 网关管理前端，适用于中小企业。

• 🔐 分组管理 - API 分组创建、编辑、删除，域名绑定/解绑
• 🚀 API 管理 - API 全生命周期管理（创建、发布、下线、删除），支持 Swagger 导入
• 🔧 服务管理 - 后端服务配置（HTTP/gRPC/Dubbo/WebSocket）
• 🛣️ APISIX 路由 - 查看 APISIX 路由配置

• 框架: Vue 3 (Composition API)
• UI 组件: Naive UI
• 状态管理: Pinia
• 路由: Vue Router
• HTTP 客户端: Axios
• 构建工具: Vite

cd gateway-admin
npm install

编辑 vite.config.js，修改代理目标地址：

server: {
  proxy: {
    '/v1': {
      target: 'http://your-gateway-api:8080',  // 修改为实际地址
      changeOrigin: true
    }
  }
}

npm run dev

访问 http://localhost:3000

npm run build

docker build -t gateway-admin .

docker run -d -p 8088:8088 --name gateway-admin gateway-admin

编辑 nginx.conf 文件，修改 API 代理地址：

location /api/ {
    proxy_pass http://your-backend-host:8080/api/;
    # ...
}

使用 docker-compose 同时管理前后端服务，前端通过容器网络访问后端。

1. 修改 docker-compose.yml 中的后端镜像：

   gateway-backend:
     image: your-backend-image:latest  # 替换为实际的后端镜像
   

2. 如果后端需要构建，替换为：

   gateway-backend:
     build:
       context: ../gateway-backend  # 后端项目路径
       dockerfile: Dockerfile
   

3. nginx.conf 已配置通过容器名称访问后端：

   location /api/ {
       proxy_pass http://gateway-backend:8080;
   }
   

# 启动所有服务
docker-compose up -d

# 查看服务状态
docker-compose ps

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

• 前端地址：http://localhost:8088
• 后端地址：http://localhost:8080

gateway-admin/
├── src/
│   ├── api/              # API 接口定义
│   │   ├── request.js    # Axios 实例
│   │   ├── group.js      # 分组管理 API
│   │   ├── apiInfo.js    # API 管理 API
│   │   ├── service.js    # 服务管理 API
│   │   └── apiSix.js     # APISIX API
│   ├── components/       # 公共组件
│   ├── layouts/          # 布局组件
│   │   └── MainLayout.vue
│   ├── router/           # 路由配置
│   ├── stores/           # Pinia 状态管理
│   ├── views/            # 页面视图
│   │   ├── group/        # 分组管理
│   │   ├── api/          # API 管理
│   │   ├── service/      # 服务管理
│   │   └── apisix/       # APISIX 路由
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

基于 OpenAPI 3.0 规范，详见 gateway.yaml。

模块	接口	说明
分组	GET /v1/apig/groups	获取所有分组
分组	POST /v1/apig/groups	创建分组
分组	PUT /v1/apig/groups/{groupId}	更新分组
分组	DELETE /v1/apig/groups/{groupId}	删除分组
分组	POST /v1/apig/group/{groupId}/bind	绑定域名
API	GET /v1/apig/api	获取所有 API
API	POST /v1/apig/api	创建 API
API	POST /v1/apig/api/deploy	发布 API
API	POST /v1/apig/api/abolish	下线 API
API	POST /v1/apig/api/import-swagger	导入 Swagger
服务	GET /v1/apig/service	获取所有服务
服务	POST /v1/apig/service	创建服务
APISIX	GET /v1/apig/apisix/route	获取所有路由

1. 在 src/views/ 下创建新目录和组件
2. 在 src/router/index.js 添加路由
3. 在 src/layouts/MainLayout.vue 添加菜单项

1. 在 src/api/ 下创建或编辑对应模块的 API 文件
2. 使用 request.js 中的 axios 实例
3. 在视图中导入使用

• 开发环境使用 Vite 代理转发 API 请求
• 生产环境需配置正确的 API 网关地址
• 建议配置 HTTPS 和认证机制

MIT