ゼロから始めて、シンプルなショッピングプラットフォームを構築します（5）

ゼロから、シンプルなショッピングプラットフォーム（4つ）を構築します：https：//blog.csdn.net/time_____/article/details/105414410
プロジェクトのソースコード（継続的な更新）：https：//gitee.com/DieHunter/myCode/ツリー/マスター/ショッピング

以前の記事では、プロジェクトの構成といくつかの機能を実装しました。この記事では、主にフロントエンドのルーティングジャンプ機能を実装します。言うまでもなく、直接開始します。

ルーティングに関しては、メニューバーが不可欠です。

まず、データ管理の構造を念頭に置いてください。管理システムは通常、トップメニューとサイドメニューです。ここでは、ルーティングにサイドバーを使用します。

基本的な棚を作成するには、antdでレイアウトを見つけます

4つのパーツをコンポーネントにしてコンポーネントに配置します。頭と足のコンテンツはあまりありません。スキップしてサイドバー機能の実現を開始してください。公式コンポーネントをコピーして上部にロゴを追加するだけです。ただし、サイドバーはルーティング機能を実装する必要があるため、構成データが削除され、新しい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 (
          <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>
    );
  }
}

サイドバーを実装したら、ルーティングを構成する必要があります。サイドバーと同様に、新しいrouteListを使用してルーティングデータを構成し、すべてのインターフェイスをrouteListにインポートします（すべてのインターフェイスを作成する必要があります。レンダリングでロゴを返すだけです）。

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 (
      <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>
      );
    });
  };
}

App.jsにルートコンポーネントを導入し、以前に修正されたログインインターフェイスをルートコンポーネントに置き換えて、次の効果を実現します

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

総括する

コンポーネント開発の中核はコンポーネントの再利用です。同じコンポーネントには異なる構成アイテムと転送パラメーターがあり、その効果関数も異なります。

ゼロから始めて、シンプルなショッピングプラットフォームを構築します（5）

おすすめ