react-ant-admin

TypeScript 版GitHub(國外地址) |TypeScript 版碼雲(國內鏡像)

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

預覽地址

react-ant-admin

nodejs后台web服務:react-ant-admin-server

文檔地址

react-ant-admin文檔地址

更多建議歡迎騷擾~

qq交流群:532948540

qrcode

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

特性

菜單配置:扁平化數據組織,方便編寫,存庫,頁面菜單,標題,側邊欄,頂部導航欄同步
頁面懶加載:使用@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>;
}

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

/**
 * 給 pages 組件追加路由信息 
 * export default 組件的原型上添加route信息,或者向外暴露一個 route 
 * 會被webpack的webpack-router-generator插件捕獲信息
 */

// 1.被捕獲 export default 原型上的route
Test.route={
  tile : "test頁面",
  key : "test",
  path: "/test"
}

// 2.被捕獲 暴露的route信息  優先級比上面高
export const route = {
  tile : "test頁面",
  key : "test",
  path: "/test"
}

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

創建一個菜單

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

在src/mock/index.js 找到menu變量,往里添加一條菜單信息.代碼如下所示

import dayjs from "dayjs";
let menu = [
   {
    menu_id: 2,
    title: "詳情頁",
    path: "/details",
    key: "details",
    parentKey: "",
    icon: "icon_edit",
    order: 1,
    keepAlive: "true",
  },
  {
    menu_id: 1,
    title: "個人中心",
    path: "/person",
    key: "detailsPerson",
    parentKey: "details",
    icon: "icon_infopersonal",
    order: 1,
    keepAlive: "true",
  },
  // .... 開始添加菜單信息 ....
  {
    menu_id: 9, // 菜單id 用於關聯權限
    title: "test", // 標題
    path: "/test",// 訪問路徑
    key: "test", // 唯一key
    parentKey: "",// 空表示 為主菜單而非子菜單
    icon: "icon_infopersonal",// 菜單圖標
    order:1,// 菜單排序 越小越靠前
    keepAlive: "true", //  頁面保持狀態
  }
  // .....
]