📝 项目介绍

背景

• 前端开发需要后台接口

• 使用现成的系统功能，例如一些生成随机头像，背景图的接口

搏天api-免费api接口平台

https://api.btstu.cn/

考虑方向

• 防止外部恶意的攻击(网站安全性)

• 防止外部过多的调用(限制，权限)

• 统计调用次数

• API计费

• 流量保护，防止服务器过载

• 接入新API

目的

🧩 项目思路

用户

管理员

模拟接口

用户管理-保护接口(API网关)

• 调用统计

• 计费

• 接口保护

• 鉴权认证

• 授权

• 日志

• 跨域

第三发调用SDK

🤗 开发模块介绍

• 模拟接口

• 后台管理

• 用户前端

• API网关

• SDK

💻 技术选型

前端

• Ant Design Pro

• React

• Ant Design Procomponents

• Umi

• Umi Request

后端

• Spring Boot

• Spring Boot Starter (SDK开发)

• 网关、限流、日志

💼 需求分析

🔢数据库表设计

可以在鱼皮的项目中快速生成数据库构建代码 地址: http://sqlfather.yupi.icu/ 原先的地址已经更换，不再是sqlfather.com

1. id

2. name 接口名称

3. useId 创建人Id

4. description 描述

5. url 接口地址

6. method请求类型

7. requestHeader 请求头

8. requestParams 请求参数

9. responseHeader 响应头

10. status 接口状态: 0 - 关闭, 1 - 开启

11. createTime

12. updateTime

13. isDelete

✍️后端构建

• 采用yupi的后端构建模板，增增改改，实现基础的增删改查。

• 添加接口信息数据表，并实现其增删改查操作

🧩前端构建

• 采用ant design pro脚手架直接构建

• 使用openapi插件自动生成api接口

直接将后端支持openapi的文档(在config.ts文件中配置openapi的地址)交给前端，直接生成。 生成方式:运行package.json中的openapi的指令，自动会生成后端的接口文件。

📚知识点汇总

• 设置后端请求地址:在api.tsx中配置request时添加baseUrl参量，参量的值为后端接口路径。

• 解决Cookie不保存问题:依旧在request 中添加参量withCredentials 设置为true。

• 修改request 请求方法的参量时，一定要按照request 的参量表来写，可以将其复制到目标出，逐一编写

• 注意前端的接口方法都要改成openai 生成的接口方法。

• 全局InitialState 配置，在typings.d.ts 文件下设置，用于保存全局的用户登录信息。

❓问题

🔑问题解决

1. 问题产生的原因是Login之后的setInitial方法是异步方法，因此更改全局登录态的时候会慢一步，解决方法是在login之后的页面跳转方法上添加延迟(setTimeout方法)，可以解决问题。但是还有问题，为什么只有每次项目启动的第一次会出现这种情况(待解决)。

2. 应该是浏览器缓存