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 [email protected]/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制作

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P24:后台管理系统开发03-登录界面UI制作

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们