0
点赞
收藏
分享

微信扫一扫

后台管理开发随笔


登录

使用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))

后台管理开发随笔_ide

登录状态

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

后台管理开发随笔_react_02

首页

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)

后台管理开发随笔_ide_03


右侧内容区域:

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
}


举报

相关推荐

0 条评论