CNode

React+Antd 后台管理系统

分享
Zzhaoyu69发布于9 年前最后回复8 年前27 回复16983 浏览0 收藏

说明

之前为了熟练antd框架,特别做了这个后台管理系统练手。 正因为要熟悉,所以在设计面板的时候,尽可能想用上更多的控件。 于是对照着antd的API,开始往这个项目上堆控件。 简书地址 喜欢就点个赞咯

效果图

login.gif!

main.gif

date.gif

add.gif

update.gif

del.gif

search.gif

echarts.gif

1.png

屏幕快照 2018-06-20 下午8.51.54.png

Components

安装运行

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 

结尾

页面不复杂,没有使用状态管理。 使用React本身的State更新,也很好理解。 练练手熟悉熟悉框架还是不错的。

源码

Github.

查看回复

回复 (27)

D
dengnan123#1·9 年前

Y
yvanwangl#2·9 年前

蹭热点, 一个react+ antd+ dva+ express+ mongo 的库存管理系统 AccountSystem; 逃~~

M
matthiaschen#3·9 年前

赞~~~

C
chapgaga#4·9 年前

界面听漂亮,多久做出来的?

Z
zsea#5·9 年前

chart好像不是antd里的吧

Y
yakczh#6·9 年前

react表单验证用什么?

Z
zhaoyu69#7·9 年前
引用 dengnan123

@dengnan123 感谢支持

Z
zhaoyu69#8·9 年前
引用 matthiaschen

@matthiaschen 感谢支持

Z
zhaoyu69#9·9 年前
引用 zseachart好像不是antd里的吧

@zsea echarts不是,只是集成上去玩玩

Z
zhaoyu69#10·9 年前

@pengliheng 不会的,学会React走遍天下都不怕!

Z
zhaoyu69#11·9 年前
引用 yakczhreact表单验证用什么?

@yakczh antd 封装了表单模块,提交的时候会获取一个组的表单信息。

Z
zhaoyu69#12·9 年前
引用 chapgaga界面听漂亮,多久做出来的?

@chapgaga 谢谢,时间跨度不太记得了,空闲时间断断续续做的~

Z
zsea#13·9 年前

antd确实不错,我也用了一年多了,但是没有深入研究过

C
cnlile#14·9 年前

@zhaoyu69 正在学习react 中, 我如果看源代码,有疑问, 能不能留个联系QQ啥的,学习一下。。。

Y
yvanwangl#16·9 年前

@yakczh 其实表单验证如果用 redux-form 也是极好的,感兴趣可以看一波,整体处理起来还是比较清爽的,git地址,当然前提是你要用 redux; 如果你非用 mobx,那也没办法,你可以用 mobx-react-form, 用起来简直高潮,git地址

Y
yvanwangl#18·9 年前
引用 yakczh@yvanwangl mobx 有没有完整的例子参考一下

@yakczh 有的,我最近在重构自己的博客就转用mobx了,项目地址

J
JianShaw#20·9 年前

老铁,这个效果图什么东西做的

Z
zhaoyu69#22·8 年前

2018-05-31 增加tinymce富文本和markdown显示 1.png

L
lovegnep#23·8 年前

6666

H
hankewins#24·8 年前

6666

C
cleaverlove#25·8 年前

很强

Z
zhaoyu69#26·8 年前

2018-06-20 屏幕快照 2018-06-20 下午8.51.54.png 新增本地文件服务 使用自己修改的服务器端文件上传组件https://github.com/zhaoyu69/jquery-file-upload-middleware 保存文件为以hash命名,避免重复保存。hash值前两位相同的放入同一文件夹,减少文件过多的压力。 屏幕快照 2018-06-20 下午8.55.11.png 新增七牛云文件服务 需要从后台拿上传的token,不提供自己的七牛云密钥,可免费申请https://portal.qiniu.com/user/key 只需要将相关信息填入Server/routes/qiniu.js中就可以使用七牛云上传了,七牛服务器自带hash比较,不会重复上传。 屏幕快照 2018-06-20 下午9.07.06.png

S
se7en-1992#27·8 年前

@pengliheng 界面风格和框架有关系吗?界面只是ui表现而已,react是框架,二者并没有任何冲突的地方

参与回复
登录后即可参与回复。登录