我最近做了一個react的後台管理系統，用於快速創建後台項目模板

• 2021 年 4 月 23 日
• 筆記
• React

react-ant-admin

此框架使用與二次開發，前端框架使用react，UI框架使用ant-design，全局數據狀態管理使用redux，ajax使用庫為axios。用於快速搭建中後台頁面。歡迎各位提issue

• react
• react-router-cache-route
• ant-design
• redux
• axios

預覽地址

react-ant-admin

特性

• 菜單配置:扁平化數據組織,方便編寫,存庫,頁面菜單,標題,側邊欄,頂部導航欄同步
• 頁面懶載入:使用@loadable/component來解決首次打開頁面過慢的問題.
• Ajax請求：restful規範，自動錯誤提示，提示可配置；自動打斷未完成的請求；
• 許可權控制: 根據不用角色的功能類型顯示菜單,路由頁面攔截.

系統提供了一些基礎的頁面

• 登錄頁
• 詳情頁
• 表單頁
• 列表頁
• 許可權管理
• 結果頁

快速使用

1. 下載本項目到本地

D:> git clone //github.com/kongyijilafumi/react-ant-admin.git //github地址 慢
D:> git clone //gitee.com/kong_yiji_and_lavmi/react-ant-admin.git //碼雲地址 快

2. 安裝依賴

// npm 慢
npm i
// cnpm 中國鏡像 快
cnpm i

3. 啟動

npm run "start mock" // 啟動本地mock數據 (暫時沒有後台介面,請用此模式預覽項目)
npm run start // 啟動本地API介面來獲取數據

瀏覽器打開  //localhost:3000   即可

創建一個新的頁面

1. 在src/pages文件夾下創建一個test.js文件,程式碼如下

// 函數組件
import React from "react";

export default function Test() {
  return <div>test頁面</div>;
}
// 類組件
import React from "react";

export default class Test extends React.Component {
  render() {
    return <div>test頁面</div>;
  }
}

2. 在“src/router/route/index.js`文件里追加路由資訊.程式碼如下

import loadable from "@loadable/component";
import { Redirect } from "react-router-dom";
// .....
const Test = loadable(() => import("@pages/test")); // 支援路由懶載入
// 路由列表
const routerList = [
  {
    path: "/",
    key: "index",
    to: "/details/person",
    components: Redirect,
  },
  // ....
  {
    path: "/test", // 對應的路由
    key: "test",// 必要
    title: "test頁面",// 標題
    components: Test,
  },
];

export default routerList;

3. 瀏覽器訪問 //localhost:3000/react-ant-admin/test 即可

創建一個菜單

該添加方式適用於 npm run “start mock” 啟動的項目

1. 在src/mock/index.js 找到menu變數,往裡添加一條菜單資訊.程式碼如下所示

import dayjs from "dayjs";
let menu = [
   {
    title: "詳情頁",
    path: "/details",
    key: "details",
    parentKey: "",
    icon: "icon_edit",
    type: "1,0",
  },
  {
    title: "個人中心",
    path: "/person",
    key: "detailsPerson",
    parentKey: "details",
    icon: "icon_infopersonal",
    type: "0,1",
  },
  // .... 開始添加菜單資訊 ....
  {
    title: "test",
    path: "/test",
    key: "test",
    parentKey: "",// 空表示 為主菜單而非子菜單
    icon: "icon_infopersonal",// 菜單圖標
    type: "0,1", // 訪問許可權,自定義,當前項目 0為管理員,1為普通用戶.原始數據為字元串形式,會中途進行轉化為數組形式["0","1"]
  }
  // .....
]

2. 由於菜單會走本地會話存儲window.sessionStorage,所以保存程式碼後需要關閉當前窗口,重新打開地址 //localhost:3000/react-ant-admin

打開之後,會發現菜單會多出一個test欄目,點擊會打開之前我們創建的test頁面.這樣就完成了菜單和頁面的編寫.

文檔地址

還在努力創建中….

更多建議歡迎騷擾~

項目截圖

• 登錄

• 詳情頁

• 列表

• 許可權管理

• 結果頁

企鵝號:1369501150

郵箱:[email protected]

歡迎各位提出建議與問題!