基于React和Antdesign的登录

不洗碗工作室-wangpeng

### 脚手架选择

选择不洗碗工作室的react脚手架

git clone https://github.com/ouxu/NEUQer-FE-Kit.git
复制代码

打开其中的React-Route4在终端输入

npm install
复制代码

会根据package.json安装必要的依赖

再安装Ａnt design

npm install antd --save
复制代码

其中--save将把ａntd自动加入到package.json文件中

开启本地预览

npm run dev 
复制代码

Ant design官方文档

Antd 引入

修改 src/componments/Layout/index.js， 引入antd

import { Form, Icon, Input, Button, Checkbox } from 'antd';

复制代码

使用fetch完成与后端的数据交互部分

handleSubmit = (e) => {
    e.preventDefault()
    console.log(2)
    this.setState({loading: true})
    console.log(3)
    this.props.form.validateFieldsAndScroll((err, values) => {

      if (err) {} else {

        message.loading('提交成功，正在验证')
        const body = {
          ...values
        }

        fetch('api', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        }).then((res) => {
          return res.json()

        }).then((json) => {
          if (json.code === 0) {
            message.success('success')

          } else {
            message.error('failed')
          }
        }).catch((e) => {
          console.log(e.message)
        })
      }
    })
  }

复制代码

登录框页面组织

<Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot" href="">Forgot password</a>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </FormItem>
      </Form>
复制代码

页面的ＣＳＳ布局

#components-form-demo-normal-login .login-form {
    max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
    float: right;
}
#components-form-demo-normal-login .login-form-button {
    width: 100%;
}

复制代码

最后组织成的index.js文件

import React, { Component} from 'react'
import request from 'utils/request'
import './index.css'
import 'antd/lib/button/style';
import { Form, Icon, Input, Button, Checkbox } from 'antd';


const FormItem = Form.Item;
@Form.create()


class HomePage extends Component {
  handleSubmit = (e) => {
    e.preventDefault()
    console.log(2)
    this.setState({loading: true})
    console.log(3)
    this.props.form.validateFieldsAndScroll((err, values) => {

      if (err) {} else {

        message.loading('提交成功，正在验证')
        const body = {
          ...values
        }

        fetch('api', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        }).then((res) => {
          return res.json()

        }).then((json) => {
          if (json.code === 0) {
            message.success('success')

          } else {
            message.error('failed')
          }
        }).catch((e) => {
          console.log(e.message)
        })
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot" href="">Forgot password</a>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </FormItem>
      </Form>
    );
  }
}

export default HomePage


复制代码

至此就可完成一个登录功能的实现