帮酷LOGO
  • 显示原文与译文双语对照的内容
用React和Ant Design搭建的一个通用管理后台

  • 源代码名称:react-antd-admin
  • 源代码网址:http://www.github.com/jiangxy/react-antd-admin
  • react-antd-admin源代码文档
  • react-antd-admin源代码下载
  • Git URL:
    git://www.github.com/jiangxy/react-antd-admin.git
  • Git Clone代码到本地:
    git clone http://www.github.com/jiangxy/react-antd-admin
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jiangxy/react-antd-admin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • React通用后台

    目标是快速搭建一个可用的后台界面,可以先看下DEMO(普通) / DEMO(TAB模式),用户名/密码:guest/guest。友情提示:这个DEMO还是有点大的,加载可能稍慢,注意网速。。。

    也可以点击这里查看截图,包含一些主要特性的演示。

    如果对React或Ant Design感兴趣,但又不知如何入手的话,也可以参考下这个项目。

    需求背景

    其实总结下就一句话:简化后端人员的前端开发。。。

    虽然俺是个java开发,但总是难免要做一些前端的东西。比如各种内部系统,各种运营后台,总要有个界面给人用的吧。如果是自己用的话当然命令行就可以将就下了。。。

    内部系统么,公司也不会很重视,不会有专业的前端来搞。后端人员自己搞搞,能用就行了。

    然而每次写前端都很痛苦,无论以前用velocity+jquery+bootstrap,还是现在用React。首先有很多重复的工作,很多后台界面其实都长得差不多;其次有时会为一些很小的需求投入很大精力,写很多业务逻辑,但这些代码都是不可复用的,感觉花这么多时间不值得,毕竟不是本职工作啊,只是个二手前端。。。甚至有时折腾css就能搞一天。。。

    于是就想着能否一劳永逸,搞个比较通用的东西出来,尽量用写配置的方式替代写代码。从某种角度上说,和Metronic/AdminLTE的目标有点相似。正好前段时间在研究Ant Design,做了一些尝试,于是有了这个项目。当然并不完美,对于React和Ant Design,我也是边学边用的。

    首先看下,常见的后台系统都是什么样子的?

    是不是大部分后端系统的界面都差不多这个样子?分为几个主要的部分:

    • 侧边栏:上面是一个logo,下面是可展开的各级菜单。点击菜单项时,右边会展示相应的内容。
    • Header:展示当前登录的用户名和面包屑导航,还可能有自定义的一些菜单之类
    • 内容区:展示具体的内容,跟业务有关的
    • Footer:展示copyright之类的
    • 还有些看不到的,比如登录、注销等

    于是我做的第一件事,就是搭建一个框架,用配置文件的方式,生成这样一个界面。你可以定义自己的侧边栏(参考src/menu.js),定义点击侧边栏菜单时在右边渲染什么组件(参考src/index.js,其实就是React Router的配置),包括header/footer/登录校验/单点登录等,都可以配置(参考src/config.js)。

    在此基础上,我只要根据不同的后台系统的业务逻辑,去写不同的React组件,再配置下菜单就可以了。貌似简化很多了。缺点就是所有后台都长一个样子。。。

    但能否更简化些呢?在各种运营后台中,最常见的操作是什么?我的感觉,最常见的就是各种数据库表的CRUD。我们经常赋予数据库字段各种业务意义。比如将某条记录的status字段改为-1,表示屏蔽这个商品;或者新增一个商品,其实就是某个表新增一条记录之类的。运营的很多操作,是不是都能简化成CRUD?于是我又做了第二件事:写了一个通用的CRUD组件,我称之为DBTable。大概长这个样子:

    也是分为几个部分:

    另外提醒下,1.4.0版本之后,querySchema和dataSchema不一定要用js文件配置了,可以从服务端异步加载了,参考异步schema相关配置

    使用者只用关心自己的schema文件就可以了,不用在意渲染出来是什么样子。利用DBTable组件,就可以快速实现对某个表的CRUD了(其实不只可以用于数据库,符合这种操作模式的都可以用)。缺点就是没有了明确的业务含义,运营MM们可能不会用。。。她们又不知道CRUD是啥。所以需要培训下,但也是套近乎的好机会啊




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语