# api_front

**Repository Path**: kkangcode/api_front

## Basic Information

- **Project Name**: api_front
- **Description**: KK-OPEN-API 接口开放平台前端代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-11
- **Last Updated**: 2024-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# KK-OPEN-API 接口开放平台

## 项目简介：

KK-OPEN-API 接口开放平台是一个为用户及开发者提供接口的开放平台，用户可以快速获取接口，并且可以在线调用测试接口效果。开发者可以通过本项目提供的[客户端 SDK](https://gitee.com/kkangcode/api_backend/tree/master/api-client-sdk)和注册获得的客户端凭证，快速的将接口接入到自己的项目中。

## 项目链接

[KK-OPEN-API 上线地址](http://kkapi.charkk.top)

[KK-OPEN-API 前端代码](https://gitee.com/kkangcode/api_front)

[KK-OPEN-API 后端代码](https://gitee.com/kkangcode/api_backend)

## 快速启动

### 前端

Node.js：v20.15.0

安装依赖：

```bash
yarn install
```

启动项目：

```bash
yarn run dev
```

项目部署:

```bash
yarn build
```

### 后端

生成数据库：

```bash
#进入sql目录
cd api_backend/sql
#执行sql脚本
```

将后端代码中数据库地址修改为本地地址

项目部署：执行[Dockerfile](https://gitee.com/kkangcode/api_backend/blob/master/Dockerfile)文件

## 项目详解

本项目的前端基于 React，后端基于 Spring Boot + Dubbo + SpringBoot Gateway。

其中后端项目又被拆分为 5 个子项目：

| 项目名称 | 项目描述 |
| :-- | :-- |
| [api-backend](https://gitee.com/kkangcode/api_backend) | 后台管理系统 |
| [api-client-sdk](https://gitee.com/kkangcode/api_backend/tree/master/api-client-sdk) | 客户端 SDK |
| [api-common](https://gitee.com/kkangcode/api_backend/tree/master/api-common) | 公共模块 |
| [api-gateway](https://gitee.com/kkangcode/api_backend/tree/master/api-gateway) | API 网关模块 |
| [one-interface](https://gitee.com/kkangcode/api_backend/tree/master/one-interface) | 后台接口库 |

### 后台管理系统

提供后台管理功能，提供用户注册、登录、权限管理、接口管理等功能的接口。

### 客户端 SDK

为实现客户端 SDK 的快速扩展及接口的快速扩展，本项目参考[腾讯云 sdk 设计](https://github.com/TencentCloud/tencentcloud-sdk-java/tree/master) ,对客户、请求参数、返回结果进行抽象。创建两个配置类用于代码复用。

#### 客户端的快速使用:

1. 编写代码：

```java
HttpProfile httpProfile=new HttpProfile();
Credential credential=new Credential(accessKey,secretKey);
// todo 接口调用的地址需要根据部署环境修改，如开发环境和生产环境或根据数据库进行配置
httpProfile.setEndpoint("localhost:8090");
httpProfile.setProtocol(HttpProfile.REQ_HTTP);
httpProfile.setReqMethod(requestMethod);

ClientProfile clientProfile=new ClientProfile();
clientProfile.setHttpProfile(httpProfile);

OutApiClient client=new OutApiClient(credential,clientProfile);
```

2. 配置方式

```
api:
  name:
    client:
      access-key: xxxx
      secret-key: xxxx
```

#### 客户端介绍：

两个配置类:

`ClientProfile` 用于配置客户端的一些参数，如签名方法、HTTP 相关参数。

`HttpProfile`用于配置 HTTP 请求的一些参数，如超时时间、协议、请求方法等。

其中请求参数、返回结果抽象模型`AbstractModel`实现通过 gson 对象的序列化与反序列化的公共方法。如下是请求参数扩展示例：

```java
public class GetUsernameRequest extends AbstractModel {
    @SerializedName("name")
    @Expose
    private String name;

    @Override
    protected void toMap(HashMap<String, String> map, String prefix) {
        this.setParamSimple(map, prefix + "name", this.name);
    }
}
```

其中客户端抽象模型`AbstractClient`封装了 ClientProfile、密钥对象、HTTP 请求方法。如下是扩展示例,仅需修改两个 todo 位置代码即可：

```java
public class OutApiClient extends AbstractClient {
    //todo 修改地址
    private static final String endpoint = "localhost:8090";


    public OutApiClient(Credential credential) {
        this(credential, new ClientProfile());
    }

    public OutApiClient(Credential credential, ClientProfile profile) {
        super(OutApiClient.endpoint, credential, profile);
    }

    /**
     * 获取用户名的模拟接口
     * @param req
     * @return
     */
    public GetUsernameResponse getUsername(GetUsernameRequest req) throws APISDKException {
        JsonResponseModel<GetUsernameResponse> rsp = null;
        String rspStr = "";
        try {
            Type type = new TypeToken<JsonResponseModel<GetUsernameResponse>>() {
            }.getType();
            //todo 修改路径
            rspStr = this.internalRequest(req, "/api/out/user");
            rsp = gson.fromJson(rspStr, type);
        } catch (JsonSyntaxException e) {
            throw new APISDKException("response message: " + rspStr + ".\n Error message: " + e.getMessage());
        }
        return rsp.getData();
    }
}
```

### 公共模块

主要包含项目间的公共配置、工具类、常量类等，减少重复代码。

### API 网关模块

选用 Spring Cloud Gateway 作为 API 网关，实现了路由转发、访问控制、流量染色，并集中处理签名校验、请求参数校验、接口调用统计等业务逻辑，提高安全性的同时、便于系统开发维护。

### 后台接口库

后台接口，目前实现两个接口，一个采用 POST 请求，用于获取用户名的的测试接口，以及一个采用 GET 请求，用于获取摸鱼日记的接口。

## 核心功能展示

1. 接口在线调用测试 ![](./img/interfaceinvo.png)
2. 接口管理 ![](./img/interfaceinfo.png)
3. 开发者 SDK ![](./img/SDK.png)