本發(fā)明涉及計(jì)算機(jī)，尤其涉及一種前端框架系統(tǒng)、前端應(yīng)用開(kāi)發(fā)方法及設(shè)備。

背景技術(shù)：

1、本部分旨在為權(quán)利要求書(shū)中陳述的本發(fā)明實(shí)施例提供背景或上下文。此處的描述不因?yàn)榘ㄔ诒静糠种芯统姓J(rèn)是現(xiàn)有技術(shù)。

2、目前，業(yè)務(wù)復(fù)雜的前端應(yīng)用項(xiàng)目一般采用單體(monolithic)式架構(gòu)開(kāi)發(fā)，或者微前端架構(gòu)的方法實(shí)現(xiàn)。但是，單體式架構(gòu)和微前端架構(gòu)均存在一定缺陷。

3、對(duì)于單體式架構(gòu)，一般集成多個(gè)業(yè)務(wù)，存在耦合性和復(fù)雜性高，功能擴(kuò)展難，團(tuán)隊(duì)協(xié)作難，迭代困難，構(gòu)建復(fù)雜等缺陷。

4、對(duì)于微前端架構(gòu)，目前存在以下三種類(lèi)型的開(kāi)發(fā)方式：

5、1、基于webpack?5module?federation(模塊聯(lián)合)的微前端方案，如：emp微前端。此方案對(duì)webpack依賴較強(qiáng)，對(duì)存在已久的前端應(yīng)用或前端業(yè)務(wù)項(xiàng)目并不友好，限制了該方案的使用范圍。

6、2、上下文隔離沒(méi)有選用iframe(內(nèi)聯(lián)框架)的方案：如：qiankun、micro-app、garfish等。將前端應(yīng)用解析后，添加到指定的dom(document?object?model，文檔對(duì)象模型)上，采用特定的沙箱方案實(shí)現(xiàn)js、css樣式隔離。但是，跨域資源訪問(wèn)限制多，適配成本高，css樣式隔離在效果上和性能上仍需要提升。

7、3、上下文隔離采用iframe進(jìn)行隔離的方案，此類(lèi)方案中有的根據(jù)iframe的標(biāo)簽特點(diǎn)，使用web?components(網(wǎng)絡(luò)原生組件)將iframe內(nèi)的內(nèi)容添加到父頁(yè)面，成為一個(gè)頁(yè)面，并通過(guò)web?components實(shí)現(xiàn)沙箱隔離。有的方案將每個(gè)前端應(yīng)用均使用一個(gè)iframe展示，僅將不需要顯示的頁(yè)面隱藏起來(lái)，使用iframe硬隔離的特點(diǎn)實(shí)現(xiàn)業(yè)務(wù)的隔離。但是，由于iframe硬隔離具有隔離的徹底性，在需要集成多個(gè)前端應(yīng)用時(shí)并不適合使用。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明實(shí)施例提供一種前端框架系統(tǒng)，用以確保已存的前端應(yīng)用保持原有的構(gòu)建、部署，并可以輕松的、插件式的添加和移除前端應(yīng)用，消除各前端應(yīng)用之間訪問(wèn)的跨域限制及其他安全問(wèn)題，提供輕量級(jí)分布式安全層、和底層安全的通信通道，使開(kāi)發(fā)人員只專(zhuān)注于前端應(yīng)用級(jí)別的安全性，該前端框架系統(tǒng)包括：登錄模塊、中控應(yīng)用模塊和多個(gè)前端應(yīng)用；其中，

2、登錄模塊，用于接收用戶登錄信息，將用戶登錄信息發(fā)送至，多個(gè)前端應(yīng)用的統(tǒng)一認(rèn)證服務(wù)器，以使所述統(tǒng)一認(rèn)證服務(wù)器：根據(jù)用戶登錄信息查詢用戶信息，對(duì)用戶信息進(jìn)行安全認(rèn)證；

3、中控應(yīng)用模塊，用于在用戶安全認(rèn)證通過(guò)后，為用戶展示嵌套多個(gè)前端應(yīng)用頁(yè)面的中控應(yīng)用模塊頁(yè)面，統(tǒng)一管理全局狀態(tài)信息，根據(jù)全局狀態(tài)信息觸發(fā)各前端應(yīng)用緩存、加載頁(yè)面，以及基于云原生功能實(shí)現(xiàn)跨域；所述全局狀態(tài)信息包括各前端應(yīng)用狀態(tài)信息和公共狀態(tài)信息，所述前端應(yīng)用狀態(tài)信息包括前端應(yīng)用的頁(yè)面信息的狀態(tài)，所述公共狀態(tài)信息包括多個(gè)前端應(yīng)用共同使用的數(shù)據(jù)信息的狀態(tài)；

4、所述多個(gè)前端應(yīng)用，用于接收用戶的輸入信息，根據(jù)用戶的輸入信息與中控應(yīng)用模塊、各自的后端服務(wù)器交互，實(shí)現(xiàn)業(yè)務(wù)邏輯處理；所述用戶的輸入信息包括觸發(fā)前端應(yīng)用狀態(tài)信息、公共狀態(tài)信息、url信息變更的信息和向后端服務(wù)器發(fā)送的網(wǎng)絡(luò)請(qǐng)求信息。

5、在一個(gè)實(shí)施例中，所述中控應(yīng)用模塊可以包括框架狀態(tài)管理模塊、路由管理模塊、加載模塊、緩存管理模塊；

6、所述框架狀態(tài)管理模塊，用于獲取、存儲(chǔ)全局狀態(tài)信息；

7、所述路由管理模塊，用于在前端應(yīng)用頁(yè)面刷新時(shí)利用云原生提供的統(tǒng)一集群外部訪問(wèn)入口和流量路由功能實(shí)現(xiàn)跨域，所述路由管理模塊還用于通過(guò)多個(gè)插件、和第一應(yīng)用程序api觸發(fā)前端應(yīng)用頁(yè)面刷新，所述多個(gè)插件安裝在中控應(yīng)用模塊及各個(gè)前端應(yīng)用中，所述多個(gè)插件用于監(jiān)控統(tǒng)一資源定位符url變更，所述第一api用于獲取所述插件監(jiān)控的url變更信息，根據(jù)所述插件監(jiān)控的url變更信息，計(jì)算瀏覽器url地址和iframe標(biāo)簽地址，并根據(jù)計(jì)算結(jié)果觸發(fā)前端應(yīng)用的頁(yè)面刷新；

8、所述加載模塊，用于監(jiān)聽(tīng)框架狀態(tài)管理模塊存儲(chǔ)的各前端應(yīng)用狀態(tài)信息和公共狀態(tài)信息的變更信息，根據(jù)變更信息加載前端應(yīng)用頁(yè)面；

9、所述緩存管理模塊，用于監(jiān)聽(tīng)各前端應(yīng)用發(fā)送至各自的后端服務(wù)器的網(wǎng)絡(luò)請(qǐng)求，根據(jù)前端應(yīng)用發(fā)送至對(duì)應(yīng)的后端服務(wù)器的網(wǎng)絡(luò)請(qǐng)求，從對(duì)應(yīng)的后端服務(wù)器獲取并緩存業(yè)務(wù)數(shù)據(jù)。

10、在一個(gè)實(shí)施例中，多個(gè)前端應(yīng)用分別采用不同的技術(shù)棧實(shí)現(xiàn)。

11、在一個(gè)實(shí)施例中，所述技術(shù)棧包括如下之一或任意組合：vue技術(shù)棧、react技術(shù)棧、angularjs技術(shù)、原生技術(shù)棧。

12、在一個(gè)實(shí)施例中，流量路由功能包括virtual?service虛擬服務(wù)和destinationrule目標(biāo)規(guī)則，用于將每個(gè)前端應(yīng)用的網(wǎng)絡(luò)請(qǐng)求按照目標(biāo)規(guī)則匹配到網(wǎng)格內(nèi)特定的目標(biāo)地址。

13、在一個(gè)實(shí)施例中，緩存管理模塊還用于：當(dāng)監(jiān)聽(tīng)到的網(wǎng)絡(luò)請(qǐng)求的個(gè)數(shù)超過(guò)預(yù)設(shè)閾值，不再?gòu)膶?duì)應(yīng)的后端服務(wù)器獲取并緩存業(yè)務(wù)數(shù)據(jù)。

14、本發(fā)明實(shí)施例還提供一種前端應(yīng)用開(kāi)發(fā)方法，用以基于本發(fā)明實(shí)施例中的前端框架系統(tǒng)，輕松添加新的前端應(yīng)用，集成已有的前端應(yīng)用，降低新增和集成前端應(yīng)用產(chǎn)生的冗余代碼，實(shí)現(xiàn)快速、可靠的前端應(yīng)用開(kāi)發(fā)及構(gòu)建，該前端應(yīng)用開(kāi)發(fā)方法包括：

15、配置集群環(huán)境；

16、基于集群環(huán)境部署前端應(yīng)用；

17、利用本發(fā)明實(shí)施例中的前端框架系統(tǒng)，對(duì)前端應(yīng)用進(jìn)行注冊(cè)，得到注冊(cè)映射表；

18、基于注冊(cè)映射表，注冊(cè)前端應(yīng)用權(quán)限；

19、將前端應(yīng)用在集群環(huán)境進(jìn)行編譯運(yùn)行，加載前端應(yīng)用；

20、在前端應(yīng)用向后端服務(wù)器發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)，觸發(fā)中控應(yīng)用模塊中全局狀態(tài)信息變更；所述全局狀態(tài)信息包括前端應(yīng)用狀態(tài)信息和公共狀態(tài)信息，所述前端應(yīng)用狀態(tài)信息包括前端應(yīng)用的頁(yè)面信息的狀態(tài)，所述公共狀態(tài)信息包括多個(gè)前端應(yīng)用共同使用的數(shù)據(jù)信息的狀態(tài)；

21、根據(jù)中控應(yīng)用模塊中信息變更和前端應(yīng)用權(quán)限，加載前端應(yīng)用頁(yè)面。

22、在一個(gè)實(shí)施例中，所述前端框架系統(tǒng)存在多個(gè)已有前端應(yīng)用；所述多個(gè)已有前端應(yīng)用分別采用不同的技術(shù)棧實(shí)現(xiàn)。

23、在一個(gè)實(shí)施例中，所述前端應(yīng)用狀態(tài)信息包括業(yè)務(wù)數(shù)據(jù)獲取請(qǐng)求信息、url變更信息，所述公共狀態(tài)信息包括觸發(fā)前端應(yīng)用狀態(tài)信息變更的消息、觸發(fā)中控應(yīng)用模塊狀態(tài)信息變更的消息；根據(jù)中控應(yīng)用模塊中信息變更和前端應(yīng)用權(quán)限，加載前端應(yīng)用頁(yè)面，可以包括：

24、根據(jù)業(yè)務(wù)數(shù)據(jù)獲取請(qǐng)求信息、url變更信息和前端應(yīng)用權(quán)限，確定是否從前端應(yīng)用對(duì)應(yīng)的后端服務(wù)器獲取待顯示的頁(yè)面數(shù)據(jù)；

25、當(dāng)待顯示的頁(yè)面數(shù)據(jù)需要從前端應(yīng)用對(duì)應(yīng)的后端服務(wù)器獲取，向前端應(yīng)用對(duì)應(yīng)的后端服務(wù)器發(fā)送業(yè)務(wù)數(shù)據(jù)獲取請(qǐng)求；

26、接收并緩存前端應(yīng)用對(duì)應(yīng)的后端服務(wù)器反饋的業(yè)務(wù)數(shù)據(jù)；

27、根據(jù)url變更信息、觸發(fā)前端應(yīng)用狀態(tài)信息變更的消息、觸發(fā)中控應(yīng)用模塊狀態(tài)信息變更的消息，在前端應(yīng)用的頁(yè)面加載并顯示緩存的業(yè)務(wù)數(shù)據(jù)。

28、本發(fā)明實(shí)施例還提供一種計(jì)算機(jī)設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)上述前端應(yīng)用開(kāi)發(fā)方法。

29、本發(fā)明實(shí)施例還提供一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述前端應(yīng)用開(kāi)發(fā)方法。

30、本發(fā)明實(shí)施例還提供一種計(jì)算機(jī)程序產(chǎn)品，所述計(jì)算機(jī)程序產(chǎn)品包括計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述前端應(yīng)用開(kāi)發(fā)方法。

31、本發(fā)明實(shí)施例提供一種前端框架系統(tǒng)，包括登錄模塊、中控應(yīng)用模塊和多個(gè)前端應(yīng)用，所述中控應(yīng)用模塊框架狀態(tài)管理模塊、路由管理模塊、加載模塊、緩存管理模塊，其中，登錄模塊接收用戶登錄信息，為用戶提供了統(tǒng)一的用戶界面入口，進(jìn)而實(shí)現(xiàn)了統(tǒng)一的安全認(rèn)證，在安全認(rèn)證通過(guò)后，用戶界面跳轉(zhuǎn)到了中控應(yīng)用模塊頁(yè)面，中控應(yīng)用模塊頁(yè)面嵌套多個(gè)前端應(yīng)用頁(yè)面，用戶可以基于不同的前端應(yīng)用實(shí)現(xiàn)業(yè)務(wù)邏輯處理。依據(jù)此前端框架系統(tǒng)添加或者移除前端應(yīng)用，既能確保已存的前端應(yīng)用保持原有的構(gòu)建、部署，并可以輕松的、插件式的添加和移除前端應(yīng)用；并且，中控應(yīng)用模塊統(tǒng)一管理全局狀態(tài)信息，所述全局狀態(tài)信息包括各前端應(yīng)用狀態(tài)信息和公共狀態(tài)信息，所述前端應(yīng)用狀態(tài)信息包括前端應(yīng)用的頁(yè)面信息的狀態(tài)，所述公共狀態(tài)信息包括多個(gè)前端應(yīng)用共同使用的數(shù)據(jù)信息的狀態(tài)，即實(shí)現(xiàn)了全局狀態(tài)信息監(jiān)控、管理；同時(shí)，中控應(yīng)用模塊利用云原生實(shí)現(xiàn)跨域，采用云原生的方式開(kāi)發(fā)，還可以消除前端代碼開(kāi)發(fā)和部署過(guò)程中，由于部署環(huán)境不同而在業(yè)務(wù)代碼中產(chǎn)生過(guò)多的相關(guān)代碼造成的其他安全問(wèn)題，總的來(lái)說(shuō)，該前端框架系統(tǒng)，通過(guò)各模塊之間互相協(xié)作，提供了輕量級(jí)分布式安全層、和底層安全的通信通道，前端應(yīng)用之間相互調(diào)用和訪問(wèn)如同在一個(gè)服務(wù)器上，各前端應(yīng)用的構(gòu)建保持原有的、各自的構(gòu)建方式，開(kāi)發(fā)人員只需專(zhuān)注于前端應(yīng)用級(jí)別的安全性，實(shí)現(xiàn)了開(kāi)發(fā)的簡(jiǎn)單和靈活，構(gòu)建的快速和方便。

32、本發(fā)明實(shí)施例提供了一種前端應(yīng)用開(kāi)發(fā)方法，該方法配置集群環(huán)境；基于集群環(huán)境部署前端應(yīng)用；利用本發(fā)明實(shí)施例中的前端框架系統(tǒng)，對(duì)前端應(yīng)用進(jìn)行注冊(cè)，得到注冊(cè)映射表；基于注冊(cè)映射表，注冊(cè)前端應(yīng)用權(quán)限；將前端應(yīng)用在集群環(huán)境進(jìn)行編譯運(yùn)行，加載前端應(yīng)用；在前端應(yīng)用向后端服務(wù)器發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)，觸發(fā)中控應(yīng)用模塊中全局狀態(tài)信息變更；所述全局狀態(tài)信息包括前端應(yīng)用狀態(tài)信息和公共狀態(tài)信息，所述前端應(yīng)用狀態(tài)信息包括前端應(yīng)用的頁(yè)面信息的狀態(tài)，所述公共狀態(tài)信息包括多個(gè)前端應(yīng)用共同使用的數(shù)據(jù)信息的狀態(tài)；根據(jù)中控應(yīng)用模塊中信息變更和前端應(yīng)用權(quán)限，加載前端應(yīng)用頁(yè)面。本發(fā)明實(shí)施例中前端應(yīng)用開(kāi)發(fā)方法基于本發(fā)明實(shí)施例中的前端框架系統(tǒng)，可以輕松的添加新的前端應(yīng)用，集成已有的前端應(yīng)用，降低了新增和集成前端應(yīng)用產(chǎn)生的冗余代碼，實(shí)現(xiàn)了快速、可靠的前端應(yīng)用開(kāi)發(fā)及構(gòu)建。