一个基于 Flask + Vue3 + TypeScript + Ant Design Vue 的现代化 Mock API 服务，支持用户创建自定义 API 接口，具备管理员和普通用户两种角色。

• 🚀 现代化技术栈：后端 Flask REST API + 前端 Vue3 + TypeScript + Ant Design Vue
• 🎨 精美UI：基于 Ant Design Vue 4.x 的企业级UI设计
• 👥 完善权限：用户认证系统（注册/登录）+ 管理员模式
• 💾 数据持久化：SQLite 数据库存储
• 🔐 安全可靠：JWT Token 认证 + 密码加密存储
• 📝 多种格式：支持 JSON、文本、HTML 响应
• 🔧 灵活配置：支持多种 HTTP 方法（GET/POST/PUT/DELETE/PATCH）
• 🎯 高级设置：自定义路径、响应延迟、描述信息
• ✏️ 编辑功能：支持修改已创建的 Mock API
• 🔄 多状态码：同一端点支持多个状态码响应
• 🐳 一键部署：Docker + Docker Compose 支持
• ⚡ 快速启动：一键启动脚本，同时启动前后端

• Flask 3.0 - Web 框架
• Flask-CORS - 跨域支持
• Flask-JWT-Extended - JWT 认证
• Flask-SQLAlchemy - ORM
• SQLite - 数据库

• Vue 3.4 - 渐进式框架
• TypeScript - 类型安全
• Vite 5 - 构建工具
• Ant Design Vue 4.x - UI 组件库
• Vue Router 4 - 路由管理
• Pinia - 状态管理
• Axios - HTTP 客户端

Windows:

# 双击运行或在命令行执行
start-all.bat

脚本会自动：

1. 检查 Node.js 和 Python 环境
2. 安装前后端依赖（如需要）
3. 同时启动前后端服务

访问地址：

• 前端：http://localhost:5173
• 后端API：http://localhost:5000

1. 启动后端：

# 创建并激活虚拟环境
python -m venv venv
venv\Scripts\activate  # Windows
source venv/bin/activate  # Linux/Mac

# 安装依赖
pip install -r requirements.txt

# 启动后端
python run.py

2. 启动前端：

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动前端开发服务器
npm run dev

# 构建并启动
docker-compose up -d

# 访问
http://localhost:5000

• 管理员：admin / admin123

⚠️ 重要提示：首次使用后请立即修改管理员密码！

1. 注册登录

   • 访问 http://localhost:5173
   • 点击"注册"标签创建账号
   • 登录系统

2. 创建 Mock API

   • 选择请求方式（GET/POST/PUT/DELETE/PATCH）
   • 选择响应类型（JSON/文本/HTML）
   • 设置状态码（默认 200）
   • 输入响应内容
   • 高级设置（可选）：
     • 自定义路径：指定特定的API路径
     • 延迟时间：模拟网络延迟（毫秒）
     • 描述信息：为API添加说明
   • 点击"创建 Mock API"

3. 编辑 Mock API

   • 在列表中点击"编辑"按钮
   • 修改任何配置
   • 点击"保存修改"

4. 多状态码支持

   • 同一端点可创建多个不同状态码的配置
   • 访问时通过查询参数指定：?status_code=400
   • 不指定则返回默认状态码（200）

5. 使用 Mock API

   • 创建成功后会生成随机端点，如：/api/mock/abc12345
   • 完整 URL：http://localhost:5000/api/mock/abc12345
   • 在你的应用中使用这个 URL 进行测试

6. 管理 Mock API

   • 在列表中查看所有已创建的接口
   • 点击端点可复制完整 URL
   • 可以删除不需要的接口

1. 进入管理后台

   • 使用管理员账号登录
   • 点击"管理后台"按钮

2. 用户管理

   • 查看所有注册用户
   • 查看每个用户创建的 Mock API 数量
   • 删除违规用户（会同时删除其所有 Mock API）

3. 全局 Mock API 管理

   • 查看系统中所有的 Mock API
   • 可以删除任何用户的 Mock API
   • 监控系统使用情况

{
  "method": "GET",
  "response_type": "json",
  "status_code": 200,
  "response_content": "{\"message\": \"Hello World\", \"status\": \"success\"}"
}

{
  "method": "POST",
  "response_type": "json",
  "status_code": 400,
  "response_content": "{\"error\": \"Bad Request\", \"message\": \"Invalid parameters\"}"
}

needData/
├── app/                          # 后端应用
│   ├── __init__.py              # Flask 应用初始化
│   ├── models.py                # 数据库模型
│   └── api.py                   # REST API 路由
├── frontend/                     # 前端应用
│   ├── src/
│   │   ├── api/                 # API 请求封装
│   │   ├── stores/              # Pinia 状态管理
│   │   ├── router/              # Vue Router 配置
│   │   ├── views/               # 页面组件
│   │   ├── App.vue              # 根组件
│   │   └── main.ts              # 入口文件
│   ├── package.json             # 前端依赖
│   └── vite.config.ts           # Vite 配置
├── requirements.txt             # 后端依赖
├── config.py                    # 后端配置
├── run.py                       # 后端启动文件
├── start-all.bat                # 一键启动脚本
├── stop-all.bat                 # 停止服务脚本
└── Dockerfile                   # Docker 配置

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录
• GET /api/auth/profile - 获取用户信息

• GET /api/mocks - 获取当前用户的 Mock API
• POST /api/mocks - 创建 Mock API
• DELETE /api/mocks/:id - 删除 Mock API
• ALL /api/mock/:endpoint - Mock API 响应

• GET /api/admin/users - 获取所有用户
• DELETE /api/admin/users/:id - 删除用户
• GET /api/admin/mocks - 获取所有 Mock API

cd frontend

# 开发模式
npm run dev

# 生产构建
npm run build

# 预览构建
npm run preview

docker build -t mock-api-service .

docker run -d \
  -p 5000:5000 \
  -v $(pwd)/data:/app/instance \
  -e SECRET_KEY=your-secret-key \
  -e JWT_SECRET_KEY=your-jwt-secret-key \
  mock-api-service

# 启动
docker-compose up -d

# 停止
docker-compose down

# 查看日志
docker-compose logs -f

1. 修改默认管理员密码
2. 在生产环境中修改 SECRET_KEY 和 JWT_SECRET_KEY
3. 关闭 debug 模式（run.py 中设置 debug=False）
4. 使用反向代理（如 Nginx）并启用 HTTPS
5. 定期备份数据库文件

A: 删除 instance/mockapi.db 文件，重新运行应用会创建新的数据库和默认管理员账号。

A: 修改 frontend/vite.config.ts 中的 proxy 配置。

A:

• 后端：修改 run.py 中的 port 参数
• 前端：修改 frontend/vite.config.ts 中的 server.port

A: instance/mockapi.db

A: 运行 stop-all.bat 或在终端按 Ctrl+C

MIT License

• 支持 WebSocket Mock
• API 调用统计
• 请求延迟模拟
• 批量导入/导出
• API 文档生成
• 请求日志查看

欢迎提交 Issue 和 Pull Request！

如有问题，请提交 Issue 或联系开发者。

---

⭐ 如果这个项目对你有帮助，请给个 Star！