介紹
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賬號給角色分配權限。你可以給一個頁面添加新增、刪除、修改等功能添加子權限,具體看項目首頁的使用說明。
如何添加頁面
後臺項目通常是列表和對應的增刪改查,我寫了一個示例列表頁提供參考,你可以直接複製它來添加頁面。
跟着項目首頁的教程走一遍即可。