本申請涉及計算機領域，具體涉及一種前端頁面生成方法、設備及介質。

背景技術：

1、在互聯(lián)網應用開發(fā)過程中，前端頁面是一個重要的組成部分，目前前端開發(fā)框架通常使用angular、vue、react等。隨著互聯(lián)網技術的發(fā)展，前端頁面的復雜程度越來越高，隨之出現(xiàn)了以下的問題：

2、1、編譯時間長，隨著前端工程的增大，前端工程的打包時間也會增加到幾分鐘。對前端工程做出部分修改后，需要對工程打包部署，累計耗費了了大量的時間。

3、2、工作量大，隨著時間的發(fā)展，同樣會出現(xiàn)新的前端框架，當我們需要從一種前端框架切換到另一種前端框架時，需要進行全部的代碼重構，工作量巨大。

4、3、開發(fā)效率低，手動編碼開發(fā)前端頁面時，我們所需的組件是有限的。我們的功能都是對有限的組件進行排列和組合。在這個工程中，編寫大量的重復的組件代碼，開發(fā)效率比較低。

技術實現(xiàn)思路

1、為了解決上述問題，本申請?zhí)岢隽艘环N前端頁面生成方法，包括：

2、獲取組件描述，以及基于所述組件描述生成的頁面描述；

3、基于頁面解析引擎，調用組件解析引擎，對所述頁面描述中包含的所述組件描述進行解析，得到對應的組件屬性；

4、基于模板渲染引擎，根據所述組件屬性進行渲染，生成對應的網頁語言，并基于所述網頁語言進行渲染，生成前端頁面。

5、在一個示例中，獲取組件描述，以及基于所述組件描述生成的頁面描述，具體包括：

6、獲取組件描述，所述組件描述中至少包括組件屬性類型、必填信息、選填信息；

7、基于當前的業(yè)務場景，通過多個組件描述的多層級嵌套，生成對應的頁面描述。

8、在一個示例中，基于頁面解析引擎，調用組件解析引擎，對所述頁面描述中包含的所述組件描述進行解析，得到對應的組件屬性，具體包括：

9、基于頁面解析引擎，確定所述頁面描述中嵌套的各組件描述；

10、按照嵌套的層級，依次選擇各組件描述，并調用其對應的組件解析引擎，對所述組件描述進行解析，得到對應的組件屬性；

11、按照嵌套的層級，將得到的組件屬性進行組合。

12、在一個示例中，調用其對應的組件解析引擎，對所述組件描述進行解析之前，所述方法還包括：

13、針對當前解析的組件描述，確定其對應的第一組件解析引擎，并根據嵌套的層級，確定屬于同一層級的已解析的組件描述對應的第二組件解析引擎，以及當前解析的組件描述對應的上一層級的已解析的組件描述對應的第三組件解析引擎；

14、若所述第一組件解析引擎與所述第二組件解析引擎的關聯(lián)程度，或所述第一組件解析引擎與所述第三組件解析引擎的關聯(lián)程度低于預設程度，則進行告警；其中，所述關聯(lián)程度基于歷史數(shù)據進行大數(shù)據分析得到。

15、在一個示例中，所述組件屬性類型包括表單組件、導航組件、媒體組件、交互組件、布局組件中的至少一種；

16、所述必填信息包括：id、type中的至少一種；所述選填信息包括：require、visible中的至少一種。

17、在一個示例中，調用組件解析引擎，對所述頁面描述中包含的所述組件描述進行解析，具體包括：

18、調用組件解析引擎，確定預先設置的映射關系；

19、基于所述映射關系，在所述頁面描述進行遍歷，直至尋找到符合所述映射關系的描述內容；

20、根據所述映射關系，將所述描述內容映射為對應的屬性內容，并根據所述屬性內容生成對應的代碼語句。

21、在一個示例中，按照嵌套的層級，依次選擇各組件描述，具體包括：

22、基于所述嵌套的層級生成對應的樹結構，其中，若第一組件描述將第二組件描述嵌套在自身的內部，則將第一組件描述作為第二組件描述的父節(jié)點；并將同一層級的中出現(xiàn)次序越靠前的組件描述，作為所述樹結構中的越靠左的節(jié)點；

23、針對所述樹結構進行前序遍歷，并基于前序遍歷的順序，依次選擇對應的組件描述。

24、在一個示例中，基于模板渲染引擎，根據所述組件屬性進行渲染，具體包括：

25、針對所述樹結構，每當遍歷完一顆新的子樹，則針對該子樹中新解析得到的組件屬性，在歷史渲染的基礎上進行增量渲染；

26、記錄所述增量渲染的結果，并標記所述增量渲染對應的組件描述，以及對所述增量渲染進行突出顯示。

27、另一方面，本申請還提出了一種前端頁面生成設備，包括：

28、至少一個處理器；以及，

29、與所述至少一個處理器通信連接的存儲器；其中，

30、所述存儲器存儲有可被所述至少一個處理器執(zhí)行的指令，所述指令被所述至少一個處理器執(zhí)行，以使所述至少一個處理器能夠執(zhí)行如：上述任一示例所述的前端頁面生成方法。

31、另一方面，本申請還提出了一種非易失性計算機存儲介質，存儲有計算機可執(zhí)行指令，所述計算機可執(zhí)行指令設置為：上述任一示例所述的前端頁面生成方法。

32、通過本申請?zhí)岢銮岸隧撁嫔煞椒軌驇砣缦掠幸嫘Ч?/p>

33、即使用戶在對前端頁面進行修改后，也可以通過頁面解析引擎實現(xiàn)自動化快速渲染新的頁面，無需用戶手動調整后續(xù)內容，減少了時間消耗。

34、提供基于新框架的模板渲染引擎，針對新的前端框架，不用對原來的業(yè)務邏輯進行調整，無需進行代碼的重構，只需要針對組件描述和頁面描述進行重新編寫，即可通過自動化的方式完成對后續(xù)代碼的重構，提高工作效率。

35、提供了對組件的描述結構，在開發(fā)前端頁面時，通過簡單的描述，完成頁面的構建，無需對頁面屬性中的重復代碼進行重復編寫，節(jié)省了用戶的工作量，提高了開發(fā)效率。

技術特征：

1.一種前端頁面生成方法，其特征在于，包括：

2.根據權利要求1所述的方法，其特征在于，獲取組件描述，以及基于所述組件描述生成的頁面描述，具體包括：

3.根據權利要求2所述的方法，其特征在于，基于頁面解析引擎，調用組件解析引擎，對所述頁面描述中包含的所述組件描述進行解析，得到對應的組件屬性，具體包括：

4.根據權利要求3所述的方法，其特征在于，調用其對應的組件解析引擎，對所述組件描述進行解析之前，所述方法還包括：

5.根據權利要求2所述的方法，其特征在于，所述組件屬性類型包括表單組件、導航組件、媒體組件、交互組件、布局組件中的至少一種；

6.根據權利要求1所述的方法，其特征在于，調用組件解析引擎，對所述頁面描述中包含的所述組件描述進行解析，具體包括：

7.根據權利要求3所述的方法，其特征在于，按照嵌套的層級，依次選擇各組件描述，具體包括：

8.根據權利要求7所述的方法，其特征在于，基于模板渲染引擎，根據所述組件屬性進行渲染，具體包括：

9.一種前端頁面生成設備，其特征在于，包括：

10.一種非易失性計算機存儲介質，存儲有計算機可執(zhí)行指令，其特征在于，所述計算機可執(zhí)行指令設置為：權利要求1～8中任一項權利要求所述的前端頁面生成方法。

技術總結
本申請公開了一種前端頁面生成方法、設備及介質，方法包括：獲取組件描述，以及基于組件描述生成的頁面描述；基于頁面解析引擎，調用組件解析引擎，對頁面描述中包含的組件描述進行解析，得到對應的組件屬性；基于模板渲染引擎，根據組件屬性進行渲染，生成對應的網頁語言，并基于網頁語言進行渲染，生成前端頁面。提供了對組件的描述結構，在開發(fā)前端頁面時，通過簡單的描述，完成頁面的構建，無需對頁面屬性中的重復代碼進行重復編寫，節(jié)省了用戶的工作量，提高了開發(fā)效率。

技術研發(fā)人員：李江坤,季維濤,史繼新,陳圣杰,丁一凡,王家琦
受保護的技術使用者：浪潮通用軟件有限公司
技術研發(fā)日：
技術公布日：2024/12/10