基于领域模型的建站实现

背景

对于大多数中后台系统,页面布局都是由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生生成业务系统

相关推荐
砖头拍死你35 分钟前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户15129054522044 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫1 小时前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
架构师沉默1 小时前
让我们一起用 DDD,构建更美好的软件世界!
java·后端·架构
噔噔4281 小时前
使用webworker优化大文件生成hash的几种方式
前端
Hilaku1 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing1 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源
NeverSettle1105741 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试