Skip to content

Releases: poboll/cai-api-frontend

✨feat: Cai-API 前端完成 Latest

25 Feb 08:14
@poboll poboll
v1.0.0
623a631
Compare
Choose a tag to compare
✨feat: Cai-API 前端完成 Latest Latest
Latest

✨feat: Cai-API 前端完成 Latest

完成了 Cai-API 接口开放平台前端的核心功能开发，包括用户注册登录、接口广场浏览、在线调试、积分商城、订单管理等功能，提升用户体验和交互性。优化了接口调用流程，修复若干前端 bug，并完善了文档说明。

版本描述:

  • 用户功能完善：实现了注册、登录、邮箱验证码找回密码、头像上传、每日签到等功能，提升用户交互体验。
  • 接口广场与调试：完成接口大厅页面，支持接口搜索、浏览和在线调试，方便用户快速验证 API 功能。
  • 积分商城与支付：新增积分（坤币）商城，支持支付宝支付、订单创建与管理，用户可通过签到或充值获取积分。
  • 管理功能：为管理员提供用户管理、接口管理和商品管理页面，支持动态更新请求参数和响应参数。
  • 主题与体验优化：支持浅色/深色主题切换，优化页面加载性能和响应速度。
  • 前端稳定性：修复了代码中的若干 bug，优化了组件复用和 API 调用效率。
  • 文档更新：完善了 README.md，新增功能展示图片和详细的项目介绍。

目录结构

以下是前端项目的主要目录结构，反映了功能模块的组织方式：

├── public/                  # 静态资源
│   ├── assets/             # 图片等静态资产
│   ├── scripts/           # 脚本文件
│   ├── favicon.ico        # 网站图标
│   └── logo.gif           # 项目 Logo
├── src/                    # 源代码
│   ├── .umi/              # Umi 框架生成文件
│   ├── components/        # 通用组件
│   │   ├── CodeHighlighting/  # 代码高亮组件
│   │   ├── EmailModal/    # 邮箱模态框
│   │   ├── Footer/        # 页脚
│   │   ├── Gift/          # 奖励组件
│   │   ├── HeaderDropdown/ # 下拉菜单
│   │   ├── Micon/         # 自定义图标
│   │   ├── ParamsTable/   # 参数表格
│   │   ├── RightContent/  # 右侧内容
│   │   └── UploadModal/   # 上传模态框
│   ├── enum/              # 枚举定义
│   │   ├── commonEnum.tsx # 通用枚举
│   │   └── ErrorCodeEnum.ts # 错误码枚举
│   ├── pages/             # 页面模块
│   │   ├── Admin/         # 管理页面
│   │   │   ├── Columns/   # 表格列定义
│   │   │   ├── Components/ # 管理组件
│   │   │   ├── InterfaceInfoList/ # 接口列表
│   │   │   ├── ProductInfoList/   # 商品列表
│   │   │   └── UserList/  # 用户列表
│   │   ├── InterfaceInfo/ # 接口信息页面
│   │   ├── InterfaceSquare/ # 接口广场
│   │   ├── Order/         # 订单页面
│   │   ├── Recharge/      # 充值页面
│   │   ├── User/          # 用户页面
│   │   ├── 404.tsx        # 404 页面
│   │   ├── Admin.tsx      # 管理首页
│   │   └── Welcome.tsx    # 欢迎页
│   ├── services/          # 服务接口调用
│   ├── access.ts          # 权限控制
│   ├── app.tsx            # 应用入口
│   ├── global.less        # 全局样式
│   ├── global.tsx         # 全局配置
│   ├── manifest.json      # Web App 配置
│   ├── requestConfig.ts   # 请求配置
│   ├── service-worker.js  # 服务工作者
│   └── typings.d.ts       # 类型定义
├── .editorconfig           # 编辑器配置
├── .eslintignore           # ESLint 忽略文件
├── .eslintrc.js            # ESLint 配置
├── .gitignore              # Git 忽略文件
├── .prettierignore         # Prettier 忽略文件
├── .prettierrc.js          # Prettier 配置
├── baiduPush.sh            # 百度推送脚本
├── jest.config.ts          # Jest 测试配置
├── jsconfig.json           # JavaScript 配置
├── LICENSE                 # 许可证
├── package.json            # 项目依赖和脚本
├── README.md               # 项目说明文档
└── tsconfig.json           # TypeScript 配置

版本亮点

  1. 用户体验提升：
    • 新增每日签到功能，用户可通过签到获取坤币，提升互动性。
    • 支持头像上传和主题切换（浅色/深色），个性化用户界面。
  2. 接口管理与调试：
    • 接口广场支持搜索和浏览，集成在线调试工具，用户可快速测试 API。
    • 管理员可动态管理接口参数，提升维护效率。
  3. 支付与订单：
    • 实现支付宝支付功能，支持订单创建、取消和删除。
    • 积分商城上线，用户可通过充值或签到兑换坤币。
  4. 性能与稳定性：
    • 优化 API 调用流程，减少页面加载时间。
    • 修复组件渲染和数据请求中的 bug，提升系统稳定性。
  5. 文档完善：
    • 更新 README，新增功能展示图片和详细说明，方便用户和开发者快速上手。

快速启动

环境要求：

  • Node.js >= 16

安装依赖：

npm install

启动开发环境：

npm run start:dev

构建发布：

npm run build

功能展示

  • 首页：展示平台简介和热门接口。
  • 接口广场：支持接口搜索和在线调试。
  • 积分商城：用户可通过签到或支付获取坤币。
  • 管理页面：包括用户管理、接口管理和商品管理。
  • 订单管理：支持订单查看、取消和支付。
  • 主题切换：提供浅色和深色模式。

技术栈

  • 框架：React 18, Umi 4
  • 组件库：Ant Design & ProComponents
  • 工具：TypeScript, ESLint, Prettier

后续计划

  • 增加多语言支持，提升国际化体验。
  • 优化接口调试工具，支持更多参数类型。
  • 集成更多支付方式（如云闪付支付）。

Cai-API 接口开放平台

Cai-API 接口开放平台是一个为用户和开发者提供全面API接口调用服务的平台 🛠

项目介绍 🙋

😀 作为用户您可以通过注册登录账户，获取接口调用权限，并根据自己的需求浏览和选择适合的接口。您可以在线进行接口调试，快速验证接口的功能和效果。

💻 作为开发者 我们提供了客户端SDK: Cai-API-SDK， 通过开发者凭证即可将轻松集成接口到您的项目中，实现更高效的开发和调用。

🤝 您可以将自己的接口接入到Cai-API 接口开放平台平台上，并发布给其他用户使用。 您可以管理和各个接口，以便更好地分析和优化接口性能。

👌 我们还提供了开发者在线文档和技术支持，帮助您快速接入和发布接口。

🏁 无论您是用户还是开发者，Cai-API 接口开放平台都致力于提供稳定、安全、高效的接口调用服务，帮助您实现更快速、便捷的开发和调用体验。

网站导航 🧭

目录结构 📑

目录 描述
🏘️ cai-api-backend Cai-API后端服务模块
🏘️ cai-api-common 公共服务模块
🕸️ cai-api-gateway 网关模块
🔗 cai-api-interface 接口模块
🛠 cai-api-sdk 开发者调用sdk
📘 cai-api-doc 接口在线文档
✔️ cai-api-sdk-demo SDK调用Demo

项目流程 🗺️

项目流程

快速启动 🚀

前端

环境要求：Node.js >= 16

安装依赖：

yarn or  npm install

启动：

yarn run dev or npm run start:dev

部署：

yarn build or npm run build

后端

执行sql目录下ddl.sql

项目选型 🎯

后端

  • Spring Boot 2.7.0
  • Spring MVC
  • MySQL 数据库
  • 腾讯云COS存储
  • Dubbo 分布式（RPC、Nacos）
  • Spring Cloud Gateway 微服务网关
  • API 签名认证（Http 调用）
  • IJPay-AliPay 支付宝支付
  • WeiXin-Java-Pay 微信支付
  • Swagger + Knife4j 接口文档
  • Spring Boot Starter（SDK 开发）
  • Jakarta.Mail 邮箱通知、验证码
  • Spring Session Redis 分布式登录
  • Apache Commons Lang3 工具类
  • MyBatis-Plus 及 MyBatis X 自动生成
  • Hutool、Apache Common Utils、Gson 等工具库

前端

  • React 18

  • Ant Design Pro 5.x 脚手架

  • Ant Design & Procomponents 组件库

  • Umi 4 前端框架

  • OpenAPI 前端代码生成

功能介绍 📋

坤币即积分，用于平台接口调用。

功能 游客 普通用户 管理员
Cai-API-SDK使用 ✅ ✅ ✅
开发者API在线文档 ✅ ✅ ✅
邀请好友注册得坤币 ❌ ✅ ✅
切换主题、深色、暗色 ✅ ✅ ✅
微信支付宝付款 ❌ ✅ ✅
在线调试接口 ❌ ✅ ✅
每日签到得坤币 ❌ ✅ ✅
接口大厅搜索接口、浏览接口 ✅ ❌ ✅
邮箱验证码登录注册 ✅ ✅ ✅
钱包充值 ❌ ❌ ✅
支付成功邮箱通知(需要绑定邮箱) ❌ ✅ ✅
更新头像 ❌ ✅ ✅
绑定、换绑、解绑邮箱 ❌ ✅ ✅
取消订单、删除订单 ❌ ✅ ✅
商品管理、上线、下架 ❌ ❌ ✅
用户管理、封号解封等 ❌ ❌ ✅
接口管理、接口发布审核、下架 ❌ ❌ ✅
退款 ...
Read more
Assets 2
Loading