Build a simple shopping platform from scratch (5)

From scratch, build a simple shopping platform (4): https://blog.csdn.net/time_____/article/details/105414410
Project source code (continuous update): https://gitee.com/DieHunter/myCode/ tree/master/shopping

The previous articles have implemented project configuration and some functions. This article mainly implements the front-end routing jump function. Without much to say, start directly.

When it comes to routing, the menu bar is essential.

• First conceive the structure of data management in mind. The management system is generally a top menu and a side menu. Here we use the sidebar for routing

• To make a basic shelf, find the layout in antd

• Make the four parts into components and put them in the component. There is not much content in the head and feet. Just skip it and start to realize the sidebar function. Just copy the official component and add a logo on the top. But because The sidebar needs to implement the routing function, so the configuration data is stripped out, and a new menuList.js file is created and placed in the config folder (of course, you can also add icons. This is mainly because of laziness (◍´꒳`◍)). plus)

export default class MenuList {
  static leftMenu = [
    {
      name: "商品管理",
      list: [
        { name: "查找商品", route: "/admin/findshop" },
        { name: "新增商品", route: "/admin/addshop" },
        { name: "修改商品", route: "/admin/updatashop" }
      ]
    },
    {
      name: "用户管理",
      list: [
        { name: "用户列表", route: "/admin/userlist" },
      ]
    }
  ];
}

• Introduce menuList in the sidebar component and start to implement the interface

import React from "react";
import "./left.less";
import { Menu } from "antd";
import { Link } from "react-router-dom";
import MenuData from "../../config/menuList";

const { SubMenu } = Menu;
export default class Left extends React.Component {
  createMenu(data) {
    return data.map((item) => {
      if (item.list) {
        //递归生成子项
        return (
          <SubMenu key={item.name} title={item.name}>
            {this.createMenu(item.list)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={item.name} title={item.name}>
            <Link to={item.route}>{item.name}</Link>
          </Menu.Item>
        );
      }
    });
  }
  render() {
    return (
      <div className="leftBox">
        <Menu
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
        >
          {this.createMenu(MenuData.leftMenu)}
        </Menu>
      </div>
    );
  }
}

• After the sidebar is implemented, we need to configure the routing. Similar to the sidebar, a new routeList is used to configure routing data, and all interfaces are imported into the routeList (you need to create all the interfaces, just return a logo in render)

import FindShop from "../page/shop/findItem/find";
import AddShop from "../page/shop/addItem/add";
import UpdataShop from "../page/shop/findItem/find";
import UserList from "../page/user/userList/userList";
export default class RouteList {
  static leftMenu = [
    { name: "查找商品", route: "/admin/findshop", comp: FindShop },
    { name: "新增商品", route: "/admin/addshop", comp: AddShop },
    { name: "修改商品", route: "/admin/updatashop", comp: UpdataShop },
    { name: "用户列表", route: "/admin/userlist", comp: UserList },
  ];
}

• Next is to build the route

import React from "react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import RouteList from "../config/routeList";
import Login from "../page/login/login";
import Home from "../page/home/home";
import NotFind from "../page/errpage/404";
export default class RoutrModel extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <Redirect to="login"></Redirect>
          </Route>
          <Route path="/login" component={Login}></Route>
          <Route exact path="/admin">
            <Redirect to="/admin/findshop"></Redirect>
          </Route>
          <Route
            path="/admin"
            render={props => {
              return (
                <Home {...props}>
                  <Switch>
                    {this.createRoute()}
                    <Route component={NotFind}></Route>
                  </Switch>
                </Home>
              );
            }}
          ></Route>
          <Route component={NotFind}></Route>
        </Switch>
      </Router>
    );
  }
  createRoute = props => {
    return RouteList.leftMenu.map(item => {
      return (
        <Route path={item.route} component={item.comp} key={item.route}></Route>
      );
    });
  };
}

• Introduce route component in App.js and replace the previously fixed login interface with route component to achieve the following effects

import React from "react";
import Route from "./route/route";
function App() {
  return (
    <div className="App">
      <Route></Route>
    </div>
  );
}
export default App;

to sum up 

The core of component development is component reuse. The same component has different configuration items and transfer parameters, and its effect functions are also different.