从零开始，搭建一个简单的购物平台（五）

从零开始，搭建一个简单的购物平台（四）：https://blog.csdn.net/time_____/article/details/105414410
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

前面几篇文章将项目配置以及部分功能实现，这篇主要把前端的路由跳转功能实现一下，话不多说，直接开始盘

说到路由，菜单栏是必不可少的。

• 首先在心中构思一下数据管理的结构，管理系统一般是顶部菜单和侧边菜单，这里我们用侧边栏进行路由

• 来做基本的架子，在antd找到layout布局

• 将四个部分分别做成组件，放到component中，头和脚内容不多，直接跳过，开始实现侧边栏功能，直接复制一下官方的组件，在上头加个logo就好了，但是由于侧边栏需要实现路由功能，所以将其配置数据剥离出来，新建menuList.js文件，放在config文件夹中（当然，也可以添加图标，这里主要因为懒(◍´꒳`◍)，所以没加）

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" },
      ]
    }
  ];
}

• 在侧边栏组件中引入menuList并开始实现界面

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 (
          
            {this.createMenu(item.list)}
          
        );
      } else {
        return (
          
            {item.name}
          
        );
      }
    });
  }
  render() {
    return (
      

        
          {this.createMenu(MenuData.leftMenu)}
        
      
    );
  }
}

• 侧边栏实现后，我们需要配置一下路由，和侧边栏相似，新建routeList用于配置路由数据，将所有界面引入到routeList（需要新建所有的界面，在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 },
  ];
}

• 接着是构建路由

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 (
      
        
          
            
          
          
          
            
          
           {
              return (
                
                  
                    {this.createRoute()}
                    
                  
                
              );
            }}
          >
          
        
      
    );
  }
  createRoute = props => {
    return RouteList.leftMenu.map(item => {
      return (
        
      );
    });
  };
}

• 在App.js中引入route组件，将之前固定的login界面替换成route组件，达到以下效果

import React from "react";
import Route from "./route/route";
function App() {
  return (
    

      
    
  );
}
export default App;

总结 

组件化开发的核心是组件复用，同一个组件配置项和传递参数不同，其效果功能也不同