[發(fā)明專利]基于動態(tài)數(shù)據(jù)的表單項渲染方法、系統(tǒng)、設(shè)備及存儲介質(zhì)

在審

• 申請?zhí)枺?/td>: 202110388436.2
• 申請日: 2021-04-12
• 公開（公告）號: CN113126986A
• 公開（公告）日: 2021-07-16
• 發(fā)明（設(shè)計）人: 肖偉超
• 申請（專利權(quán)）人: 北京明略昭輝科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/957;G06F16/958
• 代理公司: 青島清泰聯(lián)信知識產(chǎn)權(quán)代理有限公司 37256
• 代理人: 趙燕

本發(fā)明公開了一種基于動態(tài)數(shù)據(jù)的表單項渲染方法、系統(tǒng)、設(shè)備及存儲介質(zhì)。上述方法包括：確定表單項的動態(tài)數(shù)據(jù)結(jié)構(gòu)；通過前端頁面根據(jù)業(yè)務(wù)需求將需要的表單項類型結(jié)合動態(tài)數(shù)據(jù)結(jié)構(gòu)進(jìn)行渲染拼接，得到數(shù)據(jù)渲染模板；通過前端頁面將實際表單數(shù)據(jù)利用數(shù)據(jù)渲染模板進(jìn)行渲染得到對應(yīng)的動態(tài)表單項。本發(fā)明中所有的表單項渲染類型判斷邏輯都在前端處理，能夠提高開發(fā)接口的數(shù)據(jù)純粹性，可以很好的滿足動態(tài)數(shù)據(jù)的表單項渲染需求。

技術(shù)領(lǐng)域

本發(fā)明涉及計算機技術(shù)領(lǐng)域，尤其涉及一種基于動態(tài)數(shù)據(jù)的表單項渲染方法、系統(tǒng)、設(shè)備及存儲介質(zhì)。

背景技術(shù)

目前在Web領(lǐng)域，網(wǎng)頁的開發(fā)一般都是采用前后端分離模式，前端工程師負(fù)責(zé)頁面結(jié)構(gòu)及樣式的書寫，服務(wù)端負(fù)責(zé)提供數(shù)據(jù)，前端工程師通過Http請求，獲取服務(wù)端數(shù)據(jù)，將其格式化后插入到頁面結(jié)構(gòu)中渲染出數(shù)據(jù)形成正式的網(wǎng)頁。其中，Web代表網(wǎng)頁，Http請求指從客戶端到服務(wù)器端的請求消息。

在整個網(wǎng)頁的開發(fā)過程中，前端渲染頁面結(jié)構(gòu)大致可以分為兩種形式。一種是：數(shù)據(jù)結(jié)構(gòu)固定，頁面結(jié)構(gòu)固定，前端只需要將從服務(wù)端獲取的數(shù)據(jù)格式化以后直接插入到頁面結(jié)構(gòu)即可渲染出網(wǎng)頁；另一種是：前端頁面結(jié)構(gòu)不確定，網(wǎng)頁的結(jié)構(gòu)依賴于服務(wù)端的數(shù)據(jù)結(jié)構(gòu)和類型，這種形式相較于第一種固定網(wǎng)頁結(jié)構(gòu)插入數(shù)據(jù)的形式復(fù)雜了很多。

在網(wǎng)站開發(fā)過程中，針對于動態(tài)數(shù)據(jù)的渲染展示，前端開發(fā)人員如果按照一種數(shù)據(jù)結(jié)構(gòu)開發(fā)一套前端展示結(jié)構(gòu)，這樣不僅很大的增加了工作量，也不一定能夠全部滿足動態(tài)數(shù)據(jù)的渲染展示。例如：某網(wǎng)站有50000個客戶，每一個客戶的基本信息狀況都不會完全相同，假如有一個客戶的基本信息中包括：電話，公司名稱，郵編，地址，而另一個客戶的基本信息中包括：公司名稱，客戶別名，行業(yè)類型，郵編等，這兩個客戶基本信息就有很多不同，如何在展示和編輯的時候完全滿足每一個客戶的基本信息數(shù)據(jù)結(jié)構(gòu)，這就需要一種統(tǒng)一的基于動態(tài)數(shù)據(jù)的表單項渲染展示方法。

在現(xiàn)有技術(shù)中，通常是由服務(wù)端直接返回處理好的Html字符串結(jié)構(gòu)，即在服務(wù)端根據(jù)數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)類型確定需要展示的表單項，組合成Html字符串，通過Http請求返回給前端，前端開發(fā)人員不需要處理數(shù)據(jù)邏輯，也不需要判斷數(shù)據(jù)類型，直接將Http返回的Html字符串插入到頁面結(jié)構(gòu)中渲染出來即可。這種方式的缺點是服務(wù)端需要處理大量數(shù)據(jù)類型判斷邏輯，拼接Html標(biāo)簽結(jié)構(gòu)，而針對于Html標(biāo)簽拼接最好是前端開發(fā)人員來做，這些本不屬于服務(wù)端的范疇，也違背了前后端開發(fā)分離的原則。

發(fā)明內(nèi)容

本發(fā)明針對上述的在服務(wù)端使用動態(tài)數(shù)據(jù)拼接Html結(jié)構(gòu)返回至前端造成服務(wù)端需處理的工作量過大且無法實現(xiàn)前后端開發(fā)分離的技術(shù)問題，提出一種基于動態(tài)數(shù)據(jù)的表單項渲染方法、系統(tǒng)、設(shè)備及存儲介質(zhì)。

第一方面，本申請實施例提供了一種基于動態(tài)數(shù)據(jù)的表單項渲染方法，包括：

數(shù)據(jù)結(jié)構(gòu)確定步驟：確定表單項的動態(tài)數(shù)據(jù)結(jié)構(gòu)；

模板獲得步驟：通過前端頁面根據(jù)業(yè)務(wù)需求將需要的表單項類型結(jié)合所述動態(tài)數(shù)據(jù)結(jié)構(gòu)進(jìn)行渲染拼接，得到數(shù)據(jù)渲染模板；

渲染步驟：通過所述前端頁面將實際表單數(shù)據(jù)利用所述數(shù)據(jù)渲染模板進(jìn)行渲染得到對應(yīng)的動態(tài)表單項。

上述基于動態(tài)數(shù)據(jù)的表單項渲染方法，其中，所述數(shù)據(jù)結(jié)構(gòu)確定步驟中，所述動態(tài)數(shù)據(jù)結(jié)構(gòu)由所述前端頁面與服務(wù)器端根據(jù)業(yè)務(wù)需求共同確定。

上述基于動態(tài)數(shù)據(jù)的表單項渲染方法，其中，所述動態(tài)數(shù)據(jù)結(jié)構(gòu)中包含類型或限制條件的字段包括但不限于：en、cn、multi、dataType、required、value、readOnly。

上述基于動態(tài)數(shù)據(jù)的表單項渲染方法，其中，所述渲染步驟包括：

數(shù)據(jù)請求步驟：接收到所述前端頁面發(fā)送的數(shù)據(jù)請求后，通過所述服務(wù)器端將需要展示的所述實際表單數(shù)據(jù)按照所述動態(tài)數(shù)據(jù)結(jié)構(gòu)的格式進(jìn)行封裝并返回至所述前端頁面；