分享github上一個簡單通用的後臺管理系統項目

介紹

ant-back是一個基於ant-design-pro實現的簡單通用的網站後臺項目,只要你有react和javascript基礎,你可以利用它快速構建你自己的後臺管理系統。

目前實現了多角色登錄、角色管理、用戶管理、富文本、圖片上傳等常用功能。

🚀 查看效果點這裏

💎 項目地址點這裏

說明

項目跑起來後首頁有使用說明,裏面有接口文檔,還有添加頁面、添加接口的教程。

數據庫文件在後端項目中。

如果對您對此項目有興趣,可以點 “Star” 支持一下 謝謝!😝

技術棧

前端:react + ant-design-pro

後端:node.js + koa + sequelize + mysql

部分截圖

首頁:

頁面圖片-首頁

角色管理:

頁面圖片-角色管理

寫文章:

頁面圖片-寫文章

安裝和運行

請確保已安裝node

git clone [email protected]:sunfutao/ant-back.git
cd ant-back
npm install 
// 安裝依賴後項目運行
npm start 

如果npm install或者時間太長,配置npm registry到國內鏡像

npm config set registry https://registry.npm.taobao.org/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
// 重新install
npm install 

實在不行你就用yarn下載

npm install -g yarn
yarn install
// 運行項目
yarn start

項目跑起來後你可以用以下兩個賬號登錄:

管理員 賬號:root
,密碼:123456

遊客 賬號:user,
密碼:123456

項目部署

修改路徑

// src/global.js

// 後端項目運行地址
export const imgUrl = 'http://back.1cloud.xyz';

執行命令

// 執行構建命令,生成的dist文件夾放在服務器下即可訪問
npm run build

功能

  • 登錄/註銷
  • 修改密碼
  • 新增用戶
  • 用戶管理
  • 角色管理
  • 權限按鈕級別
  • 菜單管理
  • 文章管理
  • 成功頁/失敗頁
  • 403頁/404頁/500頁
  • 富文本編輯器
  • 圖片上傳
  • 圖表

關於權限

項目實現了多角色登錄,你可以用root賬號給角色分配權限。你可以給一個頁面添加新增、刪除、修改等功能添加子權限,具體看項目首頁的使用說明。

如何添加頁面

後臺項目通常是列表和對應的增刪改查,我寫了一個示例列表頁提供參考,你可以直接複製它來添加頁面。
跟着項目首頁的教程走一遍即可。

License

MIT

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章