我最近做了一個react的後臺管理系統，用於快速建立後臺專案模板

阿政想暴富發表於2021-04-23

React

react-ant-admin

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

預覽地址

react-ant-admin

特性

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

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

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

快速使用

下載本專案到本地

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

安裝依賴

// npm 慢
npm i
// cnpm 國內映象 快
cnpm i

啟動

npm run "start mock" // 啟動本地mock資料 (暫時沒有後臺介面,請用此模式預覽專案)
npm run start // 啟動本地API介面來獲取資料

瀏覽器開啟  http://localhost:3000   即可

建立一個新的頁面

在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>;
  }
}

在``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;

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

建立一個選單

該新增方式適用於 npm run "start mock" 啟動的專案

在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"]
  }
  // .....
]