多条件查询记录是经常需要进行编写的功能，这里就以多条件查询历史聊天记录为例子来介绍如何进行基于关键字、日期、聊天记录类型 三种条件进行模糊查询、日期拼接、条件拼接查询。
前端 抽屉管理首先我们控制 element ui 的 抽屉的打开与关闭
这里可能会出现父子组件传值的错误，详情请看这篇文章
https://blog.csdn.net/qq_45803593/article/details/125546395
由于 element ui 的 el-date-picker 组件也存在父子组件关系，所以这个还会报错，但是不影响使用了
日期查询配置日期查询我们就使用 element ui 的 date-picker 组件
- format：选中日期后显示在页面时的格式
- value-format： 选中日期后传值时的格式
- picker-options：这里我们绑定一个选中日期不可超过今天的规定
- change：在我们更换日期后，检测到立刻重新请求聊天记录
必须晚于今天
pickerOptions: { // 必须晚于今天
disabledDate (time) {
return time.getTime() > Date.now()
}
},
首次加载数据
首次加载时，我们首先将起始的页码设置为了 1，首次应该加载第 0 页，所以我们直接将 pageIndex 进行 -1 操作，此时的分页组件上就会显示第一页的高亮了，而且访问到的数据也是真正的第一页
pageIndex: this.pageIndex - 1,每次切换加载的记录
当切换的时候组件没有进行销毁，所以历史记录所在的抽屉的数据不会变化，因此我们每次加载时切换会话，每个会话都有唯一的 roomId，我们将其作为 key 进行属性的绑定，此时组件就会重新生成了
虚拟DOM中key的作用
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
对比规则：
就虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变，直接使用之前的真实DOM！
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
就虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面。
前端全部代码
MyMain.vue
历史记录
发送
HistoryMessage.vue
没有数据~
HistoryMessageItem
后端
分页信息
首先我们将页码与页面大小取出，这里我们将起始页码进行 + 1 操作，是因为 element ui 的分页组件默认第一页为 0，而我们的 mybatis-plus 默认的第一页为 1，所以我们需要为其进行调整
Page查询指定日期记录page = new Page<>(historyMsgRequestVo.getPageIndex() + 1, historyMsgRequestVo.getPageSize());
由于我们使用 mybatis-plus，所以在查询时我们直接按照官方提供的函数来进行 sql 语句的拼接
applyapply(String applySql, Object... params) apply(boolean condition, String applySql, Object... params)
- 拼接 sql
注意事项:
该方法可用于数据库函数 动态入参的params对应前面applySql内部的{index}部分.这样是不会有sql注入风险的,反之会有!
例: apply("id = 1")—>id = 1
例: apply("date_format(dateColumn,'%Y-%m-%d') = '2008-08-08'")—>date_format(dateColumn,'%Y-%m-%d') = '2008-08-08'")
例: apply("date_format(dateColumn,'%Y-%m-%d') = {0}", "2008-08-08")—>date_format(dateColumn,'%Y-%m-%d') = '2008-08-08'")
if(StringUtils.isNotEmpty(historyMsgRequestVo.getDate())){
wrapper.apply("date_format(create_time,'%Y-%m-%d') = '" + historyMsgRequestVo.getDate() + "'");
}
模糊查询
最后就是我们要进行模糊查询了，我们的思路是
- 如果为全部聊天记录
- 如果关键字不为空，就对聊天文本内容 message 和聊天文件原名 file_original_name 进行查询
- 注意我们使用了 .or() 来进行查询
- 如果不为全部内容
- 判断是否为文件或者图片类型，然后我们对其原文件名进行模糊查询
// 如果为文件或者图片
if(!historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_ALL)){
wrapper.eq(historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_IMG), "message_type", 2)
.eq(historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_FILE), "message_type", 3)
.like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "file_original_name", historyMsgRequestVo.getKeyword());
}else {
wrapper.like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "message", historyMsgRequestVo.getKeyword())
.or().like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "file_original_name", historyMsgRequestVo.getKeyword());
}
后端全部代码
@Override
public IPage getGroupHistoryMessages(HistoryMsgRequestVo historyMsgRequestVo) {
Page page = new Page<>(historyMsgRequestVo.getPageIndex() + 1, historyMsgRequestVo.getPageSize());
QueryWrapper wrapper = new QueryWrapper<>();
wrapper.eq("room_id", historyMsgRequestVo.getRoomId());
// 日期条件存在
if(StringUtils.isNotEmpty(historyMsgRequestVo.getDate())){
wrapper.apply("date_format(create_time,'%Y-%m-%d') = '" + historyMsgRequestVo.getDate() + "'");
}
// 如果为文件或者图片
if(!historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_ALL)){
wrapper.eq(historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_IMG), "message_type", 2)
.eq(historyMsgRequestVo.getType().equals(ConstValueEnum.MESSAGE_TYPE_FILE), "message_type", 3)
.like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "file_original_name", historyMsgRequestVo.getKeyword());
}else {
wrapper.like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "message", historyMsgRequestVo.getKeyword())
.or().like(StringUtils.isNotEmpty(historyMsgRequestVo.getKeyword()), "file_original_name", historyMsgRequestVo.getKeyword());
}
Page groupMessagePage = baseMapper.selectPage(page, wrapper);
return groupMessagePage;
}
暑期编程PK赛
得CSDN机械键盘等精美礼品！
