React+Antd 后臺管理系統

說明

之前為了熟練antd框架,特別做了這個后臺管理系統練手。
正因為要熟悉,所以在設計面板的時候,盡可能想用上更多的控件。
于是對照著antd的API,開始往這個項目上堆控件。

效果圖

login.gif

!

main.gif
date.gif
add.gif
update.gif
del.gif
search.gif
echarts.gif
richText.png
upload.png

Components

注意

新增本地文件服務 使用自己修改的服務器端文件上傳組件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 

源碼

Github.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容