[發(fā)明專利]獨(dú)立前端頁(yè)面搭建方法及系統(tǒng)

在審

• 申請(qǐng)?zhí)枺?/td>: 202011519455.6
• 申請(qǐng)日: 2020-12-21
• 公開(kāi)（公告）號(hào): CN112527295A
• 公開(kāi)（公告）日: 2021-03-19
• 發(fā)明（設(shè)計(jì)）人: 望曉陳;史西征
• 申請(qǐng)（專利權(quán)）人: 恩億科（北京）數(shù)據(jù)科技有限公司
• 主分類號(hào): G06F8/38
• 分類號(hào): G06F8/38;G06F8/33;G06F16/955;G06F16/958
• 代理公司: 青島清泰聯(lián)信知識(shí)產(chǎn)權(quán)代理有限公司 37256
• 代理人: 李紅巖

本申請(qǐng)涉及一種獨(dú)立前端頁(yè)面搭建方法、系統(tǒng)、計(jì)算機(jī)設(shè)備和計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其中，該獨(dú)立前端頁(yè)面搭建方法包括：模塊搭建步驟，用于設(shè)置待開(kāi)發(fā)模塊的基本信息并通過(guò)分開(kāi)獨(dú)立的模塊DOM搭建、模塊樣式及模塊交互進(jìn)行代碼開(kāi)發(fā)后通過(guò)WebPack工具組合成獨(dú)立的模塊；頁(yè)面搭建步驟，用于獲取至少一所述模塊并以拼接模塊的形式進(jìn)行頁(yè)面搭建。通過(guò)上述步驟，解決了臨時(shí)頁(yè)面各模塊重復(fù)利用率低的問(wèn)題，可快速通過(guò)對(duì)模塊進(jìn)行拼裝搭建頁(yè)面，提高臨時(shí)頁(yè)面開(kāi)發(fā)效率，減小開(kāi)發(fā)成本，以便于開(kāi)發(fā)人員開(kāi)發(fā)模塊、運(yùn)營(yíng)人員拼裝頁(yè)面。

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

本申請(qǐng)涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別是涉及獨(dú)立前端頁(yè)面搭建方法、系統(tǒng)、計(jì)算機(jī)設(shè)備和計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)。

背景技術(shù)

前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端、移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁(yè)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺(tái)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)各種屏幕分辨率，合適的動(dòng)效設(shè)計(jì)，給用戶帶來(lái)極高的用戶體驗(yàn)。在公司運(yùn)作中，有時(shí)候公司需要緊急開(kāi)發(fā)一些活動(dòng)、宣傳等臨時(shí)專用的頁(yè)面，用于展示、推銷公司的業(yè)務(wù)亮點(diǎn)，此時(shí)就需要快速生成這些前端頁(yè)面。

現(xiàn)有的一些臨時(shí)前端頁(yè)面快速生產(chǎn)主要通過(guò)開(kāi)發(fā)人員臨時(shí)開(kāi)發(fā)搭建，或根據(jù)原型圖生成頁(yè)面的工具或者開(kāi)發(fā)比較復(fù)雜的可視化搭建系統(tǒng)。但是，由于這類頁(yè)面的需求變更頻繁，導(dǎo)致需要消耗大量的人力去開(kāi)發(fā)活動(dòng)頁(yè)面；很多頁(yè)面結(jié)構(gòu)相似，可重用性極高，但現(xiàn)有大部分技術(shù)都缺少這樣重用的機(jī)制，開(kāi)發(fā)、上線、部署流程重復(fù)且不靈活，上述可視化搭建系統(tǒng)對(duì)于需求不是特別高，但又需要有一套快速搭建頁(yè)面系統(tǒng)的公司，開(kāi)發(fā)投入成本又過(guò)高。

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

本申請(qǐng)實(shí)施例提供了一種獨(dú)立前端頁(yè)面搭建方法、系統(tǒng)、計(jì)算機(jī)設(shè)備和計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，以模塊形式進(jìn)行頁(yè)面搭建，提高臨時(shí)頁(yè)面開(kāi)發(fā)效率，減小開(kāi)發(fā)成本。

第一方面，本申請(qǐng)實(shí)施例提供了一種獨(dú)立前端頁(yè)面搭建方法，包括：

模塊搭建步驟，用于設(shè)置待開(kāi)發(fā)模塊的基本信息并通過(guò)分開(kāi)獨(dú)立的模塊DOM搭建、模塊樣式及模塊交互進(jìn)行代碼開(kāi)發(fā)后通過(guò)WebPack工具組合成獨(dú)立的模塊；

頁(yè)面搭建步驟，用于獲取至少一所述模塊并以拼接模塊的形式進(jìn)行頁(yè)面搭建。

通過(guò)上述步驟，解決了臨時(shí)頁(yè)面各模塊重復(fù)利用率低的問(wèn)題，可快速通過(guò)對(duì)模塊進(jìn)行拼裝搭建頁(yè)面，提高臨時(shí)頁(yè)面開(kāi)發(fā)效率，減小開(kāi)發(fā)成本，以便于開(kāi)發(fā)人員開(kāi)發(fā)模塊、運(yùn)營(yíng)人員拼裝頁(yè)面。

在其中一些實(shí)施例中，所述模塊搭建步驟進(jìn)一步包括：

模塊編輯步驟，用于編輯待開(kāi)發(fā)模塊的基本信息，所述基本信息至少包括模塊名、模塊ID及模塊依賴關(guān)系其一或其任意組合；

模塊開(kāi)發(fā)步驟，用于通過(guò)一模塊開(kāi)發(fā)系統(tǒng)搭建模塊DOM、編輯模塊樣式及定義模塊交互后，預(yù)設(shè)模塊的配置項(xiàng)，并通過(guò)WebPack工具打包得到所述模塊，舉例而非限制，所述配置數(shù)據(jù)至少包括標(biāo)題、描述；其中，文檔對(duì)象模型(Document Object Model，簡(jiǎn)稱DOM)，是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口，WebPack是一個(gè)模塊打包器。WebPack的主要目標(biāo)是將JavaScript文件打包在一起，打包后的文件用于在瀏覽器中使用。

模塊校驗(yàn)渲染步驟，用于調(diào)用所述模塊開(kāi)發(fā)系統(tǒng)的服務(wù)端進(jìn)行數(shù)據(jù)校驗(yàn)，數(shù)據(jù)校驗(yàn)成功后調(diào)用Render函數(shù)渲染生成所述模塊的預(yù)覽頁(yè)面；

模塊發(fā)布步驟，用于將所述模塊保存至一模塊倉(cāng)庫(kù)；

通過(guò)上述步驟，可直接在模塊開(kāi)發(fā)系統(tǒng)的界面編輯模塊，并能隨時(shí)渲染查看模塊效果，通過(guò)服務(wù)端進(jìn)行渲染前數(shù)據(jù)校驗(yàn)，規(guī)避生成頁(yè)面的數(shù)據(jù)不規(guī)范問(wèn)題，確保模塊安全可用。

在其中一些實(shí)施例中，所述頁(yè)面搭建步驟進(jìn)一步包括：

頁(yè)面編輯步驟，用于編輯待開(kāi)發(fā)頁(yè)面的基本信息，所述基本信息至少包括：頁(yè)面名稱、頁(yè)面用途其一或其組合；