asp.net 报表页面模板_CP：基于JSON配置和vue-cli插件机制的模板复用方案
前言
Atomic Design是前端開發(fā)圈中眾所周知的設(shè)計理論，尤其是在中臺類型的UI開發(fā)中。基于vue.js的element-ui、iview-ui和基于react.js的Ant Design都是該設(shè)計理論的最佳實踐。
但是這些項目，更多的是關(guān)注于組件，在我看來，就是原子這個層面。那么對于區(qū)塊或者模板呢？
我們能不能將中臺開發(fā)中的典型場景進行抽離和封裝，來實現(xiàn)模板、區(qū)塊層面的復用呢？
針對這個問題，我們整合出一套基于JSON配置和vue-cli插件機制的模板復用方案，嘗試解決上面這兩個層面的問題，本文將向大家簡述其設(shè)計和實現(xiàn)，歡迎大家關(guān)注和提問。
除了繼續(xù)閱讀本文，你還可以通過快速開始來通過實際操作了解這個方案。
本文所講的方案及代碼工具，全部開源在GitHub上，歡迎大家關(guān)注：
https://github.com/JSON-Drived-Configurable-Platform/cp?github.com對于模塊、區(qū)塊、模板等部分，社區(qū)也有很多嘗試，如阿里的ICE，通過區(qū)塊市場、模板市場來實現(xiàn)區(qū)塊和模板的共享。一、背景
做了快一年的數(shù)據(jù)中臺前端開發(fā)后，我發(fā)現(xiàn)了以下問題：
（1）、重復開發(fā)太多：增刪改查、權(quán)限管理、數(shù)據(jù)報表、信息監(jiān)控、信息審核這些場景作為中臺開發(fā)的常見需求，在無數(shù)個平臺中被一遍又一遍的實現(xiàn)。
比如在一個平臺中，有多個增刪改查的頁面需求，他們僅僅是內(nèi)部數(shù)據(jù)和表單編輯項不一樣。在頁面結(jié)構(gòu)上都是由列表、分頁、彈框表單等元素組成。而且大多都是這下圖這樣的結(jié)構(gòu)：
（2）、代碼維護問題VS項目復雜度的上升和人員流動性：
即使我們嘗試用標準的文檔來管理API，對代碼進行組件化，模塊化分層處理，但仍避免不了中臺開發(fā)后期，龐大而冗長的表單代碼，各種模塊中摻雜的特殊處理帶來的項目理解和代碼維護問題；
二、中臺UI拆解
頁面<-模板<-區(qū)塊<-模塊<-組件
典型的中臺產(chǎn)品，都可以拆解為如下形式：Layout 和 Page
按照原子設(shè)計理論，對一個典型的增刪改查頁面進行拆解，可以得到下圖：
通過UI拆解，我們發(fā)現(xiàn)：對于一個增刪改查頁面，不論是區(qū)塊，還是模板，其相同的部分是具有固定的頁面結(jié)構(gòu)、交互形式，而變化的部分，通常都是數(shù)據(jù)和具體的表單控件形式；
如果我們可以將固定的部分通過編碼來實現(xiàn)形成模板，并把變化的部分抽離出來，通過JSON配置來聲明。
這樣就可以一定程度的減少重復工作及代碼維護性問題，因為：
（1）、一個項目，甚至多個項目中，只要是功能相似，結(jié)構(gòu)相同的頁面，都可以復用一套模板代碼，或者基于一套模板代碼來擴展，可以提高代碼復用率，進而提高開發(fā)效率；
（2）、模板代碼量不涉及變化的部分，諸如表單控件、表格數(shù)據(jù)等都被抽離出來通過JSON表單，后續(xù)發(fā)生變更，僅需更新相關(guān)配置即可；
那么模板要如何封裝，才能保持其靈活性和可擴展性？JSON配置如何覆蓋那么多的可變化性呢？
我們首先來看如何實現(xiàn)JSON配置的能力。
三、JSON可配置
CP通過實現(xiàn)基于JSON配置的基礎(chǔ)工具來完成組件、模塊、區(qū)塊、模板的JSON可配置。
如下展示了通過表單工具，來實現(xiàn)輸入框、登錄表單、增刪改查頁面，從而使JSON配置的能力可以覆蓋到UI分層的各個部分。
1、通過JSON配置一個Input組件
<2、通過JSON配置一個登錄表單
<3、通過JSON配置一個增刪改查功能頁
具體實現(xiàn)的代碼可以查看：基于FormGenerator通過JSON配置實現(xiàn)組件、區(qū)塊和模板
四、CP分層設(shè)計
當我們可以通過JSON配置加少量代碼實現(xiàn)區(qū)塊和模板層面的封裝，我們可以按照如下結(jié)構(gòu)，對頁面進行分層拆解。
1、CP中的模塊
模塊是用來解決特定領(lǐng)域的問題的工具，諸如表單、圖表等，CP目前提供了FormGenerator，DataVis兩個工具來解決中臺開發(fā)中的表單和圖表渲染；
如上圖的模塊部分，都是表單，基于FormGenerator可以很容易實現(xiàn)。
表單工具文檔：
FormGenerator Doc?json-drived-configurable-platform.github.io2、CP中的區(qū)塊
區(qū)塊是基于組件或者模塊拼接出來的一個具有局部布局屬性和功能的整體。
基于FormGenerator實現(xiàn)的可操作表格：
表單工具example-可操作性表格
https://json-drived-configurable-platform.github.io/form-generator-iview/#/examples/CURD-example/simple?json-drived-configurable-platform.github.io3、CP中的模板
上圖是一個典型的增刪改查的常用場景。如果一個頁面具有符合某些通用場景，我們可以將其定義為一個模板。如上的增刪改查頁面就可以定義為一個模板，該模板包含三部分：查詢表單、可操作的表格、彈框編輯表單。
模板包含的內(nèi)容：
（1）、包含自定義的內(nèi)容，比如頁面標題，和固定數(shù)量的區(qū)塊或者模塊，比如查詢表單、可操作的表格、彈框編輯表單；
（2）、增刪改查的數(shù)據(jù)的獲取、新增、更新和刪除，我們將其命名為service，所以模板是可以包含service的；
目前CP沉淀的模板：
一些模板的效果圖:
數(shù)據(jù)報表模板
數(shù)據(jù)報表模板權(quán)限管理模板
權(quán)限管理模板五、插件機制
模板沉淀之后，如果被其他人使用呢？這里要解決兩個問題：
（1）、模板的開發(fā)；
（2）、模板的引入及安轉(zhuǎn)機制；
我們使用了vue-cli的插件機制，可以很方便的將模板代碼安裝到項目中。并且是適用方仍然可以對模板的功能進行擴展。
腳手架插件vue-cli-plugin-cp: vue-cli-plugin-cp負責處理動態(tài)加載其它的Layout模板和頁面模板，動態(tài)加載這些模板的路由（Router），注冊這些模板的服務(wù)（Service）。 除此之外還包含了默認的Layout模板代碼、一個簡單的Home頁面模板（用來展示CP的最新動態(tài)，模板、模塊列表等信息）。
模板插件的結(jié)構(gòu)和腳手架插件一樣，僅僅之模板插件僅包含改模板所需要的模板代碼和其對應(yīng)的JSON配置。
了解詳細信息可查看：CP文檔-插件機制
六、未來展望
cp方案目前僅在團隊內(nèi)部產(chǎn)品落地了十多個項目，經(jīng)過了一年多的迭代和七八個程序員的貢獻。我們一直想把這個方案推廣到社區(qū)，希望能幫助到需要的人。未來的計劃：
（1）、Nuxt.js的集成：目前方案主要基于vue-cli來實現(xiàn)開發(fā)環(huán)境，插件安裝等，最近在了解Nuxt.js，覺得特性可以改善CP方案中代碼組織和管理的問題；
（2）、擴展到Element和ant-design-vue：當初選擇IView是考慮到團隊的諸多問題，目前來看橫向擴展支持vue社區(qū)主流的PC端組件非常有必要；
（3）、區(qū)塊市場及模板市場的建設(shè)：根據(jù)后續(xù)大家對該方案的認可度，建設(shè)在線區(qū)塊及模板市場；
本文所講的方案及代碼工具，全部開源在GitHub上，歡迎大家關(guān)注：
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總結(jié)
以上是生活随笔為你收集整理的asp.net 报表页面模板_CP：基于JSON配置和vue-cli插件机制的模板复用方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layui时间日期控件使用
- 下一篇： ajax 请求二进制流 图片 文件 XM