基於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


複製程式碼

至此就可完成一個登入功能的實現