React模拟后台项目（七）Login页面文件配置

一、登录 src/page/login/index.js

// 导入库
// 导入React
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {
    loginAction
} from './store/actionCreators'

// 导入样式
// 导入styled 
import {
    LoginDiv, 
    LoginForm,
    Title,
} from './style.js'

// 导入UI
import { Form, Input, Button, Checkbox ,Spin} from 'antd';

class Login extends Component {
    constructor(props){
        super(props)
        this.state={
            isShowLoading: false
        }
    }
    // 表单
    onFinish = values => {
        // console.log('Success:', values);      
        this.setState({
            isShowLoading: true
        })
        //表单数据
        this.props.loginFn(values, ()=>{
            this.setState({
                isShowLoading: false
            })
        })
    };

    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        // 登陆成功 跳转至首页
        if(this.props.token){
            return <Redirect to='/admin' />
        }
        
        return (
            // 背景图设置未生效  未找到原因
            <LoginDiv style={{backgroundImage: "url(" + require("../../static/img/login.jpg") + ")"}}>
                <Spin tip="Loading..." spinning={this.state.isShowLoading}>
                <LoginForm>
                    <Title>后台管理系统</Title>
                    <Form
                    
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item> */}

                    <Form.Item>
                        <div className="remenberMe">
                        <Checkbox>Remember me</Checkbox>
                        <Button type="primary" htmlType="submit">
                        Submit
                        </Button>
                        </div>
                    </Form.Item>
                    </Form>
                </LoginForm>
                </Spin>
            </LoginDiv>
        )
    }
}

const mapStateToProps = state => {
    return {
        token:state.toJS().login.token
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loginFn: (params, callback) => dispatch(loginAction(params, callback))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)

二、样式文件 src/page/login/style.js

// 导入styled
import styled from 'styled-components';

export const LoginDiv = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f2f5 ;
`
export const LoginForm = styled.div`
    height: 300px;
    width: 400px;
    .remenberMe{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
`
export const Title = styled.h1`
    font-size: 30px;
    font-weight: blod;
    margin-bottom: 20px;
    text-align: center;
`

三、login仓库 src/page/login/store/index.js

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './actionTypes';
    
export {reducer, actionCreators, constants} 

四、login仓库 src/page/login/store/actionTypes.js

// export const HTTP动词或描述 = '模块名/HTTP动词或描述';

// export const ARTS_ADD = 'login/ARTS_ADD';//重置

export const POST_LOGIN = 'login/POST_LOGIN'

// 相关参考代码
// export const CHANGE_SEARCH_TABLE = 'accreditCreditMain/CHANGE_SEARCH_TABLE';//查询
// export const PAGE_CHANGE_DATA = 'accreditCreditMain/PAGE_CHANGE_DATA';//分页
// export const RESET_TABLE_LIST = 'accreditCreditMain/RESET_TABLE_LIST';//重置

五、login仓库 src/page/login/store/actionCreators.js

// 一、常量
import * as constants from './actionTypes'

// 二、UI组件
import { message } from 'antd';

// 三、接口
import {
    postLoginApi,
} from '../../../api/index'

export const loginAction = (params,callback) => dispatch => {
    postLoginApi(params).then(res => {
        if(res.meta.status === 200){
            // 存储数据
           localStorage.setItem('userinfo', JSON.stringify(res.data))
           localStorage.setItem('token', res.data.token)
            // 成功
            dispatch({
                type: constants.POST_LOGIN,
                payload: {
                    data: res.data,
                    token: res.data.token
                }
            })
            // 提示
            message.success('登陆成功')
        }else{
            // 提示
            message.error(res.meta.msg);
        }
        callback()
    })
}

六、login仓库 src/page/login/store/reducer.js

import {fromJS} from 'immutable'
import * as constants from './actionTypes'

const defaultState = fromJS({
    userinfo: localStorage.getItem('userinfo') || '',
    token: localStorage.getItem('token') || ''
})

export default (state = defaultState, action) => {
    switch(action.type)
    {
        case constants.POST_LOGIN:
           state.set ('userinfo',JSON.stringify(action.payload.data))
           return state.set('token', action.payload.token)
        default: 
            return state
    }
        
}