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 (
            

                {/* 用户名 */}
                
                    {getFieldDecorator('username', {
                        rules: [{required: true, message: "请输入用户名"}],
                    })(
                        } placeholder="用户名"/>
                    )}
                
                {/* 密码 */}
                
                    {
                        getFieldDecorator('password', {
                            rules: [{required: true, message: "请输入密码"}],
                        })(
                            } type="password"
                                   placeholder="密码"/>
                        )
                    }
                
                {/* 复选框 */}
                
                    忘记密码
                    
                        {this.isLogging ? "Loading" : "登录"}
                    
                
            
        )
    }
}

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 (
            {
                    return  isLogged ?  : 
                }
            } />
        )
    }
}

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 = () => (
    
        
            
            
            
            
        
    
)

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

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 = 
;
        if (childMenuData && childMenuData.length) {
            childMenu = childMenuData.map((item) => {
                return this.createMenu(item)
            });
            return 
                
                {menu.title}
            }>
                {childMenu}
            
        } else {
            return {menu.title}
        }
    }
    render(){
        return 

            
                {
                    config.map((item)=>{
                        console.log(item);
                        return this.createMenu(item)
                    })
                }
            
        
    }
}
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 
            

                后台管理系统
                管理员
            
            
                
                    
                
                
            
        
    }
}
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 
            
            
        
    }
}
export default Routers

右侧组件内容：

import React, {Component} from "react";

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

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 ?  : null
          }
      }

      return AsyncComponent
}