說明
之前為了熟練antd框架,特別做了這個后臺管理系統練手。
正因為要熟悉,所以在設計面板的時候,盡可能想用上更多的控件。
于是對照著antd的API,開始往這個項目上堆控件。
效果圖
login.gif
!
main.gif
date.gif
add.gif
update.gif
del.gif
search.gif
echarts.gif
richText.png
upload.png
Components
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
注意
新增本地文件服務 使用自己修改的服務器端文件上傳組件https://github.com/zhaoyu69/jquery-file-upload-middleware 保存文件為以hash命名,避免重復保存。hash值前兩位相同的放入同一文件夾,減少文件過多的壓力。
upload_files.png
新增七牛云文件服務 需要從后臺拿上傳的token,不提供自己的七牛云密鑰,可免費申請https://portal.qiniu.com/user/key 只需要將相關信息填入Server/routes/qiniu.js中就可以使用七牛云上傳了,七牛服務器自帶hash比較,不會重復上傳。
qiniu_config.png
結尾
頁面不復雜,沒有使用狀態管理。
使用React本身的State更新,也很好理解。
練練手熟悉熟悉框架還是不錯的。
安裝運行
1.克隆項目
git clone git@github.com:zhaoyu69/antd-spa.git
2.安裝客戶端依賴
cd client
npm i
3.運行客戶端
npm run start
4.安裝服務端依賴
cd ../server
npm i
5.運行服務端
npm run start