若依(ruoyi)開源系統保姆級實踐-完成第一個頁面

一、案例描述

若依官網文檔地址：http://doc.ruoyi.vip/ruoyi/document/hjbs.html
本教程主要內容，自定義數據庫表，使用若依開源系統生成代碼並配置權限。

1. 若依環境配置
2. 新建數據表t_user，利用若依代碼生成工具生成服務端及頁面代碼。
3. 菜單配置
4. 權限配置

二、若依環境搭建

選用ry-vue版本，項目地址：https://gitee.com/y_project/RuoYi-Vue.git

1. 本地新建數據庫ry-vue，使用項目中的ry_20230706.sql和quartz.sql初始化數據庫表及數據。

2. 修改項目中application-druid.yml的數據庫連接串。

3. 啓動SpringBoot服務端，管理後臺所在路徑是ruoyi-admin，默認端口是8080。
   

4. 啓動前端項目，目錄是ruoyi-ui。命令行是

npm install
npm run dev

二、代碼生成

1. 新建表

CREATE TABLE `t_user` (
  `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主鍵ID',
  `name` varchar(30) NOT NULL DEFAULT '' COMMENT '姓名',
  `age` int(11) NULL DEFAULT NULL COMMENT '年齡',
  `gender` tinyint(2) NOT NULL DEFAULT 0 COMMENT '性別，0：女 1：男',
  PRIMARY KEY (`id`)
) COMMENT = '用戶表';

2. 在系統工具->代碼生成頁面，導入表t_user

3. 編輯生成工具
   
   

4. 生成壓縮包，解壓複製到相應的目錄。

三、若依後臺配置菜單

我們新定義兩級菜單“自定義>>外包用戶管理”。這個操作比較簡單，如下圖所示：

要注意的是路由地址和組件路徑，要與項目中的路徑一致。
重啓項目看效果：

四、權限配置

我們新配置一個賬戶jingyes，專門用於管理外包用戶。

1. 先新增角色 外包管理，菜單權限對應我們剛剛新加的菜單。
   

2. 添加用戶，角色設置爲剛剛新增的 外包管理員
   注意：用戶名稱是登錄賬號，用戶暱稱是個稱呼，我一開始就搞反了。
   

3. 使用新的用戶賬號登錄，左側菜單展示正常，但是頁面中沒有操作按鈕。
   

4. 爲了正常使用操作按鈕，我們需要爲每個操作配置對應的權限菜單。首先看下TUserController中有哪些action需要配置權限，然後在菜單管理中配置相應的按鈕。

@RestController
@RequestMapping("/jingyes/tuser")
public class TUserController extends BaseController
{
    @Autowired
    private ITUserService tUserService;

    /**
     * 查詢用戶列表
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:list')")
    @GetMapping("/list")
    public TableDataInfo list(TUser tUser)
    {
        startPage();
        List<TUser> list = tUserService.selectTUserList(tUser);
        return getDataTable(list);
    }

    /**
     * 導出用戶列表
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:export')")
    @Log(title = "用戶", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, TUser tUser)
    {
        List<TUser> list = tUserService.selectTUserList(tUser);
        ExcelUtil<TUser> util = new ExcelUtil<TUser>(TUser.class);
        util.exportExcel(response, list, "用戶數據");
    }

    /**
     * 獲取用戶詳細信息
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:query')")
    @GetMapping(value = "/{id}")
    public AjaxResult getInfo(@PathVariable("id") Long id)
    {
        return success(tUserService.selectTUserById(id));
    }

    /**
     * 新增用戶
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:add')")
    @Log(title = "用戶", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody TUser tUser)
    {
        return toAjax(tUserService.insertTUser(tUser));
    }

    /**
     * 修改用戶
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:edit')")
    @Log(title = "用戶", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody TUser tUser)
    {
        return toAjax(tUserService.updateTUser(tUser));
    }

    /**
     * 刪除用戶
     */
    @PreAuthorize("@ss.hasPermi('jingyes:tuser:remove')")
    @Log(title = "用戶", businessType = BusinessType.DELETE)
	@DeleteMapping("/{ids}")
    public AjaxResult remove(@PathVariable Long[] ids)
    {
        return toAjax(tUserService.deleteTUserByIds(ids));
    }
}

例如新增按鈕，權限配置如下圖所示，權限字符要和代碼中對應。其他都類似

添加完成後的效果如下，總共配置了這些操作按鈕的權限。

5. 最後記得給外包管理員的角色勾選上這些權限
   

6. 再次切換賬號登錄，頁面功能已經ok。
   

---

本人公衆號[ 敬YES ]同步更新，歡迎大家關注~