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

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

引入需要使用的组件

进入Login.js文件后,先要引入一些我们页面所需要的组件,这里我们需要引入Reactantd

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

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P24:后台管理系统开发03-登录界面UI制作

发表评论

提供最优质的资源集合

立即查看 了解详情