# APIHub

**Repository Path**: lsy-points/APIHub

## Basic Information

- **Project Name**: APIHub
- **Description**: API接口文件管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-04
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# APIHub - 接口文档管理系统

## 预览地址

[http://121.43.111.133:5174/](http://121.43.111.133:5174/)

## 项目概述

APIHub 是一个基础的接口文档管理系统（个人小白提升全栈开发能力的练手项目），为团队提供的 API 文档管理功能。系统支持 API 文档的创建、编辑、查看和搜索，并提供基本的团队协作功能。系统采用前后端分离架构，前端基于 Vue3 + TypeScript，后端基于 Node.js + MySQL。

## 功能说明

- 体验账号：liaosy / 123（也可自行注册登录），项目里面成员账号为列表所显示的用户名，密码：123
- 登录页和首页：用户注册、登录功能，个人信息管理（用户名昵称修改，密码暂时不支持修改），主题配置（明暗主题切换），水印开关控制，项目列表，展示创建的和被邀请加入的项目
- 文档管理：模块树结构：支持无限层级的模块组织（CRUD 操作），鼠标悬浮在项目信息显示回退按钮，搜索框搜索定位 API，支持 分享 url 链接进行接口定位
- API 文档操作：完整的 CRUD 功能，支持模块和 API 接口的增删改查，支持 object/array 类型参数的无限级嵌套，根据输入的请求/响应参数生成请求/响应示例
- 项目管理：成员管理：分页列表（编辑分配角色），成员添加（暂时为展示该系统所有账号）、角色分配，角色管理 CRUD，分配该角色的权限。（创建者为超级管理员，权限不可修改，拥有删除项目权限）

## 系统架构

```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端 (Vue3)   │    │   后端 (Koa)    │    │   数据库 (MySQL)│
│                 │    │                 │    │                 │
│  • Vue 3.5.18   │◄──►│  • Koa 3.0.1    │◄──►│  • MySQL 8.0+   │
│  • TypeScript   │    │  • TypeScript   │    │  • 连接池管理   │
│  • Vite 7.0.6   │    │  • JWT认证      │    │  • 事务支持     │
│  • Pinia状态管理│    │  • bcrypt加密   │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
```

## 技术架构

### 前端技术栈

- Vue 3 + TypeScript
- Pinia 状态管理
- Vue Router 4
- Axios 网络请求
- Element Plus UI 框架
- Vite 构建工具

### 后端技术栈

- Node.js + TypeScript
- Express 框架
- MySQL 数据库
- JWT 身份验证
- Bcrypt 密码加密

## 项目结构

```
api-hub/
├── api-client/                 # 前端项目
│   ├── src/
│   │   ├── common/            # 公共模块
│   │   │   ├── apis/          # API接口定义
│   │   │   ├── components/    # 公共组件
│   │   │   ├── constants/     # 常量定义
│   │   │   ├── types/         # TypeScript类型
│   │   │   └── utils/         # 工具函数
│   │   ├── composables/       # 组合式函数
│   │   ├── directives/        # 自定义指令
│   │   ├── http/             # HTTP请求配置
│   │   ├── pages/            # 页面组件
│   │   │   ├── AdminPanel/   # 管理面板
│   │   │   ├── Project/      # 项目api主页面
│   │   │   ├── Login/        # 登录页面
│   │   │   └── Error/        # 错误页面
│   │   ├── router/           # 路由配置
│   │   └── store/            # 状态管理
│   ├── package.json
│   └── vite.config.js
├── api-server/                # 后端项目
│   ├── config/               # 配置文件
│   ├── controllers/          # 控制器
│   ├── router/               # 路由定义
│   ├── utils/                # 工具函数
│   ├── package.json
│   └── index.ts
└── readme.md
```

## 核心功能

1. **模块树管理**：支持无限层级的模块树结构，提供懒加载和定位功能
2. **API 文档管理**：基本的 API 文档编辑、查看、检索和分享功能
3. **权限管理**：多层级权限体系，支持角色权限配置和成员权限管理
4. **团队协作**：支持多用户协作开发，包含项目成员管理和权限分配功能
5. **用户体验优化**：包含未保存数据提示、智能节点定位、分享链接等增强功能
6. **AI智能辅助**：基于DeepSeek API实现请求/响应示例的自动生成，支持流式输出和实时显示，提升文档编写效率

## 技术亮点

1. **高性能模块树实现**：采用懒加载和虚拟滚动技术，支持模块树的多层级高效渲染
2. **数据更新优化**：通过补丁式数据刷新策略提升性能
3. **精细化权限控制**：前后端一体化的权限管理系统，支持细粒度权限分配
4. **递归组件设计**：支持无限层级的 API 参数展示
5. **状态管理优化**：采用全局状态管理 + 结合 provide/inject 实现跨组件数据共享，提升组件通信效率
6. **AI流式输出实现**：集成AI能力，通过流式处理技术实现实时内容生成，提升用户体验和工作效率

## 项目结构

```
├── api-client/        # 前端项目
├── api-server/        # 后端项目
```

## 安装指南

### 前端安装

1. 安装依赖

```bash
npm install
```

2. 启动开发服务器

```bash
npm run dev
```

### 后端安装

1. 安装依赖

```bash
npm install
```

2. 启动服务

```bash
npm run start:dev
```

## 使用说明

1. **用户登录**：访问登录页面，输入用户名和密码进行登录
2. **项目管理**：创建新项目或加入已有项目进行 API 文档开发
3. **API 文档编辑**：在项目中创建和编辑 API 文档
4. **权限管理**：通过角色权限配置和成员管理功能控制项目访问权限

## 开发指南

1. **添加新功能**：遵循现有代码结构，在对应模块添加新功能
2. **修改样式**：使用 Element Plus 的主题定制功能进行样式调整，以及动态水印功能
3. **状态管理**：使用 Pinia 进行全局状态管理
4. **性能优化**：利用懒加载、缓存和防抖节流技术提升性能

## 安全特性

1. **身份验证**：使用 JWT 进行用户身份验证
2. **密码安全**：采用 Bcrypt 进行密码加密存储
3. **权限控制**：多层级权限体系确保数据安全