用react搭建一个管理后台（二）

用react搭建一个管理后台（一）

1、重置样式

/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img,
embed,
iframe,
object,
video {
  height: auto;
  max-width: 100%;
}

audio {
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  text-align: left;
}

html, body {
  height: 100%;
  width: 100%;
}

#root {
  height: 100%;
  width: 100%;
}

在public文件夹下，新建reset.css文件，并在index.html文件中引入。

2、Login组件布局

login.jsx

import React from 'react'
import {
    Form,
    Input,
    Icon,
    Button
} from 'antd'
import logo from './logo192.png'
import './login.less'

 class Login extends React.Component {
    handleSubmit() { }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo"></img>
                    <h1>React后台管理</h1>
                </header>
                <section className="login-content">
                    <h3>用户登录</h3>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: '请输入用户名!' }],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="用户名"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入密码!' }],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">登 录</Button>
                        </Form.Item>
                    </Form>
                </section>

            </div>
        )
    }
}
export default Form.create()(Login)

login.less

.login{
    width:100%;
    height: 100%;
    background-image: url('./bg.jpg');
    background-size: 100% 100%;

    .login-header{
        display: flex;
        align-items: center;
        height: 80px;
        background-color:rgba(42, 174, 179, 0.8);
        img{
            width: 40px;
            height: 40px;
            margin-left: 50px;
        }
        h1{
            font-size: 30px;
            color:#fff;
            margin-left:15px;
            margin-top: 10px;
        }
    }

    // 登录框
    .login-content{
        margin:20vh auto;
        width: 400px;
        height: 300px;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px 40px;
        h3{
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        .login-form{
            .login-form-button{
                width: 100%;
            }
        }
    }
}

效果：

3、Login组件数据收集及表单验证