Skip to content

9.群聊记录的管理

Jump to bottom
JustCoding-Hai edited this page Nov 8, 2020 · 1 revision

1.分页数据返回 与用户数据的分页查询相似，GroupMsgContentController 的具体代码：

    /**
     * 分页返回数据
     * @author luo
     * @param page 页数
     * @param size 单页大小
     * @param nickname 发送者昵称
     * @param type 消息类型
     * @param dateScope 发送时间范围
     * @return
     */
    @GetMapping("/page")
    public RespPageBean getAllGroupMsgContentByPage(@RequestParam(value = "page",defaultValue = "1") Integer page,
                                                    @RequestParam(value = "size",defaultValue = "10") Integer size,
                                                    String nickname, Integer type,
                                                    Date[] dateScope){
        return groupMsgContentService.getAllGroupMsgContentByPage(page,size,nickname,type,dateScope);
    }

GroupMsgContentService服务层处理：

    @Override
    public RespPageBean getAllGroupMsgContentByPage(Integer page, Integer size, String nickname, Integer type, Date[] dateScope) {
        if (page!=null&&size!=null){
            page=(page-1)*size;
        }
        List<GroupMsgContent> allGroupMsgContentByPage = groupMsgContentDao.getAllGroupMsgContentByPage(page, size, nickname, type, dateScope);
        Long total=groupMsgContentDao.getTotal(nickname, type, dateScope);
        RespPageBean respPageBean = new RespPageBean();
        respPageBean.setData(allGroupMsgContentByPage);
        respPageBean.setTotal(total);
        return respPageBean;
    }

GroupMsgContentDao.xml

<select id="getAllGroupMsgContentByPage" resultMap="GroupMsgContentMap">
        select * from chatroom.group_msg_content where 1=1
        <if test="nickname!=null and nickname!=''">
            and from_name like concat('%',#{nickname},'%')
        </if>
        <if test="type!=null">
            and message_type_id=#{type}
        </if>
        <if test="dateScope!=null">
            and create_time between #{dateScope[0]} and #{dateScope[1]}
        </if>
        <if test="page!=null and size!=null">
            limit #{page},#{size}
        </if>
    </select>
    <select id="getTotal" resultType="java.lang.Long">
        select count(*) from chatroom.group_msg_content where 1=1
        <if test="nickname!=null and nickname!=''">
            and from_name like concat('%',#{nickname},'%')
        </if>
        <if test="type!=null">
            and message_type_id=#{type}
        </if>
        <if test="dateScope!=null and dateScope!=''">
            and create_time between #{dateScope[0]} and #{dateScope[1]}
        </if>
    </select>

这里的查询条件分别为发送者昵称，消息类型，发送时间。 消息类型，定义了一个消息类型表，消息的消息类型id与消息类型表的数据id存在外键关联。前端查询传入的是消息类型id而不是消息类型名。

发送时间使用SQL语句中的between限定查询的消息内容的发送时间范围。

删除： 前端vue页面在GroupchatRecord.vue中显示

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

自定义表格每一列的显示元素，使用slot-scope=“scope”，其中scope包含了当前行的所有数据。@click点击触发函数handleDelete(scope.row)。函数中data.id就是当前群聊消息的id，传入后端的接口，就能根据id删除当前数据。

      //单条数据删除
      handleDelete(data){
        this.$confirm('此操作将永久删除该条消息记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击确定后即执行
          this.deleteRequest("/groupMsgContent/"+data.id).then(resp=>{
            if (resp){
              this.initMessTableData();
            }
          })
        }).catch(() => {
          //点击了取消
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

批量删除

    <el-table
            :data="messTableData"
            v-loading="loading"
            border
            stripe
            @selection-change="handleSelectionChange"
            style="width: 100%">

在表格属性中加入@selection-change="handleSelectionChange"，绑定了handleSelectionChange，复选框每一改变（点击或取消）就触发了handleSelectionChange。回调返回的是当前选中的消息的id数组

     //当选择项发生变化时会触发该事件
      handleSelectionChange(val){
        this.multipleSelection=val;
      },

点击按钮批量删除后，执行以下方法： 使用Java Script中的forEach方法遍历this.multipleSelection数组获取ids， 最后请求的url类似：/groupMsgContent/?ids=1&ids=3&

 //批量删除数据
      handleMultiDelete(){
        this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url="/groupMsgContent/?";
          this.multipleSelection.forEach(item=>{
            url+="ids="+item.id+"&";
          });
          this.deleteRequest(url).then(resp=>{
            if (resp){
              this.initMessTableData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

后端GroupMsgContentController中的以下接口获取到值保存到ids数组中

    @DeleteMapping("/")
    public RespBean deleteGroupMsgContentByIds(Integer[] ids){
        if (groupMsgContentService.deleteGroupMsgContentByIds(ids)==ids.length){
            return RespBean.ok("删除成功！");
        }else {
            return RespBean.error("删除失败！");
        }
    }

将ids传到GroupMsgContentDao .xml中，

    <delete id="deleteGroupMsgContentByIds">
        delete from group_msg_content where id in
        <foreach collection="ids" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </delete>

这里使用到了MyBatis的标签，collection表示要循环的数组，item为数组的每个元素，open表示SQL语句的第一个字符为“（”，close表示SQL语句的最后一个字符为“）”。separator表示每个元素的间隔为“，”

最后生成的语句类似：

   delete from group_msg_content where id in (1,2,4,8)

https://blog.csdn.net/qq_40437152/article/details/83340977

Clone this wiki locally