一鍵生成前端UI，簡(jiǎn)直就是后端開(kāi)發(fā)神器...

別怕，可以自動(dòng)生成啦！我來(lái)提供個(gè)免費(fèi)快捷的一鍵生成前端功能的工具啦。前后分離開(kāi)型，無(wú)侵入。可在線使用，可本地部署，高效快捷。

開(kāi)始

相信很多小伙伴開(kāi)發(fā)后端的時(shí)候會(huì)經(jīng)常碰到很多需要?jiǎng)討B(tài)配置的功能，或者需要些增刪改查的頁(yè)面，自己又不會(huì)（愛(ài)）寫(xiě)前端。就會(huì)有個(gè)尷尬的處境，經(jīng)常去直接手動(dòng)改數(shù)據(jù)庫(kù)這種危險(xiǎn)操作。

所以我做了個(gè)可以一鍵生成這些功能的網(wǎng)站來(lái)生成前端項(xiàng)目，三五分鐘就可以出來(lái)個(gè)這些功能的管理系統(tǒng)，又不需要理解，直接用就完事了，你還在等什么呢，快來(lái)給你的接口生成一個(gè)后臺(tái)頁(yè)面管理吧。

方式一：根據(jù)數(shù)據(jù)庫(kù)結(jié)構(gòu)一鍵生成

導(dǎo)出我們的表結(jié)構(gòu)，上傳到工具中，配置一下接口地址，再配置一下接口路徑，就可以一鍵生成系統(tǒng)，然后再手動(dòng)配置下登錄接口的入?yún)?shù)即可完成。

訪問(wèn)網(wǎng)址：https://light2f.com

需要登錄，輸入郵件獲取驗(yàn)證碼即可登錄，再無(wú)其它驗(yàn)證。

點(diǎn)擊 我的項(xiàng)目-AI智能創(chuàng)建項(xiàng)目 選擇 數(shù)據(jù)庫(kù)結(jié)構(gòu)導(dǎo)入 上傳我們導(dǎo)出的庫(kù)結(jié)構(gòu)（即創(chuàng)建表的sql，一個(gè)文件，支持多個(gè)創(chuàng)建語(yǔ)句）

配置下接口的基地址（如：http://localhost:8080/test，注意：線上直接訪問(wèn)本地存在跨域問(wèn)題，所以在本地調(diào)試的時(shí)候可以設(shè)置下允許任意域訪問(wèn)，如何設(shè)置此處不多介紹）

選擇或自動(dòng)創(chuàng)建頁(yè)面母版，自動(dòng)創(chuàng)建的話現(xiàn)在只提供了一套 增刪改查 模版已經(jīng)夠用的了，自定義較復(fù)雜暫不過(guò)問(wèn)。母版即是一個(gè)沒(méi)有元素（參數(shù)）的空功能，自動(dòng)調(diào)用 增刪改查 接口以及數(shù)據(jù)處理

配置一下接口的路徑以及參數(shù)變量, 比如我們查詢接口都是 /${變量}/search, 添加或更新接口都是 /${變量}/saveOrUpdate。

變量是什么呢？因?yàn)槲覀儠?huì)生成多張頁(yè)面，所以每個(gè)頁(yè)面 的接口應(yīng)該是不一樣的（每個(gè)頁(yè)面的前置變量是一樣的），所以 ${fileName} 就是變量，也對(duì)應(yīng)下一步的生成的頁(yè)面名稱。

而參數(shù)變量則是接口入?yún)⑴c返回的數(shù)據(jù)結(jié)構(gòu)，為了支持不一樣的后端數(shù)據(jù)結(jié)構(gòu)。比如我們查詢的時(shí)候的分頁(yè)參數(shù)名，以及如果判定接口是成功的等等。

選擇生成的頁(yè)面信息，注意 文件名 列是對(duì)應(yīng)上一步的 ${fileName}，如有不同自行修改。然后點(diǎn)擊生成即可

完成！點(diǎn)擊預(yù)覽，系統(tǒng)已經(jīng)完成。

當(dāng)然，有可能你還需要個(gè)登錄進(jìn)行驗(yàn)權(quán)。我們進(jìn)入設(shè)計(jì)頁(yè)面，配置一下登錄信息，以及登錄成功跳轉(zhuǎn)到哪過(guò)頁(yè)面即完成系統(tǒng)，我們就可以在預(yù)覽中直接使用，也可以下載到本地部署啦，一個(gè)系統(tǒng)就完成了。

方式二：根據(jù)（.sql, .java, .txt）描述文件單頁(yè)面生成

有可能我們并不想根據(jù)數(shù)據(jù)庫(kù)生成，而想每個(gè)頁(yè)面自己控制，那么我們可以先創(chuàng)建一個(gè)項(xiàng)目（先在項(xiàng)目母版與頁(yè)面母版中復(fù)制系統(tǒng)個(gè)缺省的），然后進(jìn)入設(shè)計(jì)工作臺(tái)

新建頁(yè)面，輸入頁(yè)面名稱，與文件名稱（同理對(duì)應(yīng)上面的：{fileName}），然后選擇你的 java 對(duì)應(yīng)的表實(shí)體，或者單表創(chuàng)建語(yǔ)句，或者文本描述文件。如先準(zhǔn)備表實(shí)體類，然后創(chuàng)建頁(yè)面輸入基本信息，再然后上傳此類點(diǎn)擊確定即可：

@TableName(value = "component")
@Data
public class ComponentPO {
    @TableId
    private Integer componentId;
    //項(xiàng)目id
    private Integer projectId;
    //組件描述
    private String componentDes; 
    //組件名
    private String componentName; 
    //創(chuàng)建時(shí)間
    private Date createAt; 
    @TableLogic
    private Integer isDeleted;
}

當(dāng)然，需要登錄頁(yè)面同上亦可。

總結(jié)

簡(jiǎn)單系統(tǒng)三五分鐘即可，復(fù)雜的需要些前端 react 基礎(chǔ)。可視化編輯，助力后端小伙伴人手一個(gè)管理后臺(tái)。再也不用手動(dòng)修改數(shù)據(jù)庫(kù)！

來(lái)源：juejin.cn/post/7275943802938343464