finna.idr/gateway-front

Public

WeChat Login

Code Issues Pull requests Events Packages Insights

master

Branch

Tag

李景昌<lijingchang@bob-fintech.com>

修改页面button

22e8ed40

7 commits

dist
src
.cnb.yml
.dockerignore
.gitignore
Dockerfile
README.md
docker-compose.yml
index.html
nginx.conf
package-lock.json
package.json
vite.config.js

API 网关管控面

基于 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

快速开始

1. 安装依赖

cd gateway-admin
npm install

2. 配置 API 网关地址

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

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

3. 启动开发服务器

npm run dev

访问 http://localhost:3000

4. 构建生产版本

npm run build

Docker 部署

方式一：单独部署前端

构建镜像

docker build -t gateway-admin .

运行容器

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

配置后端 API 地址

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

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

方式二：docker-compose 部署前后端（推荐）

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

配置说明

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

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

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

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

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

API 接口

基于 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`	获取所有路由