ant desgin 登陆实现带接口

最新推荐文章于 2024-06-05 14:04:10 发布

niersen丶尼尔森

最新推荐文章于 2024-06-05 14:04:10 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： ant desgin react

本文链接：https://blog.youkuaiyun.com/Neil_1993/article/details/90763438

笔记专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何在React项目中使用Ant Design框架实现登录功能，并与后端接口进行对接。通过实例代码展示从用户输入验证到发送请求，再到接收响应并处理登录状态的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
import { Form, Icon, Input, Button } from 'antd';
import './Login.css';


    class Login extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          userName:'',
          pswd:''
        }
    }

    userChange(e){
    this.setState({
      userName:e.target.value,
      })
      // console.log(this.state.userName);
    }

    pswdChange(e){
      this.setState({
        pswd:e.target.value,
        })
        // console.log(this.state.pswd);
    }

    submitChange(e){

      let param= "tel="+this.state.userName+"&paswd="+this.state.pswd;

      fetch('http://123.206.254.55/Garaer/garaerServer/index.php/User/login',{
            method: 'POST',
            body: param,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(res => res.text()).then(
        data => {
          if(data.user_id){
            console.log(JSON.stringify(data.user_id))
          }
            // console.log(JSON.stringify(data))
        }
        )
    }

    render() {

      return (
        <div className="login-box">
          <div className="login-box-input">
            <Input
              className="login-input"
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
              onChange={this.userChange.bind(this)}
              defaultValue={this.state.userName}
              />,
            <Input
              className="login-input"
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
              onChange={this.pswdChange.bind(this)}
              defaultValue={this.state.pswd}
              />
              <Button className="login-button" type="primary" block
                onClick={this.submitChange.bind(this)}
              >
              登陆
            </Button>
          </div>
        </div>
      );
    }
  }

  export default Login;