一鍵生成任意前端項(xiàng)目

• 開始
• 方式一：根據(jù)數(shù)據(jù)庫結(jié)構(gòu)一鍵生成
• 方式二：根據(jù)（.sql, .java, .txt）描述文件單頁面生成
• 總結(jié)

話不多說，作為后端開發(fā)人員，不愛寫前端代碼，但又不得不需要一個(gè)系統(tǒng)的管理端來配置些數(shù)據(jù)等等操作的時(shí)候，前端又木的人，那么怎么辦。

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

開始

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

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

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

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

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

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

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

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

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

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

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

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

選擇生成的頁面信息，注意 文件名 列是對(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ì)頁面，配置一下登錄信息，以及登錄成功跳轉(zhuǎn)到哪過頁面即完成系統(tǒng)，我們就可以在預(yù)覽中直接使用，也可以下載到本地部署啦，一個(gè)系統(tǒng)就完成了。

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

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

新建頁面，輸入頁面名稱，與文件名稱（同理對(duì)應(yīng)上面的：{fileName}），然后選擇你的 java 對(duì)應(yīng)的表實(shí)體，或者單表創(chuàng)建語句，或者文本描述文件。如先準(zhǔn)備表實(shí)體類，然后創(chuàng)建頁面輸入基本信息，再然后上傳此類點(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)然，需要登錄頁面同上亦可。

來源：juejin.cn/post/ 7275943802938343464