[發(fā)明專利]一種基于JSON自描述結(jié)構(gòu)的網(wǎng)頁界面生成方法及裝置

有效

• 申請?zhí)枺?/td>: 201810389933.2
• 申請日: 2018-04-27
• 公開（公告）號: CN108664245B
• 公開（公告）日: 2022-08-05
• 發(fā)明（設(shè)計）人: 陳碧勇;方敏;呂曄
• 申請（專利權(quán)）人: 廈門南訊股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 廣州市紅荔專利代理有限公司 44214
• 代理人: 吳偉文

本發(fā)明涉及計算機(jī)技術(shù)領(lǐng)域，公開了一種基于JSON自描述結(jié)構(gòu)的網(wǎng)頁界面生成方法，包括：定義模板頁類型；進(jìn)行模板頁的標(biāo)準(zhǔn)頁面描述結(jié)構(gòu)的定義，生成核心內(nèi)容塊，形成渲染模板；生成設(shè)計界面結(jié)構(gòu)描述的JSON結(jié)構(gòu)；渲染引擎載入該設(shè)計界面的JSON結(jié)構(gòu)，載入對應(yīng)的渲染模板；渲染引擎遞歸調(diào)用渲染模板，將設(shè)計界面的JSON結(jié)構(gòu)中的組件元素生成為界面控件，并將交互事件腳本寫入控件API函數(shù)；渲染引擎根據(jù)頁面id將該設(shè)計界面緩存在LRU中，并輸出頁面HTML到瀏覽器；瀏覽器端執(zhí)行js組件框架，渲染并最終呈現(xiàn)該設(shè)計界面。本發(fā)明讓數(shù)據(jù)綁定不再僅限于開發(fā)階段，在實施、試運行階段也可根據(jù)需求進(jìn)行調(diào)整，大幅降低了頁面開發(fā)中的錯誤率和部署周期，節(jié)約了研發(fā)工時。

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

本發(fā)明涉及計算機(jī)技術(shù)領(lǐng)域，特別是一種基于JSON自描述結(jié)構(gòu)的網(wǎng)頁界面生成方法及裝置。

背景技術(shù)

隨著B/S技術(shù)的流行，軟件開發(fā)人員經(jīng)常遇到不定期地更新界面JS框架，修改界面風(fēng)格等情況。由于界面布局、風(fēng)格元素和交互動作、數(shù)據(jù)邏輯分屬于頁面美工和前端開發(fā)。同時，由于目前流行的UI框架越來越復(fù)雜、越來越龐大，組件布局和基本事件交互費事費力，每次升級都需要大量的人員培訓(xùn)和熟悉周期。如何更好地隔離業(yè)務(wù)開發(fā)與UI呈現(xiàn)，重用重組現(xiàn)有組件、讓業(yè)務(wù)開發(fā)僅僅聚焦于業(yè)務(wù)交互過程，提高研發(fā)效率是亟待解決的緊迫問題。

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

為了解決上述現(xiàn)有技術(shù)的不足，本發(fā)明公開了一種基于JSON自描述結(jié)構(gòu)的網(wǎng)頁界面生成方法及裝置，讓數(shù)據(jù)綁定不再僅限于開發(fā)階段，在產(chǎn)品實施、試運行部署中運維人員都可以隨時根據(jù)客戶需求調(diào)整展示需求，大幅降低了頁面開發(fā)中的錯誤率和部署周期，節(jié)約了研發(fā)工時。

為實現(xiàn)上述技術(shù)目的，達(dá)到上述技術(shù)效果，本發(fā)明公開了一種基于JSON自描述結(jié)構(gòu)的網(wǎng)頁界面生成方法，所述方法包括如下步驟：

S1：提煉業(yè)務(wù)系統(tǒng)中的固化的頁面結(jié)構(gòu)，定義模板頁類型；

S2: 根據(jù)S1中提煉出的模板頁類型，進(jìn)行模板頁的標(biāo)準(zhǔn)頁面描述結(jié)構(gòu)的定義，生成核心內(nèi)容塊，形成渲染模板；

S3：獲取并解析用戶需求，進(jìn)行界面設(shè)計，生成設(shè)計界面結(jié)構(gòu)描述的JSON結(jié)構(gòu)，存儲在數(shù)據(jù)庫中，并在數(shù)據(jù)庫生成該設(shè)計界面的頁面id和該設(shè)計界面所對應(yīng)的模板頁類型；

S4：當(dāng)該設(shè)計界面發(fā)起初次界面請求時，渲染引擎從步驟S3所述的數(shù)據(jù)庫中載入該設(shè)計界面的JSON結(jié)構(gòu)，并根據(jù)模板頁類型進(jìn)行資源適配，載入步驟S2中對應(yīng)的渲染模板；

S5：渲染引擎遞歸調(diào)用逐級引用的渲染模板，將設(shè)計界面的JSON結(jié)構(gòu)中的組件元素生成為界面控件，并將交互事件腳本寫入該設(shè)計界面控件API函數(shù)；

S6：渲染引擎根據(jù)頁面id將該設(shè)計界面緩存在LRU中，并輸出頁面HTML到瀏覽器；

S7：瀏覽器端執(zhí)行js組件框架，渲染由步驟S6輸出的界面結(jié)構(gòu)，最終呈現(xiàn)該設(shè)計界面。

進(jìn)一步地，步驟S1中所述的模板頁類型包括列表式界面、單純表單式界面和報表式圖表界面。

進(jìn)一步地，步驟S2中所述的標(biāo)準(zhǔn)頁面描述結(jié)構(gòu)用于定義模板頁的不同組件元素的關(guān)聯(lián)關(guān)系和組件屬性。

進(jìn)一步地，步驟S3中所述的JSON結(jié)構(gòu)用于定義設(shè)計界面的不同組件元素的關(guān)聯(lián)關(guān)系和組件屬性。

進(jìn)一步地，所述的組件元素屬性配置為基本屬性、事件交互屬性和擴(kuò)展屬性。

進(jìn)一步地，所述的基本屬性包括組件的類型和組件的名稱；所述的事件交互屬性包括組件大小、點擊事件、校驗正則表達(dá)式、數(shù)據(jù)源、選中方式；所述的擴(kuò)展屬性包括與用戶需求、js界面框架相關(guān)的額外屬性,擴(kuò)展屬性可以根據(jù)用戶需求不同和終端渲染組件庫的不同進(jìn)行額外配置。

進(jìn)一步地，步驟S6中所述的LRU可以為渲染引擎提供緩存，合并多次界面請求為單次渲染。