本文来源于 哲玄前端（抖音ID：44622831736）大前端全栈实践课程
为解决重复性工作，该方案通过配置解决80%的共性页面，通过提供扩展解决另外20%个性化功能。该项目为SSR和CSR混合，通过SSR提供多页面入口，其中各页面入口中采用CSR，通过路由进行SPA。
-
DSL： dashboard模板配置 （数据驱动设计）
-
dashboard模板页
- 配置解析器 +vue-router （前端路由）（CSR）
-
结构设计
- 首页含若干菜单项，菜单项目两种类型 module(单个页面入口)、group(多个页面入口，提供subMenu递归配置)，菜单显示提供4类页面 Schema-View （配置页面）、 iframe-View（第三方页面） 、Custom-View（自定义页面），包含子菜单的sider（里面又含另外3类页面）
- 通过一份json配置生成一个系统，为了减少配置，采用类继承的思想，创建多个基类维护共有的功能，再单独添加个性化的配置。
- 其中schemaView严格按照jsonSchema标准，获取配置数据进行解析生成页面。
整个章节围绕dsl的结构展开，重点理解配置的数据结构。
大致流程：
dsl结构如下：
页面表现：
与平时常见的开发不同，平时的表格开发是基于配置，各自独立开来，searchBar，table，api，database各自开发，比较耗时。
该项目架构主张从一份数据源出发(单表)，由数据源的配置生成searchBar，table，api，database且保留扩展项，对字段进行描述即可(xxOption,xxConfig)。
补充知识：
路由的动态引入(懒加载)
- ()=> import ('xxx.vue') webpack打生产包时，将需要动态引入的部分通过正则匹配单独打包。
路由由hash改为history的原因：
-
需要获取接口query值插入全局变量
-
后续登录操作需要传达callbackUrl给后端，后端不能识别#后面的内容
保留可扩展性
- dsl中可添加 mode（如dashboard）
- 添加customView（如todo），iframeView
- schema中添加FieldKey.xxxOption和xxxConfig进行配置解析
- 添加外部组件form,dialog...和searchbar的类型（input，select...）
- 工具库(utils,curl...)
