基于领域模型的建站实现

背景

对于大多数中后台系统，页面布局都是由Header、Aside以及Main组成，而这几个模块都极其类似，包含menu、table、form等部分，而我们大多数工作都做着重复的CRUD，如果我们能把这一部分消耗的时间大大节约，那我们是不是就有更多的时间可以拿来摸鱼，所以我们希望设计一个框架来帮我们做这件事。

系统设计

随着大家的内卷，其实卷出了很多产物来帮助我们提升开发效率，例如公司内部的组件库、低代码平台方案以及现在最火热的AI。本系统就是基于低代码的设计思路去实现的。低代码通过对物料的拖拉拽自由编排以及对属性的补充，生成一份DSL，通过构建引擎将DSL转为页面。

系统架构图

通过DSL配置来去解决日常开发中70-80%的crud工作，剩下20-30%的定制化需求通过iframe、custom等方式进行高效开发，后续拓展业务功能就变成了拓展框架功能。

DSL配置

js 复制代码

const dashboardConfig = {
  mode: 'dashboard', //模板类型,不同类型对应不同的模板数据结构
  name: '', //名称
  desc: '', //描述
  icon: '', //图标
  homePage: '', //首页（项目配置）
  //头部菜单
  menu: [
    {
      key: '', //菜单唯一描述
      name: '', //菜单名称
      menuType: '', // 枚举值 group/module
      //当menuType为group时
      subMenu: [
        {
          //可递归menuItem
        },
      ],
      //当menuType为module时
      moduleType: '', //枚举值 sider/iframe/custom/schema
      //当moduleType为sider时
      siderConfig: {
        menu: [
          {
            //可递归menuItem（除 moduleType 为 sider 时）
          },
        ],
      },
      //当moduleType为iframe时
      iframeConfig: {
        path: '', //iframe路径
      },
      //当moduleType为custom时
      customConfig: {
        path: '', // 自定义路由路径
      },
      // 当moduleType为schema时
      schemaConfig: {
        api: '', // 数据源API(遵循restful 规范)
        schema: {
          type: 'object',
          properties: {
            key: {
              ...schema, //标准schema配置
              type: '', //字段类型
              label: '', // 字段名称
              // 字段在table配置
              tableOption: {
                ...elTableColumnConfig, // 标准el-table-column配置
                visiable: true, // 是否显示 (默认true)
                toFixed: 2, // 保留几位小数
              },
              // 字段在search-bar配置
              searchOption: {
                ...elComponentConfig, // 标准el-component-column配置
                comtype: '', // 组件类型 input/select/datepicker/
                default: '', // 默认值
                //  当comtype == select
                enumList: [], // 枚举值
                //  当comtype == dynamic select
                api: '', //接口地址
              },
            },
            // ...
          },
        },

        tableConfig: {
          headerButton: [
            {
              label: '', // 按钮名称
              eventKey: '', // 事件名
              eventOption: {}, // 按钮事件配置
              ...elButtonConfig, // 标准el-button配置
            },
          ],
          rowButtons: [
            {
              label: '', // 按钮名称
              eventKey: '', // 事件名
              eventOption: {
                // 当eventkey为remove时
                params: {
                  // paramKey 参数的健值
                  // rowValueKey 参数值（当格式为schema::tableKey的时候，到table中找响应字段 => user_id::schema::user_id）
                  paramKey: rowValueKey,
                },
              }, // 按钮事件配置
              ...elButtonConfig, // 标准el-button配置
            },
          ],
        }, // table配置
        searchConfig: {}, // search-bar配置
        components: {}, // 模块组件
      },
    },
  ],
};

通过 moduleType，将页面分为了四种类型（可继续拓展）：
- sider -- 含有侧边栏（menu嵌套）
- iframe -- 嵌套 iframe （框架能力拓展）
- custom -- 自定义路由路径（框架能力拓展）
- schema -- schema-view （包含schema-search-bar、schema-tabel、schema-form等）
DSL的schema配置遵循json-schema规范，因此DSL配置不仅仅可以作用于前端，也可以用来建数据库表

业务开发

通过继承的方式对base DSL 进行修改，生产一份新的业务系统的DSL,然后根据DSL生生成业务系统