asp.net 报表页面模板_CP：基于JSON配置和vue-cli插件机制的模板复用方案

前言

Atomic Design是前端开发圈中众所周知的设计理论，尤其是在中台类型的UI开发中。基于vue.js的element-ui、iview-ui和基于react.js的Ant Design都是该设计理论的最佳实践。

但是这些项目，更多的是关注于组件，在我看来，就是原子这个层面。那么对于区块或者模板呢？

我们能不能将中台开发中的典型场景进行抽离和封装，来实现模板、区块层面的复用呢？

针对这个问题，我们整合出一套基于JSON配置和vue-cli插件机制的模板复用方案，尝试解决上面这两个层面的问题，本文将向大家简述其设计和实现，欢迎大家关注和提问。

除了继续阅读本文，你还可以通过快速开始来通过实际操作了解这个方案。

本文所讲的方案及代码工具，全部开源在GitHub上，欢迎大家关注：

https://github.com/JSON-Drived-Configurable-Platform/cp​github.com

对于模块、区块、模板等部分，社区也有很多尝试，如阿里的ICE，通过区块市场、模板市场来实现区块和模板的共享。

一、背景

做了快一年的数据中台前端开发后，我发现了以下问题：

（1）、重复开发太多：增删改查、权限管理、数据报表、信息监控、信息审核这些场景作为中台开发的常见需求，在无数个平台中被一遍又一遍的实现。

比如在一个平台中，有多个增删改查的页面需求，他们仅仅是内部数据和表单编辑项不一样。在页面结构上都是由列表、分页、弹框表单等元素组成。而且大多都是这下图这样的结构：

（2）、代码维护问题VS项目复杂度的上升和人员流动性：

即使我们尝试用标准的文档来管理API，对代码进行组件化，模块化分层处理，但仍避免不了中台开发后期，庞大而冗长的表单代码，各种模块中掺杂的特殊处理带来的项目理解和代码维护问题；

二、中台UI拆解

页面<-模板<-区块<-模块<-组件

典型的中台产品，都可以拆解为如下形式：Layout 和 Page

按照原子设计理论，对一个典型的增删改查页面进行拆解，可以得到下图：

通过UI拆解，我们发现：对于一个增删改查页面，不论是区块，还是模板，其相同的部分是具有固定的页面结构、交互形式，而变化的部分，通常都是数据和具体的表单控件形式；

如果我们可以将固定的部分通过编码来实现形成模板，并把变化的部分抽离出来，通过JSON配置来声明。

这样就可以一定程度的减少重复工作及代码维护性问题，因为：

（1）、一个项目，甚至多个项目中，只要是功能相似，结构相同的页面，都可以复用一套模板代码，或者基于一套模板代码来扩展，可以提高代码复用率，进而提高开发效率；

（2）、模板代码量不涉及变化的部分，诸如表单控件、表格数据等都被抽离出来通过JSON表单，后续发生变更，仅需更新相关配置即可；

那么模板要如何封装，才能保持其灵活性和可扩展性？JSON配置如何覆盖那么多的可变化性呢？

我们首先来看如何实现JSON配置的能力。

三、JSON可配置

CP通过实现基于JSON配置的基础工具来完成组件、模块、区块、模板的JSON可配置。

如下展示了通过表单工具，来实现输入框、登录表单、增删改查页面，从而使JSON配置的能力可以覆盖到UI分层的各个部分。

1、通过JSON配置一个Input组件

<

2、通过JSON配置一个登录表单

<

3、通过JSON配置一个增删改查功能页

具体实现的代码可以查看：基于FormGenerator通过JSON配置实现组件、区块和模板

四、CP分层设计

当我们可以通过JSON配置加少量代码实现区块和模板层面的封装，我们可以按照如下结构，对页面进行分层拆解。

1、CP中的模块

模块是用来解决特定领域的问题的工具，诸如表单、图表等，CP目前提供了FormGenerator，DataVis两个工具来解决中台开发中的表单和图表渲染；

如上图的模块部分，都是表单，基于FormGenerator可以很容易实现。

表单工具文档：

FormGenerator Doc​json-drived-configurable-platform.github.io

2、CP中的区块

区块是基于组件或者模块拼接出来的一个具有局部布局属性和功能的整体。

基于FormGenerator实现的可操作表格：

表单工具example-可操作性表格

https://json-drived-configurable-platform.github.io/form-generator-iview/#/examples/CURD-example/simple​json-drived-configurable-platform.github.io

3、CP中的模板

上图是一个典型的增删改查的常用场景。如果一个页面具有符合某些通用场景，我们可以将其定义为一个模板。如上的增删改查页面就可以定义为一个模板，该模板包含三部分：查询表单、可操作的表格、弹框编辑表单。

模板包含的内容：

（1）、包含自定义的内容，比如页面标题，和固定数量的区块或者模块，比如查询表单、可操作的表格、弹框编辑表单；

（2）、增删改查的数据的获取、新增、更新和删除，我们将其命名为service，所以模板是可以包含service的；

目前CP沉淀的模板：

一些模板的效果图:

数据报表模板

数据报表模板

权限管理模板

权限管理模板

五、插件机制

模板沉淀之后，如果被其他人使用呢？这里要解决两个问题：

（1）、模板的开发；

（2）、模板的引入及安转机制；

我们使用了vue-cli的插件机制，可以很方便的将模板代码安装到项目中。并且是适用方仍然可以对模板的功能进行扩展。

脚手架插件vue-cli-plugin-cp: vue-cli-plugin-cp负责处理动态加载其它的Layout模板和页面模板，动态加载这些模板的路由（Router），注册这些模板的服务（Service）。 除此之外还包含了默认的Layout模板代码、一个简单的Home页面模板（用来展示CP的最新动态，模板、模块列表等信息）。

模板插件的结构和脚手架插件一样，仅仅之模板插件仅包含改模板所需要的模板代码和其对应的JSON配置。

了解详细信息可查看：CP文档-插件机制

六、未来展望

cp方案目前仅在团队内部产品落地了十多个项目，经过了一年多的迭代和七八个程序员的贡献。我们一直想把这个方案推广到社区，希望能帮助到需要的人。未来的计划：

（1）、Nuxt.js的集成：目前方案主要基于vue-cli来实现开发环境，插件安装等，最近在了解Nuxt.js，觉得特性可以改善CP方案中代码组织和管理的问题；

（2）、扩展到Element和ant-design-vue：当初选择IView是考虑到团队的诸多问题，目前来看横向扩展支持vue社区主流的PC端组件非常有必要；

（3）、区块市场及模板市场的建设：根据后续大家对该方案的认可度，建设在线区块及模板市场；

本文所讲的方案及代码工具，全部开源在GitHub上，欢迎大家关注：

CP方案

https://github.com/JSON-Drived-Configurable-Platform/cp​github.com

基于iView UI的JSON配置表单工具

https://github.com/JSON-Drived-Configurable-Platform/form-generator-iview​github.com

基于Echarts和iView UI的报表配置工具

https://github.com/JSON-Drived-Configurable-Platform/data-vis-iview​github.com