# 猿接口-Frontend

**Repository Path**: giteeygq/ape-interface-frontend

## Basic Information

- **Project Name**: 猿接口-Frontend
- **Description**: API调用平台前端主要基于Ant Design Pro、Ant Design、Umi、React、Echarts框架实现，包含用户登录注册注销、管理员接口管理分析、接口调用等基础功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-16
- **Last Updated**: 2023-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React18, Ant-Desgin-Pro5, Ant-Desgin组件库, Procomponents组件库, umi4

## README

# API-Front

## 1.初始化

### 1.1 脚手架

主要基于**Ant Design Pro**进行API开放平台网页开发。

官网初始化脚手架https://pro.ant.design/zh-CN/docs/getting-started/

![pro](README.assets/yuque_diagram.jpg)

### 1.2 配置插件

**Prettier**是一个代码格式化工具，用于在开发过程中自动调整代码的格式，使代码保持一致的风格，从而减少开发人员在代码格式上的争议，并提高整体的代码可读性。 

**ESLint**是一个流行的JavaScript代码静态分析工具，用于在开发过程中帮助发现和修复代码中的问题，以确保代码质量和一致性。

![image-20230815183124966](README.assets/image-20230815183124966.png)

### **1.3 接口调用**

使用 oneapi 插件自动生成

如果要前端自动生成，需要将后端的遵循openapi规范的json文档

![image-20230815170614765](README.assets/image-20230815170614765.png)

遵循openapi规范的json文档

![image-20230815170640547](README.assets/image-20230815170640547.png)

打开config.ts 找到openApi

![image-20230815170743910](README.assets/image-20230815170743910.png)

找到package.json,执行openapi命令

![image-20230815172238116](README.assets/image-20230815172238116.png)

可以看到直接根据Json文档生成umi-request接口



### 1.4 用户登录态

找到**app.tsx**中**getInitialState（）**这个方法

这个方法当我们首次访问页面的时候，获取用户的信息，获取当前全局的一些状态，可以把它当成全局变量

设置全局状态类型

```typescript
interface InitialState{

  loginUser: API.UserVO;

}
```

返回getInitialState()将它改为

```typescript
export async function getInitialState(): Promise<InitialState> {
  // 当页面首次加载时，获取要全局保存的数据，比如用户登录信息
  const state: InitialState = {
    loginUser: undefined,
  }
  try {
    const res = await getLoginUserUsingGET();
    if (res.data) {
      state.loginUser = res.data;
    }
  } catch (error) {
    history.push(loginPath);
  }
  return state;
}
```



## 2. 用户

### 2.1登录

找到**src/pages/User/Login/index.tsx**下的**handleSubmit**，修改代码实现登录

```tsx
const handleSubmit = async (values: API.UserLoginRequest) => {
    try {
      // 登录
      const res = await userLoginUsingPOST({
        ...values,
      });
      if (res.data) {
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        setInitialState({
          loginUser: res.data
        });
        return;
      }
    } catch (error) {
      const defaultLoginFailureMessage = '登录失败，请重试！';
      console.log(error);
      message.error(defaultLoginFailureMessage);
    }
  };
```

同时表单组件中name要改成符合API.UserLoginRequest类中的成员变量名，防止请求参数不匹配

![image-20230815184114261](README.assets/image-20230815184114261.png)

登录尝试

![](README.assets/login.png)

成功，But， 有bug，我们刷新一下发现又要重新登录，这是为什么呢？我们推测是前端向后端发送请求的时候没有带上cookie！！！找到requestConfig.ts

![image-20230815200538283](README.assets/image-20230815200538283.png)

### 2.3 注册

Ant design pro中没有注册功能，所以需要自己仿照其他组件实现

登录界面加入注册功能，并创建如下文件

```typescript
<Link to="/user/register">用户注册</Link>
```

<img src="README.assets/image-20230815195459049.png" alt="image-20230815195459049" style="zoom:50%;" />

主要还是使用ant design组件库

```typescript
import Footer from '@/components/Footer';
import { userRegisterUsingPOST } from '@/services/yuapi-backend/userController';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-form';
import { message, Tabs } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
import {history} from "@@/core/history";

const Register: React.FC = () => {
  const [type, setType] = useState<string>('account');

  // 表单提交
  const handleSubmit = async (values: API.UserRegisterRequest) => {
    const { userPassword, checkPassword } = values;
    // 校验
    if (userPassword !== checkPassword) {
      message.error('两次输入的密码不一致');
      return;
    }

    try {
      // 注册
      const res = await userRegisterUsingPOST({
        ...values,
      });
      if (res.data) {
        const defaultLoginSuccessMessage = '注册成功！';
        message.success(defaultLoginSuccessMessage);
        /** 此方法会跳转到 redirect 参数所在的位置 */
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/user/login');
        return;
      }
    } catch (error: any) {
      const defaultLoginFailureMessage = '注册失败，请重试！';
      message.error(defaultLoginFailureMessage);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          submitter={{
            searchConfig: {
              submitText: '注册',
            },
          }}
          logo={
            <img
              alt="logo"
              src="https://www.48hourslogo.com/48hourslogo_data/2015/07/25/2015072512195913548.png"
            />
          }
          title="猿接口"
          subTitle={'API 开放平台'}
          initialValues={{
            autoLogin: true,
          }}
          onFinish={async (values) => {
            await handleSubmit(values as API.UserRegisterRequest);
          }}
        >
          <Tabs activeKey={type} onChange={setType}>
            <Tabs.TabPane key="account" tab={'账号密码注册'} />
          </Tabs>
          {type === 'account' && (
            <>
              <ProFormText
                name="userAccount"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请输入账号"
                rules={[
                  {
                    required: true,
                    message: '账号是必填项！',
                  },
                ]}
              />
              <ProFormText.Password
                name="userPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请输入密码"
                rules={[
                  {
                    required: true,
                    message: '密码是必填项！',
                  },
                  {
                    min: 8,
                    type: 'string',
                    message: '长度不能小于 8',
                  },
                ]}
              />
              <ProFormText.Password
                name="checkPassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                placeholder="请再次输入密码"
                rules={[
                  {
                    required: true,
                    message: '确认密码是必填项！',
                  },
                  {
                    min: 8,
                    type: 'string',
                    message: '长度不能小于 8',
                  },
                ]}
              />
            </>
          )}
        </LoginForm>
      </div>
      <Footer />
    </div>
  );
};

export default Register;

```

并配置路由

![image-20230815200022657](README.assets/image-20230815200022657.png)

效果

![image-20230815201933321](README.assets/image-20230815201933321.png)



### 2.4 注销

全局搜索ctrl+shift+f  搜索logout，在src/components/RightContent/AvatarDropdown.tsx的45行左右

![image-20230815201230355](README.assets/image-20230815201230355.png)



## 3.管理员

打开access.ts，修改成根据用户的权限判断是否为管理员

![image-20230815201756095](README.assets/image-20230815201756095.png)



### 3.1 优化管理页面

打开config包找到 routes.ts

![image-20230815202603318](README.assets/image-20230815202603318.png)



### 3.2 接口管理

主要实现了接口的增删改功能

<img src="README.assets/image-20230815235022202.png" alt="image-20230815235022202" style="zoom:50%;" />

效果

![image-20230815232855144](README.assets/image-20230815232855144.png)

### 3.3 接口分析

主要使用echarts-for-react中组件进行接口调用频率分析

<img src="README.assets/image-20230815235234729.png" alt="image-20230815235234729" style="zoom:50%;" />

效果

![image-20230815235304939](README.assets/image-20230815235304939.png)



## 4.接口

### 4.1 游览接口

主页显示接口

![image-20230816000014734](README.assets/image-20230816000014734.png)

效果

![image-20230816000228925](README.assets/image-20230816000228925.png)



### 4.2 接口调用

游览接口并点击可显示接口详细信息，并可调用

![image-20230816000255192](README.assets/image-20230816000255192.png)

效果

![image-20230816000344644](README.assets/image-20230816000344644.png)