一款基于Java注解模版就能輕松完成復(fù)雜的增刪改查的頁面渲染以及事件交互，讓后端小伙伴不在為了查詢和表單提交而頭疼。

開源地址

Github 開源地址

Gitee 碼云地址

功能介紹

• 基于注解驅(qū)動前端頁面的渲染
  • 注解支持Spring的表達式
  • 支持靜態(tài)枚舉類、動態(tài)字典等等
  • 支持復(fù)雜表單的嵌套(頁面嵌套頁面)
  • 支持頁面分組
  • 支持規(guī)則校驗配置等等
• 支持通用按鈕事件的定義
  • 行按鈕
  • 左邊欄按鈕
  • 右邊欄按鈕
• 支持集成頁面組件
  • 如json，默認(rèn)input、select等等
• ruoyi后臺基礎(chǔ)管理系統(tǒng)基礎(chǔ)組件
  • 用戶管理：用戶是系統(tǒng)操作者，該功能主要完成系統(tǒng)用戶配置。
  • 部門管理：配置系統(tǒng)組織機構(gòu)（公司、部門、小組），樹結(jié)構(gòu)展現(xiàn)支持?jǐn)?shù)據(jù)權(quán)限。
  • 崗位管理：配置系統(tǒng)用戶所屬擔(dān)任職務(wù)。
  • 菜單管理：配置系統(tǒng)菜單，操作權(quán)限，按鈕權(quán)限標(biāo)識等。
  • 角色管理：角色菜單權(quán)限分配、設(shè)置角色按機構(gòu)進行數(shù)據(jù)范圍權(quán)限劃分。
  • 字典管理：對系統(tǒng)中經(jīng)常使用的一些較為固定的數(shù)據(jù)進行維護。
  • 參數(shù)管理：對系統(tǒng)動態(tài)配置常用參數(shù)。
  • 通知公告：系統(tǒng)通知公告信息發(fā)布維護。
  • 操作日志：系統(tǒng)正常操作日志記錄和查詢；系統(tǒng)異常信息日志記錄和查詢。
  • 登錄日志：系統(tǒng)登錄日志記錄查詢包含登錄異常。
  • 在線用戶：當(dāng)前系統(tǒng)中活躍用戶狀態(tài)監(jiān)控。
  • 定時任務(wù)：在線（添加、修改、刪除)任務(wù)調(diào)度包含執(zhí)行結(jié)果日志。
  • 代碼生成：前后端代碼的生成（java、html、xml、sql）支持CRUD下載 。
  • 系統(tǒng)接口：根據(jù)業(yè)務(wù)代碼自動生成相關(guān)的api接口文檔。
  • 服務(wù)監(jiān)控：監(jiān)視當(dāng)前系統(tǒng)CPU、內(nèi)存、磁盤、堆棧等相關(guān)信息。
  • 緩存監(jiān)控：對系統(tǒng)的緩存查詢，刪除、清空等操作。
  • 在線構(gòu)建器：拖動表單元素生成相應(yīng)的HTML代碼。
  • 連接池監(jiān)視：監(jiān)視當(dāng)前系統(tǒng)數(shù)據(jù)庫連接池狀態(tài)，可進行分析SQL找出系統(tǒng)性能瓶頸。

文檔

項目背景及應(yīng)用場景介紹

為了提升閱讀體驗可以觀看全局文檔:

全局文檔點擊觀看

全局文檔點擊觀看

全局文檔點擊觀看

使用前稍微了解下:

• AVue的組件官網(wǎng) : 大部分注解都是基于AVue的屬性設(shè)計而來。
• ruoyi的文檔地址 : 針對一些部署情況，如果是后端同學(xué)只需要稍微了解nodejs的情況。
• 相對于ruoyi的改動文檔

如何使用

1. 環(huán)境搭建以及項目引入以及效果展示

2. 前端ruoyi-avue-ui環(huán)境搭建

代碼結(jié)構(gòu)

ruoyi-avue-client 相關(guān)

注解相關(guān)的介紹

展示圖

1. 操作介紹

負責(zé)展示了各模塊的關(guān)系

image-20211029110727955

2. 模版案例

// 模版對應(yīng)的編號
@AVueRouteKey(groupKey = "test-route")
// 表格的標(biāo)題
@AVueTableOption(title = "這是一個測試", dialogDrag = true)
// 適配后臺服務(wù)的對應(yīng)的處理接口
@AVueConfig(list = AVueControllerTest.LIST_URL, update = AVueControllerTest.UPDATE_URL, save = AVueControllerTest.UPDATE_URL, successKeyword = "true", successField = "success", messageField = "message")
public class AVueCrudModel {
    /**
     * 注解介紹
     *
     * `@AVueInput`: 組件類型以@AVue開始，后面是具體的組件。
     * - input  ： 代表文本框
     * - select ： 代表選擇框
     * - number ： 代表數(shù)字框
     * - json   ： 代表json組件
     * <p>
     * 屬性介紹：
     * addDisplay       ： 表示新增的時候是否展示
     * editDisabled     ： 表示修改的時候是否不可編輯
     * search           ： 代表列表頁是否為搜索條件
     * searchRequired   ： 代表搜索條件是否為必填
     * dicData          ： 代表枚舉字典
     * dicUrl           ： 代表后臺拉取對象
     * 具體屬性釋義可參考 :  https://avuejs.com/views/doc.html
     * 注解文檔參考 : https://gitee.com/liukaixiong/RuoYi-AVue-Plus/blob/master/doc/annotation.md
     */
    @AVueInput(prop = "id", label = "主鍵", addDisplay = false, editDisabled = true, search = true)
    private String id;

    @AVueInput(prop = "username", label = "用戶名稱", search = true)
    private String username;

    @AVueSelect(prop = "checkStatus", label = "認(rèn)證狀態(tài)", dicData = "CheckStatusEnums", search = true)
    private String checkStatus;

    @AVueSelect(prop = "likeStar", label = "喜歡明星", dicData = "test-likeStar-map")
    private Integer likeStar;

    @AVueNumber(prop = "age", label = "年齡", labelTip = "這是選擇年齡的地方")
    private Integer age;

    @AVueRadio(prop = "sex", label = "性別", border = true, dicData = "SexEnums")
    private int sex;

    @AVueDatetime(prop = "validDate", label = "有效時間")
    private Date validDate;

    @AVueTime(prop = "time", label = "時分秒選擇")
    private Date time;

    @AVueTimeRange(prop = "timeRange", label = "時分秒范圍")
    private Date timeRange;

    @AVueDateRange(prop = "dateRange", rangeSeparator = "-", label = "日期范圍", search = true, valueFormat = "yyyy年MM月dd日", format = "yyyy-MM-dd")
    private String dateRange;

    @AVueCheckbox(prop = "interest", label = "興趣愛好", dicData = "InterestEnums")
    private List<String> interest;

    @AVueSwitch(prop = "status", label = "狀態(tài)", dicData = "StatusEnums")
    private int status;

    @AVueDynamic(prop = "simpleModel", label = "子表單測試")
    private AVueSimpleModel simpleModel;

    @AVueGroup(prop = "groupModel", label = "分組測試1")
    private AVueNodeModel groupModel;

    @AVueGroup(prop = "groupModel2", label = "分組測試2")
    private AVueNodeModel groupModel2;
    // 省略get/set .... 其實如果只作為模版的話不需要getset.
}

相關(guān)案例模版，后續(xù)會繼續(xù)補充

3. 頁面展示

1. 列表頁效果

image

2. 新增頁面效果

image

3. 修改效果

修改

動態(tài)效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4uAM5kLE-1638426875013)(ruoyi-avue-client/README.assets/6d4ftd.gif)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Sqrkx22s-1638426875015)(ruoyi-avue-client/README.assets/xyju9p.gif)]

特別感謝

如果你有比較好的想法或者建議請加QQ : 444368875 或者發(fā)送郵件 444368875@qq.com

希望大家多多支持，我會時刻關(guān)注并且加以改進。