Open source a set of characteristic Admin management system (front-end) - like to take it (1)

First preview address

admin-react-antd.eluxjs.com

What's special?

What do you see, there's nothing special about it? Isn't that what Antdthe components do? Are there not many such open source projects online?

Indeed, the so-called feature here is not how unconventional the appearance of UI components is. To be honest, there are already many UI components commonly used in the background, and it is also a wheel project to do it again.

In addition to the visible UI interface, there are actually a lot 技术创新of things 最佳实践that can be summarized and refined, such as: architecture design, file organization, engineering, routing scheme, layered decoupling, code reuse, etc. Especially for the background management system, we do not pursue personalization. If we can summarize a set of best practices and adopt a large number of standard patterns and standard parts , many codes are actually just copy and paste and then change the fields, it will be extremely Greatly improve our labor productivity, which is also the theoretical basis for the development of the recently popular low-code platforms...

Restful

As a basic concept in the back-end field, Restful's concept can also inspire the front-end: any complicated business action can actually be abstracted into the addition, deletion, modification and inspection of resources. The addition, deletion, modification and inspection of any resource actually have commonalities that can be extracted and refined, which is not only reflected in code development, but can also be used to guide product prototypes and interaction design (design loose UI interface, interaction prototype, routing jumps) Etc., do not have to customize a set of highly coupled UI and interaction for each business scenario, even if the user experience is better, but also consider the development cost, stability, maintainability).

low-code platform

Many low-code platforms use forms and CRUD to automatically generate backend systems, but one thing we have to consider is the short-side effect of wooden barrels. If a low-code platform can solve 99% of your business scenarios, beware that 1 % make you miserable.

We often encounter some optimization strategies in programming: exchange time for space, or exchange space for time, the dimensions you value in different scenarios are different. Also, sometimes it's a bit 复杂度of 工作量a meaning, sometimes simple copy-paste looks inelegant and requires a lot of work, but it makes things very intuitive and simple; instead, you use some roundabout magic to change, complex configurations file to express the same effect, it becomes difficult to maintain. Don't be afraid of too many things, just be afraid of being unorganized...

Project Introduction

Well, after muttering so much to myself, I just want to say that the feature of this project is not related to UI components, but to solve the problem . You can discuss the project source code together:

Github：github.com/hiisea/elux…

Gitee：gitee.com/hiisea/elux…

The project Elux+React+Antdis developed based on the framework, and mainly uses the addition, deletion and modification of 2 complete resources to carry out examples:

• Provides generic project scaffolding.

• Provide a common Admin system Layout (including registration, login, access to the Menu menu, polling for the latest news, etc.)

• Provide favorite bookmark function, use it to replace the Page tab, the operation is more flexible. Click [+ Favorites] in the upper left corner to try...

• Provide the <DocumentHead> component for easy maintenance in SinglePage Document Title, you may think it is very simple, isn't it just useEffect to set document.title? But in fact, it is not so simple. You have to consider the simultaneous setting of multiple places, as well as the restoration operation when the route is rolled back.

• Provide a general list search form, and automatically expand the advanced search when there are advanced search conditions: expand advanced  /  hide advanced

• Provide cross-page selection, review selected, batch operation and other functions, such as: cross-page selection and batch operation

• 在一种资源中，如何查询并引用另外一种资源，如：创建文章时，查询并选择责任编辑，这里的关键是如何复用列表代码。

• 提供双栈单链虚拟路由，不仅可以拥有二维的历史栈，还能访问历史记录、保持历史快照、对路由编程、等待。

  • 例如登录窗口中点击“取消登录”你需要回退到前一个页面，但此时如果前一个页面就是需要登录的页面，那么登录窗口又会被重新弹出。所以点击“取消登录”应当回退到最近的不需要登录的页面（浏览器原生的history并不能提供给我们访问每条历史记录的能力）：

  @effect()
  public async cancelLogin(): Promise<void> {
      //在历史栈中找到第一条不需要登录的记录
      //如果简单的back(1)，前一个页面需要登录时会引起循环
      this.getRouter().back((record) => {
        return !this.checkNeedsLogin(record.location.pathname);
      }, 'window');
  }
  复制代码

  • 例如新增用户后，需要返回列表页面并刷新：

  await api.createItem!({id, data}); //await 创建API
  await this.getRouter().back(1, 'window'); //await 返回列表页面
  message.success('新增成功！'); //提示
  this.getRouter().back(0, 'page'); //刷新页面
  复制代码

• 特色虚拟窗口：

  • 提供路由跳转时新开窗口，类似于原生window.open操作，如：新窗口打开 / 本窗口打开
  • 窗口中可以再开新窗口，最多可达10级
  • 每个窗口不仅拥有独立的Dom、状态管理Store、还自动维护独立的历史记录栈
  • 提供窗口工具条：后退、刷新、关闭，如：文章列表 => 点击标题 => 点击作者 => 点击文章数。然后你可以依次回退每一步操作，也可一次性全部关闭。
  • 支持窗口最大化，如：创建文章
  • 窗口可以通过Url发送，如将http://admin-react-antd.eluxjs.com/admin/member/item/edit/50?__c=_dialog发送给好友后，其可以通过Url还原窗口。

• 基于抽象的增删改查逻辑：

  • 业务逻辑通过类的继承class Model extends BaseResource复用
  • UI逻辑通过React Hooks复用
  • 将视图抽象成为2大类：列表(List)和单条(Item)，抽取其共性
  • 在此基础上引入视图渲染器(Render)概念，类别名+渲染器=具体某个业务视图，如：
    • type=list,render=maintain(列表+维护)，如：/admin/member/list/maintain
    • type=list,render=index(列表+展示)，如：/admin/article/list/index
    • type=list,render=selector(列表+选择)，如：/admin/member/list/selector
    • type=item,render=detail(单条+展示)，如：/admin/member/item/detail/49
    • type=item,render=detail(单条+编辑)，如：/admin/member/item/edit/49

• 基于微模块架构，每个业务功能封装成一个独立的功能模块，想要哪个功能就安装哪个模块，并支持异步按需加载，src下不再凌乱不堪：

  src
    ├── modules
    │      ├── stage //总的根模块
    │      ├── admin //admin根模块
    │      ├── dashboard //工作台模块
    │      ├── article //文章模块
    │      ├── comment //评论模块
    │      └── member //用户模块
  复制代码

• 还有更多彩蛋有待补充，或者自己探索吧...

知其所以然

对于某些特色为什么要这么设计？出发点是什么？到底合不合理？这些议题比较多，一时半会也难以说清楚，后续会陆续发文来详细阐述自己的思路与想法，跟大家一起探讨...

先说第一个吧：

为什么使用微模块

大家以为常的前端工程基本上都长这样：

src
├── assets
├── consts
│      ├── ModuleA
│      │      ├── Const1.ts //A中使用的一些常量
│      ├── ModuleB
│             ├── Const2.ts //B中使用的一些常量
├── utils
├── components
│      ├── ModuleA
│      │      ├── Component1.ts //A中使用的一些UI组件
│      ├── ModuleB
│             ├── Component2.ts //B中使用的一些UI组件
├── containers
├── pages
│      ├── ModuleA
│      │      ├── Page1.ts //A中使用的一些页面
│      ├── ModuleB
│             ├── Page2.ts //B中使用的一些页面
├── models
│      ├── ModuleA
│      │      ├── Store1.ts //A中使用一些状态定义
│      ├── ModuleB
│             ├── Store2.ts //B中使用一些状态定义
│
复制代码

其特点是以“文件职能”作为一级分类、“功能模块”作为次级分类。

现在如果我需要拿掉ModuleB，或者新增ModuleC，你将不得不进行多个目录的操作。随着文件越来越多，相互引用越来越复杂，ModuleB的相关资源和依赖像一堆乱麻散落在各个不同文件和文件夹中，你会发现要干净的剥离ModuleB是一个巨大的任务...

而大家可以看看本项目的源码：

src
  ├── modules
  │      ├── stage 
  │      ├── admin 
  │      ├── dashboard 
  │      ├── article 
  │      ├── comment 
  │      └── member 
复制代码

将“功能模块”作为一级分类，“文件职能”作为次级分类，src目录下是针对独立业务功能的一个个Module(微模块)，你要去掉评论模块？整体移除/src/modules/comment文件夹就好，要添加某个功能？把相应的目录拷到/src/modules/下面就好。如果你采用NPM包来管理这些微模块？那更简单，只需要npm remove @you-project/comment或者npm install @you-project/comment

进一步大胆设想，假如我们前端社区一起开发一个大型的类似于worldpress那样的cms系统，先由核心团队搭建起基座模块@cms/stage，后面的社区成员，都可以基于这个基座模块来独立开发不同的业务功能微模块，比如文章模块、评论模块、图片模块、上传模块、投票模块、会员模块、订单模块....然后他们各自将开发的微模块直接发布到npm，用户可以直接npm install来各取所需。

当然上面只是设想，微模块最大的好处还是在于高内聚，低耦合，至于是否要用npm来管理，不是必须的。但它并不增加工作量，只不过在每个微模块目录下，增加一个package.json罢了。如果你不想绕这么一个圈，也可以分分钟改回去：

打开src/tsconfig.json,增加别名：

"paths": {
  "@/*": ["./*"]
}
复制代码

将微模块直接用别名来import

// 将使用npm包名改为使用别名
// import stage from '@elux-admin-antd/stage';
import stage from '@/modules/stage';
复制代码

最后

先写这么多吧，一篇文章讲太多主题容易晕，后续还会挑选一些议题跟大家探讨，未完待续...

Will there be a Vue version? In fact, this project adopts the so-called model-driven of Elux , which is separate from Elux. Using Vue only needs to be rewritten . If the jsx syntax is used, the reconstruction of the UI layer should not be difficult. Let’s talk about it later.业务层UI层UI层

Completely open source and free, I like to take it, I think it is easy to use, don't forget to give a Star on Github (-_-)...