12-为Login页面添加请求

回顾

接上篇，编写好成型的login页面之后，我们就要开始着手准备给login页面的按钮加上相应的请求。简单把这篇文章分成几个模块：

1. 添加server_config配置与后端交互
2. 编写ts代码，登录和注册发送不同的请求
3. 后端代码支持跨域

编写代码

新增abandon-web/config/server_config.ts，添加要发送的http域名。

const CONFIG = {
    SERVER_URL: "http://127.0.0.1:9923"
}

export default CONFIG;

编写之前的login页面，这里因为之前样式已经编写过，这里样式就不再重复，仅看代码逻辑

import {LockOutlined, MailOutlined, MobileOutlined, UserOutlined} from '@ant-design/icons';
import {request, history} from '@umijs/max';
import {LoginForm, ProFormCheckbox, ProFormText} from '@ant-design/pro-form';
import {message, Tabs} from 'antd';
import React, {useState} from 'react';
import CONFIG from "../../../config/server_config";


const Login: React.FC = () => {
    const [type, setType] = useState<string>('account');
    // 在这里声明一个名为type的状态变量，并初始化为'account'

    const handleSubmit = async (values: API.LoginParams) => {
        // 定义一个名为handleSubmit的异步函数，接受一个名为values的参数，类型为API.LoginParams

        if (type === 'account') {
            // 如果type等于'account'，执行下面的代码块

            const response = await request(CONFIG.SERVER_URL + '/auth/login', {
                // 使用await关键字等待请求的结果，并将结果赋值给response变量
                // 使用CONFIG.SERVER_URL来构建请求的完整URL，'/auth/login'是登录接口的路径

                method: 'POST',
                data: {
                    name: values?.name,
                    password: values.password
                },
                // 传递给登录接口的数据，根据您的需求传递相应的数据
            });

            if (response.code === 200) {
                // 如果响应的状态码为200，表示登录成功

                message.success('登录成功');
                // 在界面上显示一个成功的消息

                const urlParams = new URL(window.location.href).searchParams;
                history.push(urlParams.get('redirect') || '/');
                // 使用history.push()方法进行页面跳转，重定向到redirect参数指定的页面，如果redirect参数不存在则重定向到根路径'/'
                return;
            }

            message.error(response.msg);
            // 如果登录失败，显示一个错误消息
        } else {
            // 如果type不等于'account'，执行下面的代码块

            const response = await request(CONFIG.SERVER_URL + '/auth/register', {
                // 使用await关键字等待请求的结果，并将结果赋值给response变量
                // 使用CONFIG.SERVER_URL来构建请求的完整URL，'/auth/register'是注册接口的路径

                method: 'POST',
                data: {
                    name: values?.name,
                    password: values.password,
                    email: values?.email,
                    username: values.username
                }
                // 传递给注册接口的数据，根据您的需求传递相应的数据
            });
            if (response.code === 200) {
                // 如果响应的状态码为200，表示注册成功
                message.success('注册成功');
                // 在界面上显示一个成功的消息
                return;
            }
            message.error(response.msg);
            // 如果注册失败，显示一个错误消息
        }
    };

小试身手

启动前后端服务后，点击登录按钮发送请求，会看到有以下内容：

跨域问题。

跨域问题具体可以去百度一下，这里简单介绍一下，是说浏览器出于安全考虑，对于前后端域名不一致的情况下，会默认进行拦截，阻止你们进行交互。这多见于前后端分离的项目中出现。

使Fastapi支持跨域

编写abandon-server/src/app/__init__py

from fastapi import FastAPI  
from fastapi.middleware.cors import CORSMiddleware  
from src.app.routes.auth import user  
  
abandon = FastAPI()  
  
# 注册路由  
abandon.include_router(user.router)  
  
abandon.add_middleware(  
CORSMiddleware,  
allow_origins=["*"],  
allow_credentials=True,  
allow_methods=["*"],  
allow_headers=["*"],  
)

验证

重新启动前后端服务，点击按钮确保请求发送成功，且符合我们编写的逻辑。

1. 点击登录后，将地址跳转到home
2. 点击注册，弹出注册成功

其他的不要急，我们目前只是写了最基础的前端发起请求，下一章我们将要做的就是前后端联调，将注册和登录两部分，采用真正的前后端分离方式完成！