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/cpgithub.com
对于模块、区块、模板等部分,社区也有很多尝试,如阿里的ICE,通过区块市场、模板市场来实现区块和模板的共享。
一、背景
做了快一年的数据中台前端开发后,我发现了以下问题:
(1)、重复开发太多:增删改查、权限管理、数据报表、信息监控、信息审核这些场景作为中台开发的常见需求,在无数个平台中被一遍又一遍的实现。
比如在一个平台中,有多个增删改查的页面需求,他们仅仅是内部数据和表单编辑项不一样。在页面结构上都是由列表、分页、弹框表单等元素组成。而且大多都是这下图这样的结构:
![](/assets/blank.gif)
(2)、代码维护问题VS项目复杂度的上升和人员流动性:
即使我们尝试用标准的文档来管理API,对代码进行组件化,模块化分层处理,但仍避免不了中台开发后期,庞大而冗长的表单代码,各种模块中掺杂的特殊处理带来的项目理解和代码维护问题;
二、中台UI拆解
页面<-模板<-区块<-模块<-组件
典型的中台产品,都可以拆解为如下形式:Layout 和 Page
![](/assets/blank.gif)
按照原子设计理论,对一个典型的增删改查页面进行拆解,可以得到下图:
![](/assets/blank.gif)
通过UI拆解,我们发现:对于一个增删改查页面,不论是区块,还是模板,其相同的部分是具有固定的页面结构、交互形式,而变化的部分,通常都是数据和具体的表单控件形式;
![](/assets/blank.gif)
如果我们可以将固定的部分通过编码来实现形成模板,并把变化的部分抽离出来,通过JSON配置来声明。
这样就可以一定程度的减少重复工作及代码维护性问题,因为:
(1)、一个项目,甚至多个项目中,只要是功能相似,结构相同的页面,都可以复用一套模板代码,或者基于一套模板代码来扩展,可以提高代码复用率,进而提高开发效率;
(2)、模板代码量不涉及变化的部分,诸如表单控件、表格数据等都被抽离出来通过JSON表单,后续发生变更,仅需更新相关配置即可;
那么模板要如何封装,才能保持其灵活性和可扩展性?JSON配置如何覆盖那么多的可变化性呢?
我们首先来看如何实现JSON配置的能力。
三、JSON可配置
CP通过实现基于JSON配置的基础工具来完成组件、模块、区块、模板的JSON可配置。
如下展示了通过表单工具,来实现输入框、登录表单、增删改查页面,从而使JSON配置的能力可以覆盖到UI分层的各个部分。
1、通过JSON配置一个Input组件
![](/assets/blank.gif)
<
2、通过JSON配置一个登录表单
![](/assets/blank.gif)
<
3、通过JSON配置一个增删改查功能页
![](/assets/blank.gif)
具体实现的代码可以查看:基于FormGenerator通过JSON配置实现组件、区块和模板
四、CP分层设计
当我们可以通过JSON配置加少量代码实现区块和模板层面的封装,我们可以按照如下结构,对页面进行分层拆解。
![](/assets/blank.gif)
1、CP中的模块
模块是用来解决特定领域的问题的工具,诸如表单、图表等,CP目前提供了FormGenerator,DataVis两个工具来解决中台开发中的表单和图表渲染;
如上图的模块部分,都是表单,基于FormGenerator可以很容易实现。
表单工具文档:
FormGenerator Docjson-drived-configurable-platform.github.io
2、CP中的区块
区块是基于组件或者模块拼接出来的一个具有局部布局属性和功能的整体。
基于FormGenerator实现的可操作表格:
表单工具example-可操作性表格
https://json-drived-configurable-platform.github.io/form-generator-iview/#/examples/CURD-example/simplejson-drived-configurable-platform.github.io
3、CP中的模板
上图是一个典型的增删改查的常用场景。如果一个页面具有符合某些通用场景,我们可以将其定义为一个模板。如上的增删改查页面就可以定义为一个模板,该模板包含三部分:查询表单、可操作的表格、弹框编辑表单。
模板包含的内容:
(1)、包含自定义的内容,比如页面标题,和固定数量的区块或者模块,比如查询表单、可操作的表格、弹框编辑表单;
(2)、增删改查的数据的获取、新增、更新和删除,我们将其命名为service,所以模板是可以包含service的;
目前CP沉淀的模板:
![](/assets/blank.gif)
一些模板的效果图:
数据报表模板
![](/assets/blank.gif)
权限管理模板
![](/assets/blank.gif)
五、插件机制
模板沉淀之后,如果被其他人使用呢?这里要解决两个问题:
(1)、模板的开发;
(2)、模板的引入及安转机制;
我们使用了vue-cli的插件机制,可以很方便的将模板代码安装到项目中。并且是适用方仍然可以对模板的功能进行扩展。
![](/assets/blank.gif)
脚手架插件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/cpgithub.com
基于iView UI的JSON配置表单工具
https://github.com/JSON-Drived-Configurable-Platform/form-generator-iviewgithub.com
基于Echarts和iView UI的报表配置工具
https://github.com/JSON-Drived-Configurable-Platform/data-vis-iviewgithub.com
asp.net 报表页面模板_CP:基于JSON配置和vue-cli插件机制的模板复用方案相关推荐
- 【vue】基于vue2.x的vue项目最最最基础模板
前言 好久不见啊大家,今天想写这篇博客的时候才发现博客已经断更大半年了(手动滑稽) 由于去年十二月份被公司再次发配到上海出差,而且这次主要开发的是针对IE浏览器的一个插件(c++ 和 js 的交互) ...
- asp.net 报表页面模板_Stimulsoft ASP.NET MVC报表教程:在设计器中保存报表模板
Stimulsoft Reports.Net最新版下载:https://www.evget.com/product/1071/download 本示例说明如何加载报表模板并在设计器中对其进行编辑. 首 ...
- asp.net 报表页面模板_20套大屏模板,教你3分钟制作出酷炫的可视化大屏
犹记得好莱坞大片<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻,而这种立体化大屏幕似乎已成了科幻电影大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.如今在会议展厅.园区管 ...
- javaweb k8s_K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程...
K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程 课程内容是关于Kubernetes微服务架构学习课程,基于K8S开展ASP.NET核心进行微 ...
- .net core 实现基于 JSON 的多语言
.net core 实现基于 JSON 的实现多语言 Intro 上次我们提到了,微软默认提供基于资源文件的多语言本地化,个人感觉使用起来不是太方便,没有 json 看起来直观,于是动手造了一个轮子, ...
- ASP.NET Core 实战:基于 Jwt Token 的权限控制全揭露
一.前言 在涉及到后端项目的开发中,如何实现对于用户权限的管控是需要我们首先考虑的,在实际开发过程中,我们可能会运用一些已经成熟的解决方案帮助我们实现这一功能,而在 Grapefruit.VuCore ...
- ASP.NET Core应用程序的参数配置及使用
应用程序的开发不仅仅是写代码这点事情.假设你正在开发一个能够支持多次部署的微服务,此时你就需要有一个合理的应用程序配置方案,以便在开发和生产环境中能够方便地选用不同的配置参数,并且能够在部署到容器服务 ...
- 获取json配置_ASP.NET Core集成Nacos配置中心之适配多格式配置
前言 默认情况下,用nacos-sdk-csharp集成ASP.NET Core的配置系统,是基于JSON格式的数据. 随着业务系统的多样化,可能用的配置格式也是各有千秋的.有的会用yaml/yml, ...
- ssm整合(基于xml配置方式)
本文是基于xml配置的方式来整合SpringMVC.Spring和Mybatis(基于注解的方式会再写一篇文章),步骤如下: (1)首先自然是依赖包的配置文件 pom.xml <project ...
最新文章
- Python3.5 Day1作业:实现用户密码登录,输错三次锁定。
- Python中调用Linux命令并获取返回值
- HTML5 使用 JS 生成二维码,带头像
- 机器学习Tensorflow基础知识、张量与变量
- 这些高校表现亮眼!最新全球学术排名,频出黑马
- Redmi K40 Pro渲染图曝光:后置相机模组成最大焦点
- vb net excel 剪贴板 粘贴_excel表格操作: 图形和图表编辑技巧汇总(一)
- 马云再谈 996:真正的 996 与被剥削无关
- java有没有友元函数_c++中友元函数理解与使用
- Shell脚本编程之(七)Shell脚本的追踪与debug
- 白板推导系列Pytorch-PCA降维
- 新款大屏卡罗拉linux系统,丰田卡罗拉大屏车载导航影音系统
- tpac100控制器设置教程_TP-link AC控制器统一管理AP设置指导
- c语言char a什么意思,C语言中char *a[ ]什么意思,他和char (*)a[ ]有什么什么区别?...
- Typora如何把图片上传到图床smms.app
- vue project vlog
- css中审核图标,一个简单实用的css loading图标
- 计算机考研数学书,计算机考研参考书(专业课、数学、英语)
- 计算机交换机配置实验心得,交换机系统配置实验心得5
- 怎样用计算机截图,大神教你如何在电脑上视频截图