测试平台开发：（10）axios请求后端接口

上一篇：测试平台开发：（9）注册功能页面开发_sinat_23377479的博客-CSDN博客

注册功能页面写完后，开始接接口。使用到axios，这是一个基于 promise 的网络请求库,可以用于浏览器和 node.js。

安装axios命令：

npm install --save axios

安装完成后，继续修改App.js文件：

改动的地方已加上注释。

import { Form, Input, Button, Checkbox } from 'antd';
import './App.css';
import axios from 'axios'; // 引入axios
import React  from 'react'; // 引入React

const App = () => {
  const formRef = React.createRef();
  const onFinish = () => {
    const {username,password}=formRef.current.getFieldsValue(); // 获取输入框的用户名的密码
    let data=new FormData();
    data.append('username',username);
    data.append('password',password);
// 请求我们之前开发的后端接口
    axios.post('http://127.0.0.1:8000/group/register',data).then(function(response){
      if (response.data.status==="200"){
        alert('成功！')
          } 
      else{
          alert(response.data.data.msg)
        }
        
      }
    )
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
     ref={formRef}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary"  onClick={()=>onFinish()}> // 点击Submit按钮，执行onFinish事件
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};




export default App;

保存App.js文件后，再次刷新前端页面，接下来：

1）打开终端窗口，进入之前开发的后端项目，输入命令启动服务：python3 manage.py runserver

2）在前端页面，按要求输入用户名和密码(密码必须为6-18位，大小写字母和数字的组合)，如：

用户名：testuser

密码：123456Test

并点击提交

3）前端页面没有反应，也没有看到alert('成功！') ——这里后面会介绍

4）看到终端是有请求的

[08/Mar/2022 03:58:27] "POST /group/register HTTP/1.1" 200 49

5）再看数据库，已经新增了一条用户记录，说明这个用户已经注册成功了

大致成功了，但是注册成功的提示没有出来，打开浏览器的开发工具， 有错误信息，是浏览器跨域了——下一篇再解决

还有一个问题是用户注册的创建时间时区也不对，也到下一篇再解决。