說明

之前為了熟練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
  • Button按鈕
  • Icon圖標
• Layout
  • Grid柵格
  • Layout布局
• Navigation
  • Breadcrumb面包屑
  • Dropdown下拉菜單
  • Menu導航菜單
  • Pagination分頁
• Data Entry
  • AutoComplete自動完成
  • Cascader級聯選擇
  • Checkbox多選框
  • DatePicker日期選擇框
  • Form表單
  • InputNumber數字輸入框
  • Input輸入框
  • Radio單選框
  • Select選擇器
  • TimePicker時間選擇框
• Data Display
  • Badge徽標數
  • Calendar日歷
  • Card卡片
  • Collapse折疊面板
  • Popover氣泡卡片
  • Tooltip文字提示
  • Table表格
  • Timeline時間軸
• Feedback
  • Modal對話框
  • Message 全局提示
  • Notification通知提醒框
  • Progress進度條
  • Popconfirm氣泡確認框
  • Spin加載中

注意

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