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';

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

以上关于P24：后台管理系统开发03-登录界面UI制作的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。