若依(ruoyi)开源系统保姆级实践-完成第一个页面

一、案例描述

若依官网文档地址：http://doc.ruoyi.vip/ruoyi/document/hjbs.html
本教程主要内容，自定义数据库表，使用若依开源系统生成代码并配置权限。

• 若依环境配置
  
• 新建数据表t_user，利用若依代码生成工具生成服务端及页面代码。
  
• 菜单配置
  
• 权限配置
  

二、若依环境搭建

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

• 本地新建数据库ry-vue，使用项目中的ry_20230706.sql和quartz.sql初始化数据库表及数据。
  
• 修改项目中application-druid.yml的数据库连接串。
  
• 启动SpringBoot服务端，管理后台所在路径是ruoyi-admin，默认端口是8080。
  
  
• 启动前端项目，目录是ruoyi-ui。命令行是
  

1. npm install
2. npm run dev

复制代码

二、代码生成

• 新建表
  

1. CREATE TABLE `t_user` (
2.   `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键ID',
3.   `name` varchar(30) NOT NULL DEFAULT '' COMMENT '姓名',
4.   `age` int(11) NULL DEFAULT NULL COMMENT '年龄',
5.   `gender` tinyint(2) NOT NULL DEFAULT 0 COMMENT '性别，0：女 1：男',
6.   PRIMARY KEY (`id`)
7. ) COMMENT = '用户表';

复制代码

• 在系统工具->代码生成页面，导入表t_user
  
• 编辑生成工具
  
  
  
• 生成压缩包，解压复制到相应的目录。
  

三、若依后台配置菜单

我们新定义两级菜单“自定义>>外包用户管理”。这个操作比较简单，如下图所示：


要注意的是路由地址和组件路径，要与项目中的路径一致。
重启项目看效果：

四、权限配置

我们新配置一个账户jingyes，专门用于管理外包用户。

• 先新增角色 外包管理，菜单权限对应我们刚刚新加的菜单。
  
  
• 添加用户，角色设置为刚刚新增的 外包管理员
  注意：用户名称是登录账号，用户昵称是个称呼，我一开始就搞反了。
  
  
• 使用新的用户账号登录，左侧菜单展示正常，但是页面中没有操作按钮。
  
  
• 为了正常使用操作按钮，我们需要为每个操作配置对应的权限菜单。首先看下TUserController中有哪些action需要配置权限，然后在菜单管理中配置相应的按钮。
  

1. @RestController
2. @RequestMapping("/jingyes/tuser")
3. public class TUserController extends BaseController
4. {
5.     @Autowired
6.     private ITUserService tUserService;
8.     /**
9.      * 查询用户列表
10.      */
11.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:list')")
12.     @GetMapping("/list")
13.     public TableDataInfo list(TUser tUser)
14.     {
15.         startPage();
16.         List<TUser> list = tUserService.selectTUserList(tUser);
17.         return getDataTable(list);
18.     }
20.     /**
21.      * 导出用户列表
22.      */
23.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:export')")
24.     @Log(title = "用户", businessType = BusinessType.EXPORT)
25.     @PostMapping("/export")
26.     public void export(HttpServletResponse response, TUser tUser)
27.     {
28.         List<TUser> list = tUserService.selectTUserList(tUser);
29.         ExcelUtil<TUser> util = new ExcelUtil<TUser>(TUser.class);
30.         util.exportExcel(response, list, "用户数据");
31.     }
33.     /**
34.      * 获取用户详细信息
35.      */
36.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:query')")
37.     @GetMapping(value = "/{id}")
38.     public AjaxResult getInfo(@PathVariable("id") Long id)
39.     {
40.         return success(tUserService.selectTUserById(id));
41.     }
43.     /**
44.      * 新增用户
45.      */
46.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:add')")
47.     @Log(title = "用户", businessType = BusinessType.INSERT)
48.     @PostMapping
49.     public AjaxResult add(@RequestBody TUser tUser)
50.     {
51.         return toAjax(tUserService.insertTUser(tUser));
52.     }
54.     /**
55.      * 修改用户
56.      */
57.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:edit')")
58.     @Log(title = "用户", businessType = BusinessType.UPDATE)
59.     @PutMapping
60.     public AjaxResult edit(@RequestBody TUser tUser)
61.     {
62.         return toAjax(tUserService.updateTUser(tUser));
63.     }
65.     /**
66.      * 删除用户
67.      */
68.     @PreAuthorize("@ss.hasPermi('jingyes:tuser:remove')")
69.     @Log(title = "用户", businessType = BusinessType.DELETE)
70.         @DeleteMapping("/{ids}")
71.     public AjaxResult remove(@PathVariable Long[] ids)
72.     {
73.         return toAjax(tUserService.deleteTUserByIds(ids));
74.     }
75. }

复制代码

例如新增按钮，权限配置如下图所示，权限字符要和代码中对应。其他都类似

添加完成后的效果如下，总共配置了这些操作按钮的权限。

• 最后记得给外包管理员的角色勾选上这些权限
  
  
• 再次切换账号登录，页面功能已经ok。
  
  

本人公众号[ 敬YES ]同步更新，欢迎大家关注~



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！