學(xué)習(xí)react了晕换，最近剛好上手一個后臺管理系統(tǒng)，直接實戰(zhàn)届巩；代碼有些不規(guī)范的地方恕汇。

上框架

# 安裝
npm install -g create-react-app
# 構(gòu)建一個react-admin的項目
npx create-react-app react-admin
cd react-admin

# 啟動編譯當(dāng)前的React項目
npm start

使用antD組件庫

npm install antd --save

在app.js引入樣式

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

在src文件夾下新建api、components瘾英、pages、router文件夾

image.png

配置路由
安裝

npm install react-router-dom --save-dev

在pages新建login和index文件夾但惶，分別新建login.js和index.js文件

import React, { Component } from "react";
require("./index.less");
class Login extends Component {
  render() {
    return (
      <div className="main-page">
        登錄頁
      </div>
    );
  }
}
export default Login ;

import React, { Component } from "react";
require("./index.less");
class Index extends Component {
  render() {
    return (
      <div className="main-page">
        首頁
      </div>
    );
  }
}
export default Index ;

在router文件夾下新建router.js和allocation.js
router.js

import Login from '../pages/login/login'
import Index from '../pages/index/index'
// 菜單相關(guān)路由
export const menus = []
//登錄膀曾、首頁阳啥、404路由
export const main = [
    { path: '/login', exact: true, name: '登錄', component: Login },
    { path: '/',  name: '首頁', component: Index, routes: menus },
]

export const routerExport =  {
    main, menus
}

allocation.js

import React from 'react';
import { Route, Link, Switch, Redirect } from "react-router-dom";

export const SubRoutes = route => (<Route
    path={route.path}
    exact={route.exact}
    render={props =>{
        return (
            route &&( route.Redirect ? (<Redirect to={route.Redirect}></Redirect>) :
            (<route.component {...props} routes={route.routes} />))
        )
    }}
/>
);

export const RenderRoutes = ({routes}) => {return <Switch> {(routes.map((route, i) =>  <SubRoutes key={i} {...route} />))} </Switch> };

到app.js配置

import { BrowserRouter as Router } from "react-router-dom";
import { main as mainConfig } from "./router/index";
import { RenderRoutes } from "./router/allocation";

function App() {
  return (
    <Router>
      <div className="App">
        <RenderRoutes routes={mainConfig}></RenderRoutes>
      </div>
    </Router>
  );
}

接下來輸入http://localhost:3000/login和http://localhost:3000就能看到首頁和登錄頁了
接著對index布局察迟，采用antD的layout組件
index.js

import React, { Component } from "react";
import { Layout, Switch, Menu } from "antd";
import { RenderRoutes } from "../../router/utils";
import { Link } from "react-router-dom";
require("./index.less");

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

class Index extends Component {
  state = {
    collapsed: false,
    theme: "dark",
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };
  render() {
    const { collapsed } = this.state;
    let { routes } = this.props;
    console.log(routes);
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          theme={this.state.theme}
          collapsible
          collapsed={collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu
            theme={this.state.theme}
            defaultSelectedKeys={["/user/experience"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
          >
            <Menu.Item key="1">
              <Link to="/user/WorkBench">工作臺</Link>
            </Menu.Item>
            <SubMenu key="sub1" title="用戶管理">
              <Menu.Item key="/user/experience">
                <Link to="/user/experience">體驗用戶</Link>
              </Menu.Item>
              <Menu.Item key="4">VIP用戶</Menu.Item>
              <Menu.Item key="5">
                <Link to="/user/Details">用戶詳情</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="ant-layout-header" style={{ background: "#fff" }}>
            
          </Header>
          <Content style={{ margin: "16px 16px" }}>
            <RenderRoutes routes={routes}></RenderRoutes>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default Index;

至此，就可以開始子頁面開發(fā)了所踊，持續(xù)學(xué)習(xí)中

image.png