Primera dirección de vista previa

admin-react-antd.eluxjs.com

¿Qué es especial?

¿Qué ves, no tiene nada de especial? ¿No es eso lo que Antdhacen los componentes? ¿No hay muchos proyectos de código abierto en línea?

De hecho, la supuesta característica aquí no es cuán poco convencional es la apariencia de los componentes de la interfaz de usuario. Para ser honesto, ya hay muchos componentes de la interfaz de usuario que se usan comúnmente en segundo plano, y también es un proyecto de rueda para hacerlo nuevamente.

Además de la interfaz de usuario visible, en realidad hay muchas 技术创新cosas 最佳实践que se pueden resumir y refinar, como: diseño de arquitectura, organización de archivos, ingeniería, esquema de enrutamiento, desacoplamiento en capas, reutilización de código, etc. Especialmente para el sistema de administración en segundo plano, no buscamos la personalización. Si podemos resumir un conjunto de mejores prácticas y adoptar una gran cantidad de patrones estándar y partes estándar , muchos códigos en realidad son solo copiar y pegar y luego cambiar los campos, será ser extremadamente Mejorar en gran medida nuestra productividad laboral, que también es la base teórica para el desarrollo de las recientemente populares plataformas de código bajo...

Sosegado

Como concepto básico en el campo de back-end, el concepto de Restful también puede inspirar el front-end: cualquier acción comercial complicada puede abstraerse en la adición, eliminación, modificación e inspección de recursos. La adición, eliminación, modificación e inspección de cualquier recurso en realidad tienen puntos en común que se pueden extraer y refinar. Esto no solo se refleja en el desarrollo del código, sino que también se puede usar para guiar los prototipos de productos y el diseño de interacción (diseño de interfaz de interfaz de usuario suelta, prototipo de interacción , saltos de enrutamiento), etc., no es necesario personalizar un conjunto de interfaz de usuario e interacción altamente acoplados para cada escenario comercial, incluso si la experiencia del usuario es mejor, pero también considere el costo de desarrollo, la estabilidad, la capacidad de mantenimiento).

plataforma de código bajo

Muchas plataformas de código bajo utilizan formularios y CRUD para generar automáticamente sistemas back-end, pero una cosa que debemos tener en cuenta es el efecto secundario de los barriles de madera. Si una plataforma de código bajo puede resolver el 99% de sus escenarios comerciales, tenga cuidado de que El 1 % te hace sentir miserable.

A menudo nos encontramos con algunas estrategias de optimización en la programación: intercambiar tiempo por espacio, o intercambiar espacio por tiempo, las dimensiones que valoras en diferentes escenarios son diferentes. Además, a veces tiene un poco 复杂度de 工作量significado, a veces un simple copiar y pegar parece poco elegante y requiere mucho trabajo, pero hace que las cosas sean muy intuitivas y simples; en su lugar, usas un poco de magia indirecta para cambiar, archivos de configuraciones complejas para expresar el mismo efecto, se vuelve difícil de mantener. No tengas miedo de demasiadas cosas, solo ten miedo de ser desorganizado...

Introducción al proyecto

Bueno, después de hablar tanto conmigo mismo, solo quiero decir que la característica de este proyecto no está relacionada con los componentes de la interfaz de usuario, sino con la idea de resolver el problema . Pueden discutir el código fuente del proyecto juntos:

Github: https://github.com/hiisea/elux…

Gitee：gitee.com/hiisea/elux…

El proyecto Elux+React+Antdse desarrolla en base al framework, y utiliza principalmente la adición, eliminación y modificación de 2 recursos completos para realizar ejemplos:

Proporciona un andamiaje de proyecto genérico.
Proporcione un diseño de sistema de administración común (incluido el registro, inicio de sesión, acceso al menú Menú, encuestas para conocer las últimas noticias, etc.)
Proporcione la función de marcador favorito, utilícela para reemplazar la pestaña Página, la operación es más flexible. Haga clic en [+ Favoritos] en la esquina superior izquierda para probar...
Proporcione el componente <DocumentHead> para facilitar el mantenimiento en SinglePage Document Title, puede pensar que es muy simple, ¿no es solo useEffect para configurar document.title? Pero en realidad no es tan sencillo, hay que tener en cuenta la configuración simultánea de varios lugares, así como la operación de restauración cuando se retrocede la ruta.
Proporcione un formulario de búsqueda de lista general y expanda automáticamente la búsqueda avanzada cuando haya condiciones de búsqueda avanzada: expandir avanzado / ocultar avanzado
Proporcione selección de páginas cruzadas, revisión seleccionada, operación por lotes y otras funciones, tales como: selección de páginas cruzadas y operación por lotes
在一种资源中，如何查询并引用另外一种资源，如：创建文章时，查询并选择责任编辑，这里的关键是如何复用列表代码。

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

例如登录窗口中点击“取消登录”你需要回退到前一个页面，但此时如果前一个页面就是需要登录的页面，那么登录窗口又会被重新弹出。所以点击“取消登录”应当回退到最近的不需要登录的页面（浏览器原生的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';
复制代码

最后

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

¿Habrá una versión de Vue? De hecho, este proyecto adopta el llamado model-driven de Elux , que es independiente de Elux. Para usar Vue, solo necesita reescribirlo . Si se usa la sintaxis jsx, la reconstrucción de la capa de la interfaz de usuario no debería ser difícil. Hablaré de eso más tarde.业务层UI层UI层

Completamente de código abierto y gratuito, me gusta tomarlo, creo que es fácil de usar, no olvides darle una estrella en Github (-_-)...

Código abierto, un conjunto de características del sistema de gestión de administración (front-end): me gusta tomarlo (1)