关于vue.js:最好的-6-款-React-后台管理系统模板和框架

本文首发：《最好的 6 款 React 后盾管理系统模板和框架》

React admin 框架繁多，在本文里咱们介绍 React 下最好的 6 款后盾零碎，每款均严格测试后，整顿它们的优缺点不便你来筛选。同时咱们给出一些实用倡议，帮你防止选型时不留神可能导致的埋坑。

为什么后盾零碎极其重要

一个成熟好用的后盾管理系统对于公司经营效率有极大晋升，而对程序员来说，很多时候写后盾零碎其实都是在“帮个忙”，起因是这些后盾零碎少数状况下和公司的主营业务并没有太大关系。

比如说，经营会请你写个零碎来帮忙治理商品，人事会请你写个零碎来治理公司人员等等。因而，找一个称手的模板和框架能够省下大量的工夫。如果须要马上搭建马上能上线的后盾零碎，能够间接思考卡拉云(见后文)，比模板和二次开发更快更不便，同时功能丰富得多。

如何筛选 React admin 后盾

有的时候抉择一个后盾零碎框架时，一个开始没留神到的小问题可能导致之后零碎齐全无奈应用。举个例子，如果你的整套零碎用了 SCSS 来写界面，而这个后盾框架并不反对 SCSS，那么你还须要额定的精力把 SCSS 集成进去。因而，在下文评测中咱们尽量把这些细节展现进去。

咱们用以下一些规范来评判 React 下的后盾零碎模板。

开发者体验

首先后盾零碎要能用得起来，开发者 (也就是你) 得尽量少花功夫在这个框架上，也就是说这个框架自身的 API、组件或者接口须要设计得足够好，足够能用。否则，如果须要大量蛮力适配 (brute-force) 能力满足需要的话，还不如不必框架本人写好了。

权限治理

一个后盾零碎是不是具备齐备的权限治理，对于绝大多数公司来说都极为重要。比方，很难设想让一个公司请的外包经营成员来间接操作公司的用户数据库。而正确的做法是给他们调配适合的权限，让一部分人员只能操作限定的动作。

权限治理说起来简略，然而绝大多数前端模板中是无奈实现的，必须配合后端。而是不是有好的接口设计就决定了与后端的权限治理对接时是否足够容易。

组件丰盛水平

有一些组件对于一些后盾来说极为重要，比如说如果你的后盾是一个员工报销零碎，那么工夫选择器可能就十分重要，因为可能须要注明发票报销的工夫。如果你的后盾须要展现服务器运行工夫、用户数，那么报表、图表组件就很重要。

对绝大多数后盾来说，表格组件也十分重要。然而不论是表格、图表还是工夫选择器，都是实现比拟艰难的前端组件。所以要找到一个框架要刚好把这三个组件都做得好，是不太容易的事件。

因而组件的丰盛水平和欠缺度，也是筛选后盾零碎的重要规范。

React 后盾零碎的类别

React 后盾零碎能够粗略地分为以下几种类别

1. 仅前端模板
2. 前后端集成系统，须要数据迁徙
3. 前后端集成且有不便的数据接口

对于 1，适宜后盾曾经成型，所有后盾 API、数据库连贯均曾经包好的状况下。

第一种是指只有前端代码的 React 后盾零碎。当然，后盾零碎显然是用来操作后端数据的，所以不接“后端”的后盾零碎是不存在的，选用这种后盾零碎的话，你须要本人提供后端接口和数据库接口等。这个类型的代表有 antd 和各种纯 UI 的 react 框架，比方 Material UI, Mi-UI 等。

第二种是指不仅有前端代码，同时也蕴含了后端服务。如果须要一些新的后端接口，则须要调整和开发后端接口。通常来说，这类后盾零碎都是打包销售，比方 SAP，SalesForce 发售的一些 SaaS 后盾零碎，本文里就不展开讨论了。

第三种是指，前端后端集成，但不须要数据迁徙。框架提供了数据接口，你只须要把你的数据接入即可应用。这个类型的代表有 卡拉云。

那么什么状况下抉择哪种后盾零碎呢？

状况一

如果你曾经有一个成型的后盾零碎，当初只须要把后盾界面做得更不便、丑陋，或者减少一些组件的状况下:，你能够应该抉择计划 1 或者计划 3。

起因是你曾经十分明确你须要哪些组件，工作流的流程怎么，甚至曾经有后端接口能够间接接入，那么二次开发一下前端框架可能就能够满足你的需要了。或者用计划 3，能够比拟轻松地把数据接口接入，而不必对后盾接口做太多调整。

状况二

还没有后端，只有数据库。

这个状况应该是绝大多数守业公司在寻找第一个后盾零碎时遇到的状况，工程师资源全副集中在公司业务上，没有人有精力和工夫来开发后盾零碎。然而后盾零碎又极为重要，所以开始急冲冲地找一个计划。

在这种状况下，咱们举荐应用计划 3，起因是后端接口还不成型，工作流不清晰可能还须要大量迭代。这种状况下间接开始固化后端是不明智的。

状况三

没有前端，只有后端接口。这样的状况在守业公司，甚至不少大厂中也占有肯定比例。没有前端的状况下，有时候开发者甚至会间接采纳间接查问和批改数据库的形式来应用“后盾零碎”。

在这种状态下，也举荐应用计划 3，间接将数据库接入，同时用拖拽、配置的形式生成前端。

react-admin

React-admin 是一款提供前端组件，同时还提供后端数据接口的框架。目前它在 github 上有 19.1K 的星。留神，通常来说咱们讲的“react 后盾零碎”个别英文翻译为react admin，而这款框架自身比拟讨巧，名字自身就叫react-admin，请留神不要混同了概念。

react-admin 的长处非常明显

• 反对常见组件，比方表格、文本输入框、数字输入框等
• 提供前端权限管制接口(但须要独自与后端集成)
• 提供 i18n 能够翻译界面
• 完成度较高，五年的老我的项目，代码品质过硬
• 代码同时反对 TypeScirpt 和 JavaScript，开发体验好

但它的有余也很显著。

首先，组件的功能性较弱，因而须要的前端二次开发较重，只适宜比较简单的应用场景。如果须要二次开发，则须要前端工程师对这个框架和 React 自身理解较深。

其次，它的数据接口层比拟轻，对于不同的数据 (比方 REST API) 须要应用不同的接口，这些都须要独自集成和调试。

最初须要思考的中央是，尽管它在 GitHub 上有大量的赞(19000)，但真正应用的我的项目还不如其赞多(8700)，因而社区的沉闷水平也并是十分高，react-admin 的最近一次代码提交是几个月前。

AdminJS

AdminJS 与 react-admin 十分相似，也是一款次要提供前端 React 模板，同时提供轻后端接口的框架。但它开始得比拟晚，目前在 GitHub 上有 4800 个星。

AdminJS 的次要长处有

• 反对局部常见组件，比方表格、文本输入框、下拉菜单
• 文档较全面，整个文档由 JSDoc 写成，十分具体
• 我的项目较新，保护比拟勤
• 代码同时反对 TypeScirpt 和 JavaScript，开发体验好

然而有以下几个非常明显的毛病，我认为如果你在思考 AdminJS 的话，不如思考 react-admin 或卡拉云。

首先，AdminJS 的应用面十分窄，目前在 GitHub 上只有 188 的应用。

其次，它的代码复杂度极高，侧面反馈架构设计不合理。另一方面，如果去看它的文档的话，会发现如果要在 AdminJS 上做二次开发，基本上就从新学了一套新框架了，工夫老本上并不划算，同时如果遇到问题卡住我的项目极容易难产。

当然即使如此，在为数不多的后盾框架里，AdminJS 也是较为优良的一款了。

卡拉云

卡拉云与其它的框架都不太一样，它不光提供一个前端框架，还提供了一个残缺的前端编辑器。同时，卡拉云还提供残缺的后端接口，让你能够间接接入本人的数据库。在前端，你能够通过前端编辑器来配置组件，包含

• 表格
• 图表
• 文本输出
• 数字输出
• 地图
• 工夫抉择组件
• 文件上传组件
• 富文本编辑组件
• JSON 编辑组件
• 数据标注组件

等等

同时每个组件都有独自的可配置项，每个可配置项均反对用 JS 来定制逻辑。因而即便是像表格这样超简单的前端组件，在卡拉云里你也能够通过细节配置，加上 JS 逻辑，来满足任意简单的需要。比方，下图为卡拉云中对表格组件的配置选项，你能够针对每列动静暗藏、调整背景色，调整显示类型比方图片、链接等等丰盛的配置性能。同时因为任何配置项都反对 JS，因而配置的灵便度简直等同于间接写 React 代码。

只有前端工程师会根本的 JavaScript(不会的话可能也不能叫前端了)，就能够在前端定制出任意复杂度的后盾。

在后端，卡拉云反对间接查问和更新常见数据库，如 MySQL，PostgreSQL 和 MongoDB 等，同时也反对 REST API 来调用你本人的 API 端口或第三方 API。

应用卡拉云的长处非常明显，你根本能够省掉要开发保护一个后盾零碎要操的心了，这样能够让工程师专一于公司自身的业务线。同时不论是组件丰盛度和完成度，以及权限零碎的巩固水平，卡拉云都比市面上其它框架和公司做得可靠一些，具体详情请参考咱们的文档。

[](https://kalacloud.com/blog/be…)antd

antd 即 Ant Design 的简写，也就是蚂蚁金服的驰名前端框架。

antd 能够说是泛前端框架里的翘楚了，从概念上来说，它提供了很多常见的前端组件，包含表格、输入框、下拉菜单等等，每个组件均提供一些参数以供配置应用。

但严格来说，antd 并不是特意为“后盾零碎”而存在的，因而如果你想要用 antd 来搭建后盾零碎的话，它只是帮忙你把 CSS 和组件设计这两件事件做了一些，但后盾零碎中须要的逻辑还是须要本人开发的。比方举个例子，antd 提供了相似 Avatar 这样的组件，用来展现登录用户头像，但一个用户是不是登录了、登录的逻辑是怎么的，这些都是须要你本人提供逻辑的。

从教训上看，后盾零碎与间接面向消费者 (to C) 的场景不同，后盾零碎少数状况下能够接受较简略甚至毛糙的 UI，以换取更丰盛、简单的性能。而面向消费者的场景通常则须要将性能做得足够简略，且 UI/UX 极为重要。因而，少数状况下开发后盾零碎时，精力均在如何把对的数据，正确地连贯和展现进去，同时提供组件以供用户操作。

antd 提供了 展现 这一步，但其它的逻辑就须要前端工程师来黏合了。因而，antd 比拟适宜需要较为固化，不常常更改，同时工程师资源有残余的状况下。如果须要疾速迭代，则应该思考上文中提到的前三种框架。

react-antd-admin

react-antd-admin 是在 antd 的根底上，由 @jiangxy 开发的后盾零碎。它只蕴含前端局部，因而如果须要任何权限管制或者与后端连贯的话，须要独自做二次开发。

这个我的项目在晚期开发频率还能够，因而在 GitHub 上积攒了 1400 个星，但因为忙碌，起初就进行了开发。上一次代码提交还是五年前，因而比照下来，不倡议应用。同时作者本人也在 GitHub 的 readme 中也提到了平安和权限的问题:

平安 / 权限问题
目前对平安 & 权限都没思考进去，如果有这方面的要求，只能后端校验了。在申请后端接口时校验用户的身份和权限。权限问题也很麻烦，感觉不太好做成通用的货色，如果有需要的话，还是定制开发比拟好。兼容性

如果你在思考应用 react-antd-admin 的话，倡议间接在 ant 的根底上本人开发，或者应用相似卡拉云这样完成度较高的零碎。

shards-dashboard-react

shards-dashboard-react 是一套 react 下的后盾开发模板，留神这个模板的含意根本就是指它只蕴含了常见组件和其对应的 CSS，而不蕴含组件具体的逻辑解决。它的界面如下

如果你的我的项目中，只是须要增加更多的组件，特地是 Material 格调的组件，那么应用 shards-dashboard-react 会比拟适合。但如果连后端接口都没有，那么则须要思考应用本文后面提到的三个框架或零碎，react-admin, adminjs 或 卡拉云。

总结

本文中咱们介绍了市面上最好的几款 React 后盾框架，比拟了它们的优缺点。置信这篇文章能够帮忙你在技术选型的时候，提供一些参考。如果你对卡拉云感兴趣，欢送分割咱们。如果你对 Vue 的框架感兴趣，也欢送浏览 最好用的 7 款 Vue admin 后盾治理框架测评 和 7 个 Laravel admin 后盾管理系统举荐