##一个企业级应用框架（全栈）

核心Model

整个项目围绕基于dsl的渲染实现，以下为一个典型dsl渲染站点的模型配置

{
  mode: "dashboard", // 模板类型，不同模板类型对应不同模板数据结构
  name: "", //名称
  desc: "", //描述
  icon: "",
  homePage: "", //首页（项目配置）
  // 头部菜单
  menu: [
    {
      key: "", // 菜单唯一标识
      name: "", // 菜单名称
      menuType: "", //枚举值， group | module
      // menuType == group 时可填
      subMenu: [
        {
          // 可递归 menuItem
        },
      ],
      // menuType == module 时可填
      moduleType: "", //枚举值，iframe | schema | custom | sider

      // 当moduleType == iframe
      iframeConfig: {
        path: "", // iframe地址
      },

      // 当moduleType == schema
      customConfig: {
        path: "", // 自定义路由路径
      },

      // 当moduleType == custom
      schemaConfig: {
        api: "", // 数据源API遵循restful
        schema: {
          //板块数据结构
          type: "object",
          properties: {
            key: {
              ...schema, // 标准schema配置
              label: "",
              type: "", //字段的中文名
              // table配置
              tableOptions: {
                ...elTableColumnConfig, //标准el-table-column配置
                visible: true, // 是否在表格中显示 默认true
              },
              // search-bar 相关配置
              searchOptions: {
                ...elComponentsConfig, // 标准el-component
                comType: "", // 配置组件类型
                default: "", //默认值

                // 如果comType == select
                enumList: [], // 枚举列表可选option

                // 如果comType == dynamicSelect
                api: "", // 动态获取枚举列表的接口
              },
              createFormOption: {
                // ...eleComponentConfig,
                comType: "",
                visible: true,
                disabled: false,
                default: "",
                // comType === 'select' 时生效
                enumList: [],
              },
            },
          },
        },
        tableConfig: {
          headerButtons: [
            {
              label: "", // 按钮名称
              eventKey: "", // 按钮事件key
              eventOption: {}, // 按钮具体配置
              //   ...elButtonConfig // 标准el-button配置
            },
          ],
          rowButtons: [
            {
              label: "", // 按钮名称
              eventKey: "", // 按钮事件key
              eventOption: {}, // 按钮具体配置
              //   ...elButtonConfig // 标准el-button配置
            },
          ],
        }, // 表格配置
        searchConfig: {}, // search-bar 相关配置
        components: {}, // 模块组件
      },

      // 当moduleType == sider
      siderConfig: {
        menu: [
          {
            // 可递归 menuItem(除moduleType == sider)
          },
        ],
      },
    },
  ],
}

服务端启动方法

const { serverStart } = require("@sailornpg/elpis");

const app = serverStart();

服务端配置

遵循约定式配置，文件结构如下：

app
├── config
│   ├── config.js
│   ├── config.dev.js
│   └── config.prod.js
├── controller
│   ├── demo.js
├── router
│   └── demo.js
├── extend
│   └── demo.js
├── router
│   └── demo.js
├── router-schema
│   └── demo.js
├── service
│   └── demo.js
└── webpack.config.js

前端构建

const { frontendBuild } = require("@sailornpg/elpis");

frontendBuild(process.env._ENV);

自定义页面拓展

再 app/pages/目录下写入口entry.xxx.js

dashboard / schema-view/ components 动态组件拓展

1、再 app/pages/dashboard/complex-view/schema-view/components 编写组件 2、配置到app/pages/dashboard/complex-view/schema-view/component-config.js

schema-form 组件拓展

1、再 app/widgets/schema-form/complex-view 编写组件 2、配置到app/widgets/schema-form/form-item-config.js

schema-search-bar 组件拓展

1、再 app/widgets/schema-search-bar/complex-view 编写组件 2、配置到app/widgets/schema-search-bar/form-item-config.js