新品業務線上化規則化的推進過程中，需要新增首發素材稽核 CMS 並內嵌於營銷中心，提供業務運營更加便捷的打分、評審的體驗。在技術選型的過程中，新品團隊瞭解到水滴低程式碼平臺具備視覺化搭建 CMS 的能力，內建了豐富能力，能夠高效、快速地搭建 CMS，例如表單表格、許可權管控、微前端等。與業務訴求的產品形態契合度高、設計風格一致並且預設支援微前端，在運維部署上幾乎可以做到零成本，非常方便就能將產物嵌在營銷中心內。在技術調研並對比全部開發所需要的40+人日後，團隊選擇了更高效的水滴低程式碼作為 CMS 的實現方式，並在 6 人日內完成了整個共建、搭建流程。本文將營銷中心-新品首發素材稽核 CMS （下文簡稱新品CMS） 的搭建梳理作為最佳實踐，從 0 開始介紹如何使用水滴低程式碼平臺。

01

水滴—CMS快速解決方案

水滴具有面向程式設計、低程式碼兩個方向的優勢，兩者相輔相成，向開發者提供了涵蓋中後臺管理系統各角度的解決方案，主要亮點功能包括：

水滴功能亮點

下面將帶領大家以開發者的視角，以營銷中心新品 CMS 的搭建，作為最佳實踐，一步步從需求評審，到元件開發，再到頁面搭建，最終將 CMS 釋出上線。

新品 CMS 最終效果

02

新品CMS需求分析

理解，首先 MCube 會依據模板快取狀態判斷是否需要網路獲取最新模板，當獲取到模板後進行模板載入，載入階段會將產物轉換為檢視樹的結構，轉換完成後將透過表示式引擎解析表示式並取得正確的值，透過事件解析引擎解析使用者自定義事件並完成事件的繫結，完成解析賦值以及事件繫結後進行檢視的渲染，最終將目標頁面展示到螢幕

在梳理需求後，對於營銷中心新品 CMS 應用，分析出以下特點：

業務複雜：各個模組間的關聯性強、資料複雜程度較高

互動場景多：頁面間有較多的跳轉、資料傳遞的需求，模組之間有較多的互動需求

高 UI 還原度：需要符合營銷中心設計語言，保持一致設計風格

微前端組合：新品 CMS 並非獨立使用，而是嵌入在營銷中心內作為子應用使用

開發週期短：3 個頁面（ 6 個表單、4 個表格），從開發到提測，僅有 6 天的時間

除了特點分析，作者還梳理頁面及元件，由於業務和互動的定製場景，仍有 4 個業務元件需要定製開發，好在水滴具備共建能力，開發者可定製業務元件集並匯入系統。

需求梳理

03

元件共建開發

理解，首先 MCube 會依據模板快取狀態判斷是否需要網路獲取最新模板，當獲取到模板後進行模板載入，載入階段會將產物轉換為檢視樹的結構，轉換完成後將透過表示式引擎解析表示式並取得正確的值，透過事件解析引擎解析使用者自定義事件並完成事件的繫結，完成解析賦值以及事件繫結後進行檢視的渲染，最終將目標頁面展示到螢幕。

需求梳理後，接下來就是定製業務元件的流程。開發者可以在下載自定義元件模版庫後，進行相關定製開發。

模板內包含了元件開發的程式碼模板、常用依賴、除錯工具以及命令，開發完成以後可透過命令釋出至 jnpm 。這樣，就可以在水滴工作臺的外掛管理安裝對應的元件集，安裝完成以後即可在搭建頁使用了。

定製元件開發流程

1、本地開發時可一邊 coding ，一邊進行表單、表格元件介面除錯。

2、開發完成的定製元件集，成功釋出至 jnpm 倉庫以後，即可在水滴工作臺進行安裝使用。

3、安裝後的元件即可在搭建頁面中進行拖拽使用。

至此，頁面中需要的元件就全部開發完成，接下來將進入頁面搭建環節吧~

04頁面視覺化搭建

頁面搭建環節就十分的簡單了，水滴提供了表單表格設計器，只需要拖拖拽拽，就能將元件的佈局和樣式調整為 UI 設計稿中的樣子。

為了減少使用者在調整佈局和修改樣式上的操作次數，水滴團隊聯合基礎業務體驗部 UI 設計團隊制定了中後臺視覺標準，並落地到低程式碼平臺中，使得一次拖拽即可達到理想中的樣式。

水滴表單設計器

除了介面搭建，水滴也支援表單聯動、非同步拉取資料等複雜邏輯方面配置，開發者可以靈活切換到 Schema 介面進行各種邏輯的配置編寫。表單校驗方面則內建了url 、 https 、圖片大小尺寸、 陣列上下限等幾十種常用校驗，不滿足時既可以填寫自定義正規表示式，也可以透過 Schema 配置其他複雜校驗。

水滴表單設計器：JSON編輯能力

05前端事件編排

除了介面佈局外，還需要處理業務邏輯和互動跳轉，這裡可以透過水滴工作臺的事件編排功能，編寫 JS 動作並繫結在模組暴露的各個事件上。

在新品的提交表單中，雖然表單元件本身已經提供了基礎校驗能力，但是仍需要在表單提交前進行一些個性化的校驗邏輯，這裡便可透過編寫 JS 動作實現了。

此外還需要對錶單收集到的資料進行一些結構上的轉換，以滿足後臺介面文件的定義，可以在事件配置中的「表單提交前」的事件中，繫結相應的 JS 動作來處理資料轉換邏輯。

事件繫結與動作編寫

06介面與資料來源

介面搭建和事件邏輯編排都完成以後，便可以和後臺的介面進行聯調，將介面和資料來源進行打通。與常見的低程式碼平臺不同， DripWorks 不僅提供前端維度的搭建，還可以透過 FaaS 串聯資料來源。

介面開發者透過 FaaS 可以免除運維部署細節困擾，並透過預設好的模板，簡單配置就生成想要的函式並連線例如 DUCC 等資料來源。非常快速就能建立包含 NodeJS 、JAVA 等在內的各種增刪改查介面。

而在新品 CMS 的場景中，已經有對應的後臺服務，因此在簡單修改介面出入參後，直接繫結相應的介面 URL 即可。這樣，搭建的模組就和後臺服務提供的介面繫結成功啦~

繫結介面服務

07許可權管控

當頁面的開發、介面聯調工作完成以後，便要為 CMS 應用進行許可權管控定製。

在許可權管控方面，水滴提供完善的角色許可權管控能力，可以設定不同的角色併為其分配相應選單、頁面及功能許可權。

除了為使用者提供了頁面級檢視許可權控制，此外也提供了後端可呼叫的 API 服務，可呼叫服務進行更精細化的許可權管控。

角色與許可權管控 角色與許可權管控

08免運維雲構建部署與版本管理

完成搭建後，就可以點選構建釋出進行上線操作了。水滴會自動生成原始碼，並進行雲構建，最終把構建產物推送到京東前端釋出平臺 Pubfree 進行部署。這樣的優勢便是構建完成的產物會固化下來，不再受到平臺變更的影響，同時也可以拿到原始碼進行二次開發或者私有化部署，對 CMS 這類低變更頻率但業務複雜度高的型別穩定性、靈活性更好。

同時水滴也提供了測試、預發以及生產 3 種環境，開發者可根據情況選擇不同的歷史版本，在 3 種環境下進行秒級切換。

版本管理

點選發布後的連結地址，即可跳轉到線上應用，這樣就拿到了最終產出的 CMS ，並且水滴構建的產物預設符合 Micro-App 微前端子應用規範，可直接與營銷中心等微前端框架結合，這樣整個搭建、開發和部署的流程就已經結束了。

09總結

透過新品 CMS 應用的實踐過程可以看到，水滴不僅支援拖拽視覺化搭建 CMS 系統，同時還具備靈活且深度的元件共建、邏輯擴充套件能力，可以滿足不同 CMS 的業務訴求。內建的許可權、元件、選單路由、構建部署也方便並減少了重複開發，對效能有明顯的提升幫助。但是依然有不少有待改進的地方，比如各種功能模組內容的豐富、學習及上手門檻等等，水滴團隊也會本著精益求精的精神，以使用者的需求為導向，持續加強平臺的易用性、擴充套件性。

同時在開源建設上，水滴也把底層的優秀功能進行了開源並持續迭代，包括表單、表格等，歡迎大家體驗並提出寶貴建議~！

相關資源

• 水滴表單開源能力：
• https://github.com/JDFED/drip-form
• 水滴表格開源能力：
• https://github.com/JDFED/drip-tabl

作者：黃浩