前言

沒錯，是 4 Star /狗頭。話不多説，做人後端開發人員，不愛寫前端代碼，但又不得不需要一個系統的管理端來配置些數據等等操作的時候，前端又木的人，那麼怎麼辦。
別怕，可以自動生成啦！我來提供個免費快捷的一鍵生成前端功能的工具啦。前後分離開型，無侵入。可在線使用，可本地部署，高效快捷。

開始

相信很多小夥伴開發後端的時候會經常碰到很多需要動態配置的功能，或者需要些增刪改查的頁面，自己又不會（愛）寫前端。就會有個尷尬的處境，經常去直接手動改數據庫這種危險操作。
所以我做了個可以一鍵生成這些功能的網站來生成前端項目，三五分鐘就可以出來個這些功能的管理系統，又不需要理解，直接用就完事了，你還在等什麼呢，快來給你的接口生成一個後台頁面管理吧。

方式一，根據數據庫結構一鍵生成

導出我們的表結構，上傳到工具中，配置一下接口地址，再配置一下接口路徑，就可以一鍵生成系統，然後再手動配置下登錄接口的入參數即可完成。

訪問網址：網站入口

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

點擊 我的項目-AI智能創建項目 選擇 數據庫結構導入 上傳我們導出的庫結構（即創建表的sql，一個文件，支持多個創建語句）

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

選擇或自動創建頁面母版，自動創建的話現在只提供了一套 增刪改查 模版已經夠用的了，自定義較複雜暫不過問。母版即是一個沒有元素（參數）的空功能，自動調用 增刪改查 接口以及數據處理

配置一下接口的路徑以及參數變量, 比如我們查詢接口都是 /${變量}/search, 添加或更新接口都是 /${變量}/saveOrUpdate。變量是什麼呢？因為我們會生成多張頁面，所以每個頁面
的接口應該是不一樣的（每個頁面的前置變量是一樣的），所以 ${fileName} 就是變量，也對應下一步的生成的頁面名稱。而參數變量則是接口入參與返回的數據結構，為了支持不一樣的後端數據結構。
比如我們查詢的時候的分頁參數名，以及如果判定接口是成功的等等。

選擇生成的頁面信息，注意 文件名 列是對應上一步的 ${fileName}，如有不同自行修改。然後點擊生成即可

完成！點擊預覽，系統已經完成。

當然，有可能你還需要個登錄進行驗權。我們進入設計頁面，配置一下登錄信息，以及登錄成功跳轉到哪過頁面即完成系統，我們就可以在預覽中直接使用，也可以下載到本地部署啦，一個系統就完成了。

方式二，根據（.sql, .java, .txt）描述文件單頁面生成

有可能我們並不想根據數據庫生成，而想每個頁面自己控制，那麼我們可以先創建一個項目（先在項目母版與頁面母版中複製系統個缺省的），然後進入設計工作台

新建頁面，輸入頁面名稱，與文件名稱（同理對應上面的：{fileName}），然後選擇你的 java 對應的表實體，或者單表創建語句，或者文本描述文件。
如先準備表實體類，然後創建頁面輸入基本信息，再然後上傳此類點擊確定即可：

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

    @TableLogic
    private Integer isDeleted;
}

當然，需要登錄頁面同上亦可。

總結

網址：網站入口

簡單系統三五分鐘即可，複雜的需要些前端 react 基礎。可視化編輯，助力後端小夥伴人手一個管理後台。再也不用手動修改數據庫！

謝謝大家！