[發(fā)明專利]前端組件化開發(fā)方法、裝置、計算機設(shè)備及存儲介質(zhì)

在審

• 申請?zhí)枺?/td>: 202010125131.8
• 申請日: 2020-02-27
• 公開（公告）號: CN111427552A
• 公開（公告）日: 2020-07-17
• 發(fā)明（設(shè)計）人: 謝春陽;周晶
• 申請（專利權(quán)）人: 深圳壹賬通智能科技有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30
• 代理公司: 深圳市精英專利事務(wù)所 44242
• 代理人: 鄧星文

本發(fā)明實施例公開了一種前端組件化開發(fā)方法、裝置、計算機設(shè)備及存儲介質(zhì)，其中該方法包括若接收到前端頁面的新建請求，解析新建請求以生成初始頁面；從本地資源數(shù)據(jù)庫調(diào)用預(yù)設(shè)的用于進行前端開發(fā)的JS包；獲取當(dāng)前的前端框架的類型，以確定JS包中與類型相關(guān)聯(lián)的API接口；若接收到通過初始頁面發(fā)送的前端組件調(diào)用請求，通過API接口獲取與前端組件調(diào)用請求相匹配的組件調(diào)用函數(shù)；若接收到與組件調(diào)用函數(shù)相匹配的參數(shù)設(shè)置請求，根據(jù)參數(shù)設(shè)置請求中的參數(shù)運行所述組件調(diào)用函數(shù)，以從JS包中調(diào)用具有相應(yīng)參數(shù)的前端組件，并將所調(diào)用的前端組件與初始頁面結(jié)合從而實現(xiàn)相應(yīng)的前端頁面的開發(fā)顯示。本發(fā)明適用范圍廣，能實現(xiàn)在不同前端框架下的前端開發(fā)。

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

本發(fā)明涉及前端技術(shù)領(lǐng)域，尤其涉及一種前端組件化開發(fā)方法、裝置、計算機設(shè)備及存儲介質(zhì)。

背景技術(shù)

后臺管理系統(tǒng)是內(nèi)容管理系統(tǒng)(ContentManageSystem，簡稱CMS)的一個子集，即網(wǎng)站管理系統(tǒng)。一個網(wǎng)站管理系統(tǒng)是把一個網(wǎng)站的內(nèi)容(文字，圖片，等等)與網(wǎng)站的組件分離開來，并將各個頁面連接到一起，從而控制頁面的顯示。通過后臺管理系統(tǒng)，可以方便地管理、發(fā)布、維護其前端網(wǎng)站的內(nèi)容。目前，前端網(wǎng)頁的開發(fā)已從后端模板開發(fā)，發(fā)展成前端組件化開發(fā)，然而，現(xiàn)有的后管系統(tǒng)的前端組件專業(yè)程度較高，無法滿足非前端人員的開發(fā)使用，同時，前端組件功能多而不專，尤其是各個前端組件對前端框架的依賴性較高，無法滿足高度定制化系統(tǒng)的需求以及提供更為獨立的服務(wù)。

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

本發(fā)明實施例提供一種前端組件化開發(fā)方法、裝置、計算機設(shè)備及存儲介質(zhì)，實現(xiàn)在不同前端框架下的前端開發(fā)，其不僅適用范圍廣，還能夠便于用戶開發(fā)使用，節(jié)約開發(fā)成本，滿足高定制化系統(tǒng)的需求，提高了用戶的使用體驗度。

第一方面，本發(fā)明實施例提供了一種前端組件化開發(fā)方法，該方法包括：

若接收到前端頁面的新建請求，解析所述新建請求以生成相應(yīng)的初始頁面；

從本地資源數(shù)據(jù)庫調(diào)用預(yù)先設(shè)置的用于進行前端開發(fā)的JS包，所述JS包括多個可供調(diào)用的前端組件，不同的前端組件用于實現(xiàn)不同的功能；

獲取當(dāng)前的前端框架的類型，以確定所述JS包中與所述類型相關(guān)聯(lián)的API接口；

若接收到通過初始頁面發(fā)送的前端組件調(diào)用請求，通過所述API接口獲取與所述前端組件調(diào)用請求相匹配的組件調(diào)用函數(shù)；

若接收到與所述組件調(diào)用函數(shù)相匹配的參數(shù)設(shè)置請求，根據(jù)所述參數(shù)設(shè)置請求中的參數(shù)運行所述組件調(diào)用函數(shù)，以從所述JS包中調(diào)用具有相應(yīng)參數(shù)的前端組件，并將所調(diào)用的前端組件與所述初始頁面結(jié)合從而實現(xiàn)相應(yīng)的前端頁面的開發(fā)顯示。

第二方面，本發(fā)明實施例還提供了一種前端組件化開發(fā)裝置，該裝置包括：

頁面生成單元，用于若接收到前端頁面的新建請求，解析所述新建請求以生成相應(yīng)的初始頁面；

JS包調(diào)用單元，用于從本地資源數(shù)據(jù)庫調(diào)用預(yù)先設(shè)置的用于進行前端開發(fā)的JS包，所述JS包括多個可供調(diào)用的前端組件，不同的前端組件用于實現(xiàn)不同的功能；

接口確定單元，用于獲取當(dāng)前的前端框架的類型，以確定所述JS包中與所述類型相關(guān)聯(lián)的API接口；

函數(shù)獲取單元，用于若接收到通過初始頁面發(fā)送的前端組件調(diào)用請求，通過所述API接口獲取與所述前端組件調(diào)用請求相匹配的組件調(diào)用函數(shù)；

處理單元，用于若接收到與所述組件調(diào)用函數(shù)相匹配的參數(shù)設(shè)置請求，根據(jù)所述參數(shù)設(shè)置請求中的參數(shù)運行所述組件調(diào)用函數(shù)，以從所述JS包中調(diào)用具有相應(yīng)參數(shù)的前端組件，并將所調(diào)用的前端組件與所述初始頁面結(jié)合從而實現(xiàn)相應(yīng)的前端頁面的開發(fā)顯示。

第三方面，本發(fā)明實施例還提供了一種計算機設(shè)備，其包括存儲器及處理器，所述存儲器上存儲有計算機程序，所述處理器執(zhí)行所述計算機程序時實現(xiàn)上述方法。