上个小节我们编写后端代码，可以生成用户签名，也可以查询出来视频会议室的RoomId，这点工作还不算什么，本小节我们把meeting_video.vue页面的视频墙给生成出来。

比如某个线上会议的参会人有20人，我们进入到meeting_video.vue页面，可以看到视频墙。没有进入会议的参会人，在视频墙上以头像和姓名显示。看样子，我们得写程序把所有参会人信息查询出来。

一、编写持久层代码

在TbMeetingDao.xml文件中，定义SQL语句。

<select id="searchOnlineMeetingMembers" parameterType="HashMap" resultType="HashMap">
    SELECT u.id,
           u.name,
           u.photo,
           IF( u.id = #{userId}, 1, 0 ) AS mine
    FROM tb_meeting m
    JOIN tb_user u ON JSON_CONTAINS ( m.members, CAST( u.id AS CHAR ) )
    WHERE m.id = #{meetingId} AND u.`status` = 1
    ORDER BY mine DESC
</select>

在TbMeetingDao.java接口中，定义DAO方法。

public interface TbMeetingDao {
    ……
    public ArrayList<HashMap> searchOnlineMeetingMembers(HashMap param);
}

二、编写业务层代码

在MeetingService.java接口中，定义抽象方法。

public interface MeetingService {
    ……
    public ArrayList<HashMap> searchOnlineMeetingMembers(HashMap param);
}

在MeetingServiceImpl.java类中，实现抽象方法。

public class MeetingServiceImpl implements MeetingService {
    ……
    @Override
    public ArrayList<HashMap> searchOnlineMeetingMembers(HashMap param) {
        ArrayList<HashMap> list = meetingDao.searchOnlineMeetingMembers(param);
        return list;
    }
}

三、编写Web层代码

创建SearchOnlineMeetingMembersForm.java类，封装Ajax提交的数据。

@Data
@Schema(description = "查询线上会议成员")
public class SearchOnlineMeetingMembersForm {
    @NotNull(message = "meetingId不能为空")
    @Min(value = 1, message = "meetingId不能小于1")
    @Schema(description = "会议ID")
    private Integer meetingId;
}

在MeetingController.java类中，定义Web方法。

public class MeetingController {
    ……
    @PostMapping("/searchOnlineMeetingMembers")
    @Operation(summary = "查询线下会议成员")
    @SaCheckLogin
    public R searchOnlineMeetingMembers(@Valid @RequestBody SearchOnlineMeetingMembersForm form) {
        HashMap param = JSONUtil.parse(form).toBean(HashMap.class);
        param.put("userId", StpUtil.getLoginIdAsInt());
        ArrayList<HashMap> list = meetingService.searchOnlineMeetingMembers(param);
        return R.ok().put("list", list);
    }
}