前言

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

總結

以上是生活随笔為你收集整理的asp.net 报表页面模板_CP：基于JSON配置和vue-cli插件机制的模板复用方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。