登录页初步

src/common/common.less

@@ -4,6 +4,17 @@
 @active-bg:#DEF1FF;   /***下拉项选中背景色***/
 
 
+.clearfix:after{
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  zoom: 1;
+}
 
 .ant-form-item-label > label{
   color: #000;

src/components/AHeader/index.js

@@ -1,50 +1,52 @@
 import {Dropdown ,Menu} from 'antd';
+import { withRouter } from 'react-router'
 import logo from '@images/logo.png';
 import msg from '@images/msg.png';
 import me from '@images/me.png';
 import down from '@images/down.png';
-import {Component} from "react";
 import './index.less'
 
 const propTypes = {
 
 }
 const defaultProps = {};
-class AHeader extends Component{
-    render() {
-        const menu = (
-            <Menu>
-                <Menu.Item key="0">
-                    <a href="https://www.antgroup.com">修改密码</a>
-                </Menu.Item>
-                <Menu.Divider/>
-                <Menu.Item key="3">退出</Menu.Item>
-            </Menu>
-        );
-        return (
-            <>
-                <img className='logo' src={logo} alt=""/>
+function AHeader({ history }){
+    function loginOut(){
+        localStorage.removeItem("token");
+        history.push('/login');
+    }
+    const menu = (
+        <Menu>
+            <Menu.Item key="0">
+                <a href="https://www.antgroup.com">修改密码</a>
+            </Menu.Item>
+            <Menu.Divider/>
+            <Menu.Item key="3" onClick={loginOut}>退出</Menu.Item>
+        </Menu>
+    );
+    return (
+        <>
+            <img className='logo' src={logo} alt=""/>
+            <span className='break-line'>|</span>
+            <span className='sys-name'>AI病案质控平台</span>
+            <div className='infos'>
+                <span className='time'>2021年5月14日/星期五/18:05:19</span>
                 <span className='break-line'>|</span>
-                <span className='sys-name'>AI病案质控平台</span>
-                <div className='infos'>
-                    <span className='time'>2021年5月14日/星期五/18:05:19</span>
-                    <span className='break-line'>|</span>
-                    <img className='msg-icon' src={msg} alt="未读消息"/>
-                    <div className="user">
-                        <img className='user-icon' src={me} alt="用户头像"/>
-                        <Dropdown overlay={menu} trigger={['click']}>
-                            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-                                <i>用户名</i>
-                                <img src={down} alt=""/>
-                            </a>
-                        </Dropdown>
-                    </div>
+                <img className='msg-icon' src={msg} alt="未读消息"/>
+                <div className="user">
+                    <img className='user-icon' src={me} alt="用户头像"/>
+                    <Dropdown overlay={menu} trigger={['click']}>
+                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+                            <i>用户名</i>
+                            <img src={down} alt=""/>
+                        </a>
+                    </Dropdown>
                 </div>
-            </>
-        )
-    }
+            </div>
+        </>
+    )
 }
 
 AHeader.propTypes = propTypes;
 AHeader.defaultProps = defaultProps;
-export default AHeader;
+export default withRouter(AHeader);

src/components/Login/index.js

@@ -1,7 +1,10 @@
 /*import {useEffect} from 'react';
 import { useDispatch,useSelector } from 'react-redux'*/
+import { Form, Input, Button, message } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import apiObj from '@api/index';
 import { add } from '@reducers/userInfo'
+import './index.less'
 
 const {post,api} = apiObj;
 function Login({history}) {
@@ -13,22 +16,56 @@ function Login({history}) {
     if(user){
         history.push('/manage');
     }
-    function getLogin(){
-        post(api.login,{
-            "password": "a123456",
-            "username": "admin"
-        }).then((res)=>{
-            console.log(res)
+    function onLogin(data){
+        post(api.login,data).then((res)=>{
             if(res.data.code===200){
                 const data = res.data.data;
                 //dispatch(add(res.data.data))
                 localStorage.setItem('token',data.token);
+                message.success('登录成功',1);
                 history.push('/manage')
+            }else{
+                message.error(res.data.msg||'数据有误')
             }
         })
     }
     return (
-        <button onClick={getLogin}>登录</button>
+        <div className="login-container clearfix">
+            <div className="bg-box">
+                <h1>AI病案质控平台</h1>
+                <img src="" alt="背景图片"/>
+            </div>
+            <div className="content-box">
+                <div className="logo">
+                    <img src="" alt="logo"/>
+                </div>
+                <Form className='form-box' layout='vertical' onFinish={onLogin}>
+                    <Form.Item
+                        label='用户名'
+                        name="username"
+                        rules={[{ required: true, message: '请输入用户名!' }]}
+                    >
+                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" autoComplete='off'/>
+                    </Form.Item>
+                    <Form.Item
+                        label='密码'
+                        name="password"
+                        rules={[{ required: true, message: '请输入密码!' }]}
+                    >
+                        <Input
+                            prefix={<LockOutlined className="site-form-item-icon" />}
+                            type="password"
+                            placeholder="请输入密码"
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" className="login-form-button">
+                            登录
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+        </div>
     )
 }
 

src/components/Login/index.less

@@ -0,0 +1,25 @@
+@import "@common/common.less";
+
+.login-container{
+  height: 100vh;
+  .bg-box{
+    float: left;
+    width: 65%;
+    height: 100%;
+    background: #ccc;
+  }
+  .content-box{
+    width: 35%;
+    background: #fff;
+    float: right;
+
+  }
+  .form-box{
+    width: 300px;
+    margin: auto;
+  }
+  .logo{
+    margin-top: 150px;
+    text-align: center;
+  }
+}