react+antD构建后台项目

学习react了，最近刚好上手一个后台管理系统，直接实战；代码有些不规范的地方。

上框架

# 安装
npm install -g create-react-app
# 构建一个react-admin的项目
npx create-react-app react-admin
cd react-admin

# 启动编译当前的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'
// 菜单相关路由
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;

---

至此，就可以开始子页面开发了，持续学习中

image.png