react开发后台管理随笔

==登录==

使用redux做状态管理,设置登录的 reducer

loginReducer.js

const loginRedirectPath = (state={toPath:""})=>{
    return state
}
export  default loginRedirectPath

store.js

import {createStore, combineReducers} from "redux";

import loginReducer from "./reducer/loginReducer";

const reducers = combineReducers({
   loginState: loginReducer
})

const store = createStore(reducers);

export default store

登录页：

import React, {Component} from "react";
import {withRouter, NavLink} from "react-router-dom";
import {connect} from "react-redux";
import {Form, Icon, Input, Button,} from "antd";
import "./index.css";

const FormItem = Form.Item;

class LoginFrom extends Component {
    handleSubmit(e) {
        console.log(e)
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values)
            }
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit.bind(this)} className="login-form" id="login-form">
                {/* 用户名 */}
                <FormItem>
                    {getFieldDecorator('username', {
                        rules: [{required: true, message: "请输入用户名"}],
                    })(
                        <Input prefix={<Icon type="user" style={{color: "rgba(0,0,0,0.25)"}}/>} placeholder="用户名"/>
                    )}
                </FormItem>
                {/* 密码 */}
                <FormItem>
                    {
                        getFieldDecorator('password', {
                            rules: [{required: true, message: "请输入密码"}],
                        })(
                            <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,0.25)'}}/>} type="password"
                                   placeholder="密码"/>
                        )
                    }
                </FormItem>
                {/* 复选框 */}
                <FormItem>
                    <span><NavLink to="/reset">忘记密码</NavLink></span>
                    <Button type="primary" htmlType="submit" className="login-form-button"
                            loading={this.isLogging ? true : false}>
                        {this.isLogging ? "Loading" : "登录"}
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const WrappedMormalLoginFrom = Form.create()(LoginFrom);
const loginState = ({loginState}) => ({toPath: loginState.toPath})

export default withRouter(connect(loginState)(WrappedMormalLoginFrom))

登录状态

AuthorizedRoute.js

import React, {Component} from "react";
import {Route,Redirect} from "react-router-dom";
class AuthorizedRoute extends Component {
    render() {
        const {component:Component} = this.props;
        const isLogged = true;//默认是已经登录状态
        return (
            <Route render={
                props=>{
                    return  isLogged ? <Component {...props} /> : <Redirect to="/login" />
                }
            } />
        )
    }
}

export  default  AuthorizedRoute

路由

router.js

import React from "react";
import {Switch, Route, Redirect, HashRouter} from "react-router-dom";
import asyncComponent from "../component/asyncComponent";
import AuthorizedRoute from "./AuthorizedRoute";
const Home = asyncComponent(() => import("../pages/home/"));
const Login = asyncComponent(() => import("../pages/login/"));
export const Router = () => (
    <HashRouter>
        <Switch>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <AuthorizedRoute path="/" component={Home}/>
            <Redirect from="/" exact to="/login"/>
        </Switch>
    </HashRouter>
)

创建左侧菜单以及用户权限

menuList.js

import React, {Component} from "react";
import {NavLink} from "react-router-dom";
import {Menu, Icon} from "antd";
import config from "../utils/menu";
const SubMenu = Menu.SubMenu;
class MenuList extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    /**
     * 创建菜单
     * @param menu
     */
    createMenu(menu) {
        const childMenuData = menu.children;
        let childMenu = <div className="list-ul"></div>;
        if (childMenuData && childMenuData.length) {
            childMenu = childMenuData.map((item) => {
                return this.createMenu(item)
            });
            return <SubMenu key={menu.id} title={<span>
                <Icon type={menu.icon}/>
                {menu.title}
            </span>}>
                {childMenu}
            </SubMenu>
        } else {
            return <Menu.Item key={menu.id}><NavLink to={menu.url}><Icon
                type={menu.icon}/>{menu.title}</NavLink></Menu.Item>
        }
    }
    render(){
        return <div>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]} style={{height:"100%",borderRight:0}}>
                {
                    config.map((item)=>{
                        console.log(item);
                        return this.createMenu(item)
                    })
                }
            </Menu>
        </div>
    }
}
export default MenuList

menu.js:

const menus = [
    {
        id: 1,
        title: "用户管理",
        icon: "bank",
        url: "",
        children: [{
            id: 2,
            title: "忠实用户",
            url: "/user",
        }, {
            id: 3,
            title: "一般用户",
            url: "/InviteList",
        }]
    },
    {
        id: 4,
        title: "文章管理",
        icon: "bank",
        children: [{
            id: 5,
            title: "标签",
            url: "/purchaseCertificate",
        }]
    }
]


export  default  menus

首页

import React, {Component} from "react";
import {withRouter} from "react-router-dom";
import {Icon, Layout, Modal} from 'antd';
import Content from "../../reducer";
import CreateMenuList from "../../component/menuList";
import "./index.css";

const {Header, Sider} = Layout;

class Home extends Component {
    logout() {
        const {dispatch} = this.props;
        //退出登录，
        Modal.confirm({
            content: "确定要退出吗？",
            cancelText: "取消",
            okText: "确定",
            onOk: (values) => {
                console.log(values);
                this.props.history.push("/login");
                return new Promise((res, rej) => {
                    dispatch({
                        payload: values
                    })
                }).catch((e) => console.warn(e))
            }
        })
    }
    render() {
        return <Layout>
            <Header className="header">
                <span>后台管理系统</span>
                <span><span>管理员</span><Icon type="logout" onClick={this.logout.bind(this)}/></span>
            </Header>
            <Layout>
                <Sider width={200}>
                    <CreateMenuList/>
                </Sider>
                <Layout><Content/></Layout>
            </Layout>
        </Layout>
    }
}
export default withRouter(Home)

右侧内容区域：

import React, {Component} from "react";
import {Switch, Route} from "react-router-dom";
import asyncComponent from "../component/asyncComponent";
const Demo = asyncComponent(() => import("../component/demo"));
class Routers extends Component {
    render() {
        return <Switch>
            <Route path="/user" component={Demo}/>
            <Route path="/" component={Demo}/>
        </Switch>
    }
}
export default Routers

右侧组件内容：

import React, {Component} from "react";

class Demo extends Component {
     render() {
         return <div >右侧内容组件</div>
     }
}

export  default  Demo

按需异步加载组件

asyncComponent.jsx

/**
 * 按需异步加载组件
 */
import React, {Component} from "react";
export  default function asyncComponent(importComponent) {
      class AsyncComponent extends Component{
          constructor(props){
              super(props)
              this.state={
                  component:null
              }
          }
          async componentDidMount(){
              const {default:component} = await importComponent();
              this.setState({
                  component:component
              })
          }
          render(){
              const Component = this.state.component
              return Component ? <Component {...this.props} /> : null
          }
      }

      return AsyncComponent
}