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

• 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 [email protected]:zhaoyu69/antd-spa.git

2.安装客户端依赖

cd client
npm i

3.运行客户端

npm run start

4.安装服务端依赖

cd ../server
npm i 

5.运行服务端

npm run start 

源码

Github.