P24：后台管理系统开发03-登录界面UI制作

本文带大家正式编写界面了，我们第一个界面就是登录，因为后台管理的一切都要求我们登录后才可以操作，如果没登录会跳转到登录。

引入需要使用的组件

进入Login.js文件后，先要引入一些我们页面所需要的组件，这里我们需要引入React、antd。

import React , {useState} from 'react';
import 'antd/dist/antd.css';
import { Card, Input,Button ,Spin } from 'antd';
import { UserOutlined,KeyOutlined } from '@ant-design/icons';

引入完成后，就可以编写 UI 部分了。

编写 UI 部分

引入后我们就可以编写 UI 样式，需要注意的是这里的className你需要跟我一样，否则你的 CSS 样式会不起作用。

在编写之前可以使用React Hooks特性里的useState来定义一些变量和改变变量的方法。

const [userName , setUserName] = useState('')
const [password , setPassword] = useState('')
const [isLoading, setIsLoading] = useState(false)

isLoading主要用于控制Spin组件是否进入加载状态，进入加载状态可以有效防止重复提交。

return (
    <div className="login-div">
        <Spin tip="Loading..." spinning={isLoading}>
            <Card title="MYBJ Blog System" bordered={true} style={{ width: 400 }} >
                <Input
                    id="userName"
                    size="large"
                    placeholder="Enter your userName"
                    prefix={<UserOutlined style={{color:'rgba(0,0,0,.25)'}} />}
                    onChange={(e)=>{setUserName(e.target.value)}}
                /> 
                <br/><br/>
                <Input.Password
                    id="password"
                    size="large"
                    placeholder="Enter your password"
                    prefix={<KeyOutlined style={{color:'rgba(0,0,0,.25)'}} />}
                    onChange={(e)=>{setPassword(e.target.value)}}
                />     
                <br/><br/>
                <Button type="primary" size="large" block onClick={checkLogin} > Login in </Button>
            </Card>
        </Spin>
    </div>
)

UI 写好了，需要编写一个checkLogin的方法，以后可以实现去后台验证的判断，这里我们只做一个 UI 状态的变化操作。剩下的操作以后再进行操作。

const checkLogin = ()=>{
    setIsLoading(true)
    setTimeout(()=>{
        setIsLoading(false)
    },1000)
}

编写 CSS 文件

到目前位置，我们还没有 CSS 样式，可以在/src目录下建立一个static的目录，当然名字你也可以完全自己取。然后在/static目录下再建立一个css目录，然后创建Login.css文件

.login-div{
    margin: 150px auto;
    width: 400px;
}
body{
    background-color: #f0f0f0;
}

因为我们这里多用的是Ant Desgin的组件，所以 CSS 样式非常好。写好后需要在Login.js中用import引入。

import '../static/css/Login.css';

到这里可以去浏览器中预览一下效果，再根据效果进行微调，调成自己喜欢的样子就可以了。