若依RuoYi-Vue下拉列表关联数据代码解读

情形

现有岗位管理页面专用于维护岗位信息，如下图

在用户管理页面，需要通过下拉列表选中岗位数据。如下图

用户管理页面的岗位下拉列表数据和岗位管理中的数据连接，实现通过web页面的数据维护

前端

定位此功能前端代码位置

启动项目，在web界面按住F12键打开调试页面

若在之前的调试过程中存在有残留信息，建议清空内容，便于查看当前所调试的功能信息

清除内容后，打开目标页面（查看在页面加载时出现的路径）

发现URL    localhost/dev-api/system/user/

JS文件

找对应的JS文件，按照目录在src/api下找/system/user文件

接着使用搜索快捷键Ctrl+F对调用/system/user/的方法进行寻找，发现方法getUser

代码解读

// 查询用户详细
export function getUser(userId) {
  return request({
    url: '/system/user/' + parseStrEmpty(userId),
    method: 'get'
  })
}

url             是访问后端接口的地址 

userId       传入此参数

method     为请求方法

请求方式
GET	获取数据，类似于数据库中的select
PUT	发送数据，类似于数据库的insert操作
POST	发送数据，类似于数据库的update操作
DELETE	删除数据，类似于数据库中的delete操作

vue文件

找对应的vue文件：vue文件全在src/views目录下，继续按照system/user/找

在vue文件中找岗位涉及的代码：使用Ctrl+F搜索

解读代码

<el-form-item label="岗位">

<el-select v-model="form.postIds" multiple placeholder="请选择岗位">

会展现给用户的值：label="岗位"，placeholder="请选择岗位"，:label="  "

v-model：是当前选框选中的值(即选框显示的值) 对应value的值

<el-select >中可以添加的一些功能效果:

清空已选中的项	clearable=""
启用多选	multiple
可搜索	filterable

 v-for="item in postOptions"

使用选项绑定数组，通过v-for循环进行动态绑定。从而展现列表中多个数据

item                    个人理解像是for(int i=0;i<10;i++)里面的i

postOptions       就是自定义的数组，用来存放数据

在后面的按钮对应调用的方法中也有使用postOptions

<el-option
  v-for="item in postOptions"
  :key="item.postId"
  :label="item.postName"
  :value="item.postId"
  :disabled="item.status == 1"
></el-option>

option选项参数含义

key	相当于身份令牌，防止出错。作为 value 唯一标识的键名
label	点击下拉菜单时，用户看到的选项就是这个
value	点击某个label(option)之后，前端往后端传递的真实值
disabled	选择器禁用状态

对比后端对象的定义查看参数值的含义

后端

controller层

为什么先看这层？可以阅读我的上一篇文章若依RuoYi-Vue三层架构理解

 

 因为url是system/user/所以找的是system下的user的controller文件

打开文件SysUserController，通过注解定位代码位置system/user/

先找到路径  system/user  还缺少一个  /  继续往下找

结合前端代码信息找到“岗位”功能对应的接口方法

发现方法  selectPostAll()  既对应了前端的post字段，又对应了路径  system/user/  

Ctrl+鼠标左键点击方法名进入server层

server层

点击这个绿色圆标进入impl

mapper层

继续Ctrl+左键点击方法名，进入mapper

点击绿色箭头进入xml文件，查看SQL语句

数据库表sys_post