本發(fā)明屬于前端開(kāi)發(fā)，具體涉及一種基于圖片生成前端代碼的方法、裝置、設(shè)備及介質(zhì)。

背景技術(shù)：

1、當(dāng)前圖片生成技術(shù)雖然能夠高效地生成html和css代碼，為前端界面的快速搭建提供了便利，但其局限性也日益凸顯。

2、具體而言，這類(lèi)技術(shù)往往側(cè)重于靜態(tài)視覺(jué)內(nèi)容的自動(dòng)化產(chǎn)出，卻忽略了現(xiàn)代web開(kāi)發(fā)中至關(guān)重要的交互邏輯構(gòu)建與數(shù)據(jù)動(dòng)態(tài)請(qǐng)求處理的核心環(huán)節(jié)。這導(dǎo)致開(kāi)發(fā)者在獲得初步的視覺(jué)框架后，仍需手動(dòng)介入，投入大量時(shí)間和精力于編寫(xiě)javascript邏輯、設(shè)置api接口調(diào)用、以及處理數(shù)據(jù)綁定等后續(xù)工作，極大地降低了開(kāi)發(fā)效率與項(xiàng)目的整體可用性。

3、此外，由于這種技術(shù)未能與項(xiàng)目開(kāi)發(fā)的全生命周期深度融合，從設(shè)計(jì)到實(shí)現(xiàn)的轉(zhuǎn)換過(guò)程中存在明顯的斷層，增加了溝通成本和維護(hù)難度。

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

1、本發(fā)明的目的是提供一種基于圖片生成前端代碼的方法、裝置、設(shè)備及介質(zhì)，用以解決現(xiàn)有技術(shù)中存在的開(kāi)發(fā)效率低、維護(hù)難度以及溝通成本高的問(wèn)題。

2、為了實(shí)現(xiàn)上述目的，本發(fā)明采用以下技術(shù)方案：

3、第一方面，本發(fā)明提供了一種基于圖片生成前端代碼的方法，所述方法包括：

4、獲取后臺(tái)表格頁(yè)面圖；

5、基于預(yù)設(shè)解析算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行解析，得到表格元素，所述表格元素至少包括：搜索欄、操作欄、表頭和單元格；

6、獲取接口文檔，基于接口文檔對(duì)表格元素進(jìn)行匹配，得到匹配結(jié)果；

7、將匹配結(jié)果輸入至預(yù)設(shè)代碼函數(shù)，生成前端代碼。

8、優(yōu)選地，所述預(yù)設(shè)解析算法為ocr算法。

9、優(yōu)選地，基于預(yù)設(shè)解析算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行解析，得到表格元素，包括：

10、基于ocr算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行字符提取，得到至少一個(gè)原型圖文字和至少一個(gè)原型圖文字對(duì)應(yīng)的文字坐標(biāo)；

11、至少一個(gè)原型圖文字對(duì)應(yīng)的文字坐標(biāo)對(duì)至少一個(gè)原型圖文字進(jìn)行列排版，得到表格排版；

12、基于表格排版確定表格元素。

13、優(yōu)選地，所述接口文檔包括：請(qǐng)求體和響應(yīng)體，所述請(qǐng)求體包括：多個(gè)請(qǐng)求字段，所述響應(yīng)體包括：多個(gè)響應(yīng)字段。

14、優(yōu)選地，基于接口文檔對(duì)表格元素進(jìn)行匹配，得到匹配結(jié)果，包括：

15、計(jì)算表格元素中的文字與接口文檔的接口字段的相似度，其中接口文檔的接口字段為：多個(gè)請(qǐng)求字段或多個(gè)響應(yīng)字段；

16、在表格元素中的任意文字與接口文檔的接口字段的相似度超過(guò)預(yù)設(shè)值時(shí)，建立表格元素中的該文字與該接口文檔的接口字段的映射關(guān)系，以表格元素中的該文字與該接口文檔的接口字段的映射關(guān)系作為匹配結(jié)果。

17、優(yōu)選地，所述預(yù)設(shè)代碼函數(shù)包括：搜索欄代碼生成函數(shù)、操作欄代碼生成函數(shù)、表頭代碼生成函數(shù)、單元格代碼生成函數(shù)和頁(yè)面代碼生成函數(shù)。

18、優(yōu)選地，將匹配結(jié)果輸入至預(yù)設(shè)代碼函數(shù)，生成前端代碼，包括：

19、基于搜索欄的文字與對(duì)應(yīng)的接口文檔的接口字段的映射關(guān)系，以搜索欄代碼生成函數(shù)，生成搜索欄代碼；

20、基于操作欄的文字與對(duì)應(yīng)的接口文檔的接口字段的映射關(guān)系，以操作欄代碼生成函數(shù)，生成操作欄代碼；

21、基于表頭的文字與對(duì)應(yīng)的接口文檔的接口字段的映射關(guān)系，以表頭代碼生成函數(shù)，生成表頭代碼；

22、基于單元格的文字與對(duì)應(yīng)的接口文檔的接口字段的映射關(guān)系，以單元格代碼生成函數(shù)，生成單元格欄代碼；

23、基于頁(yè)面模塊，將搜索欄代碼、操作欄代碼、表頭代碼和單元格欄代碼作為頁(yè)面代碼生成函數(shù)的輸入，以頁(yè)面代碼生成函數(shù)生成頁(yè)面代碼。

24、第二方面，本發(fā)明提供了一種基于圖片生成前端代碼的裝置，用于實(shí)現(xiàn)上述的基于圖片生成前端代碼的方法，所述裝置包括：

25、圖片獲取模塊，用于獲取后臺(tái)表格頁(yè)面圖；

26、圖片解析模塊，用于基于預(yù)設(shè)解析算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行解析，得到表格元素，所述表格元素至少包括：搜索欄、操作欄、表頭和單元格；

27、數(shù)據(jù)匹配模塊，用于獲取接口文檔，基于接口文檔對(duì)表格元素進(jìn)行匹配，得到匹配結(jié)果；

28、代碼生成模塊，用于將匹配結(jié)果輸入至預(yù)設(shè)代碼函數(shù)，生成前端代碼。

29、第三方面，本發(fā)明提供了一種電子設(shè)備，包括存儲(chǔ)器、處理器以及存儲(chǔ)在所述存儲(chǔ)器中并可在所述處理器上運(yùn)行的計(jì)算機(jī)程序，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)上述的基于圖片生成前端代碼的方法。

30、第四方面，本發(fā)明提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)有計(jì)算機(jī)程序，該程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述的基于圖片生成前端代碼的方法。

31、有益效果：

32、1、本發(fā)明的前端代碼的生成方法顯著優(yōu)化了后臺(tái)系統(tǒng)表格頁(yè)面的開(kāi)發(fā)流程，能夠自動(dòng)化地識(shí)別頁(yè)面設(shè)計(jì)圖，智能生成數(shù)據(jù)請(qǐng)求邏輯及前端代碼，實(shí)現(xiàn)了與項(xiàng)目框架的深度整合；

33、2、開(kāi)發(fā)人員僅需專(zhuān)注于處理復(fù)雜業(yè)務(wù)邏輯，極大地提升了開(kāi)發(fā)效率與項(xiàng)目的可用性。

技術(shù)特征：

1.一種基于圖片生成前端代碼的方法，其特征在于，所述方法包括：

2.根據(jù)權(quán)利要求1所述的基于圖片生成前端代碼的方法，其特征在于，所述預(yù)設(shè)解析算法為ocr算法。

3.根據(jù)權(quán)利要求2所述的基于圖片生成前端代碼的方法，其特征在于，基于預(yù)設(shè)解析算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行解析，得到表格元素，包括：

4.根據(jù)權(quán)利要求1所述的基于圖片生成前端代碼的方法，其特征在于，所述接口文檔包括：請(qǐng)求體和響應(yīng)體，所述請(qǐng)求體包括：多個(gè)請(qǐng)求字段，所述響應(yīng)體包括：多個(gè)響應(yīng)字段。

5.根據(jù)權(quán)利要求4所述的基于圖片生成前端代碼的方法，其特征在于，基于接口文檔對(duì)表格元素進(jìn)行匹配，得到匹配結(jié)果，包括：

6.根據(jù)權(quán)利要求5所述的基于圖片生成前端代碼的方法，其特征在于，所述預(yù)設(shè)代碼函數(shù)包括：搜索欄代碼生成函數(shù)、操作欄代碼生成函數(shù)、表頭代碼生成函數(shù)、單元格代碼生成函數(shù)和頁(yè)面代碼生成函數(shù)。

7.根據(jù)權(quán)利要求6所述的基于圖片生成前端代碼的方法，其特征在于，將匹配結(jié)果輸入至預(yù)設(shè)代碼函數(shù)，生成前端代碼，包括：

8.一種基于圖片生成前端代碼的裝置，用于實(shí)現(xiàn)權(quán)利要求1-7中任一項(xiàng)所述的基于圖片生成前端代碼的方法，其特征在于，所述裝置包括：

9.一種電子設(shè)備，包括存儲(chǔ)器、處理器以及存儲(chǔ)在所述存儲(chǔ)器中并可在所述處理器上運(yùn)行的計(jì)算機(jī)程序，其特征在于，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)權(quán)利要求1-7中任一項(xiàng)所述的基于圖片生成前端代碼的方法。

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)有計(jì)算機(jī)程序，其特征在于，該程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)權(quán)利要求1-7中任一項(xiàng)所述的基于圖片生成前端代碼的方法。

技術(shù)總結(jié)
本發(fā)明屬于前端開(kāi)發(fā)技術(shù)領(lǐng)域，公開(kāi)了一種基于圖片生成前端代碼的方法、裝置、設(shè)備及介質(zhì)，所述方法包括：獲取后臺(tái)表格頁(yè)面圖；基于預(yù)設(shè)解析算法對(duì)后臺(tái)表格頁(yè)面圖進(jìn)行解析，得到表格元素，所述表格元素至少包括：搜索欄、操作欄、表頭和單元格；獲取接口文檔，基于接口文檔對(duì)表格元素進(jìn)行匹配，得到匹配結(jié)果；將匹配結(jié)果輸入至預(yù)設(shè)代碼函數(shù)，生成前端代碼。本發(fā)明顯著優(yōu)化了后臺(tái)系統(tǒng)表格頁(yè)面的開(kāi)發(fā)流程，能夠自動(dòng)化地識(shí)別頁(yè)面設(shè)計(jì)圖，智能生成數(shù)據(jù)請(qǐng)求邏輯及前端代碼，實(shí)現(xiàn)了與項(xiàng)目框架的深度整合。開(kāi)發(fā)人員僅需專(zhuān)注于處理復(fù)雜業(yè)務(wù)邏輯，極大地提升了開(kāi)發(fā)效率與項(xiàng)目的可用性。

技術(shù)研發(fā)人員：李發(fā)亮,周峰
受保護(hù)的技術(shù)使用者：成都魚(yú)泡科技有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/19