【项目】仿牛客网社区开发第3章 Spring Boot 实践开发社区核心功能 8 发送私信

蔚落 2024-03-22 12:19 9阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第3章 Spring Boot 实践 开发社区核心功能
         *   *  8 发送私信

![在这里插入图片描述][c7f732d6212b4397a5f68517b6fe704f.png_pic_center]

#### 第3章 Spring Boot 实践 开发社区核心功能 ####

##### 8 发送私信 #####

*  发送私信
    
     *  采用异步的方式发送私信。
     *  发送成功后刷新私信列表。
 *  设置已读
    
     *  访问私信详情时， 将显示的私信设置为已读状态。

![在这里插入图片描述][a181cc53dbed48a8b6883878f396e735.png_pic_center]

首先是数据层

![在这里插入图片描述][6b76993fa5e74937975be8f13496db92.png_pic_center]

在映射文件中实现这两个方法

<sql id="insertFields">
            from_id
            , to_id, conversation_id, content, status, create_time
        </sql>
    
        <insert id="insertMessage" parameterType="Message" keyProperty="id">
            insert into message(<include refid="insertFields"></include>)
            values(#{fromId},#{toId},#{conversationId},#{content},#{status},#{createTime})
        </insert>
    
        <update id="updateStatus">
            update message set status = #{status}
            where id in
            <foreach collection="ids" item="id" open="(" separator="," close=")">
                #{id}
            </foreach>
        </update>

![在这里插入图片描述][8848e737253e4efba3bf0a1948b593c8.png_pic_center]

接下来是业务层

public int addMessage(Message message) {
        
            message.setContent(HtmlUtils.htmlEscape(message.getContent()));
            message.setContent(sensitiveFilter.filter(message.getContent()));
            return messageMapper.insertMessage(message);
        }
    
        public int readMessage(List<Integer> ids) {
        
            return messageMapper.updateStatus(ids, 1);
        }

这里注入了我们自己那个过滤敏感词bean

最后就是表现层了，先把接口搞出来

@RequestMapping(path = "/letter/send", method = RequestMethod.POST)
        @ResponseBody
        public String sendLetter(String toName, String content) {
        
            User target = userService.findUserByName(toName);
            if (target == null) {
        
                return CommunityUtil.getJSONString(1, "目标用户不存在!");
            }
    
            Message message = new Message();
            message.setFromId(hostHolder.getUser().getId());
            message.setToId(target.getId());
            if (message.getFromId() < message.getToId()) {
        
                message.setConversationId(message.getFromId() + "_" + message.getToId());
            } else {
        
                message.setConversationId(message.getToId() + "_" + message.getFromId());
            }
            message.setContent(content);
            message.setCreateTime(new Date());
            messageService.addMessage(message);
    
            return CommunityUtil.getJSONString(0);
        }

![在这里插入图片描述][214e8c42f4a348128ae478844f63d70c.png_pic_center]

更改前端模板，

![在这里插入图片描述][e11b52088d024516990bb0754f20ec90.png_pic_center]

就是发给那个人名要写活一下

![在这里插入图片描述][cd5ba76301374955af7cb21b62ff7b7e.png_pic_center]

这个东西是通过JavaScript 实现的

修改`letter.js`

$(function(){
        
    	$("#sendBtn").click(send_letter);
    	$(".close").click(delete_msg);
    });
    
    function send_letter() {
        
    	$("#sendModal").modal("hide");
    
    	var toName = $("#recipient-name").val();
    	var content = $("#message-text").val();
    	$.post(
    		CONTEXT_PATH + "/letter/send",
    		{
        "toName":toName,"content":content},
    		function(data) {
        
    			data = $.parseJSON(data);
    			if(data.code == 0) {
        
    				$("#hintBody").text("发送成功!");
    			} else {
        
    				$("#hintBody").text(data.msg);
    			}
    
    			$("#hintModal").modal("show");
    			setTimeout(function(){
        
    				$("#hintModal").modal("hide");
    				location.reload();
    			}, 2000);
    		}
    	);
    }
    
    function delete_msg() {
        
    	// TODO 删除数据
    	$(this).parents(".media").remove();
    }

![在这里插入图片描述][8fd04542c6904a61ad634f5035cc6ab4.png_pic_center]

启动服务器测试一下

![在这里插入图片描述][aced1d66cabb4c04ba4dae4a3f988e48.png_pic_center]

当前登录用户是aaa，用它发私信给 `dingjiaxiong`

![在这里插入图片描述][57a692ce95314a47893b7d7ee03c53f4.png_pic_center]

![在这里插入图片描述][a4101726f93a443c92c2980e0ff517c6.png_pic_center]

如果名字写错了，应该提示信息

![在这里插入图片描述][e3a36ef45fa64a53a4097850dc7db1a7.png_pic_center]

然后就啥也没发生，正常发一个

![在这里插入图片描述][7c276e7f57814257bbf31a191fa3ed3e.png_pic_center]

直接发送

![在这里插入图片描述][c65b69b8a88c45b2872dde5ec1284207.png_pic_center]

![在这里插入图片描述][73ada8f4511b42aa8b3d360e9b666511.png_pic_center]

这是在外面发，点进到会话详细再发一个

![在这里插入图片描述][dd28a6e884d54e7b91118e3122ca9f3c.png_pic_center]

![在这里插入图片描述][6ba39cbc35e44fc1bbd21f9196f8cd63.png_pic_center]

这里还有点问题，没显示出来，是detail 的名字

![在这里插入图片描述][e2020e6361f1482fac21bdf4a5b636dc.png_pic_center]

这个，重启下服务器，再来一次

![在这里插入图片描述][e5d9c91f80fa49ea960420dd493ce33d.png_pic_center]

这下对了，它应该自动填充进去，

![在这里插入图片描述][8a2e5198ef754b06a3743f22d2679626.png_pic_center]

![在这里插入图片描述][c7261f9eb85342ce92605c194a870881.png_pic_center]

OK， 发送成功。

我们先把未读已读功能实现，再切到dingjiaxiong 用户看看

修改一下控制器

// 详情页面
        @RequestMapping(path = "/letter/detail/{conversationId}", method = RequestMethod.GET)
        public String getLetterDetail(@PathVariable("conversationId") String conversationId, Page page, Model model) {
        
            // 分页信息
            page.setLimit(5);
            page.setPath("/letter/detail/" + conversationId);
            page.setRows(messageService.findLetterCount(conversationId));
    
            // 私信列表
            List<Message> letterList = messageService.findLetters(conversationId, page.getOffset(), page.getLimit());
            List<Map<String, Object>> letters = new ArrayList<>();
            if (letterList != null) {
        
                for (Message message : letterList) {
        
                    Map<String, Object> map = new HashMap<>();
                    map.put("letter", message);
                    map.put("fromUser", userService.findUserById(message.getFromId()));
                    letters.add(map);
                }
            }
            model.addAttribute("letters", letters);
    
            // 私信目标
            model.addAttribute("target", getLetterTarget(conversationId));
    
            // 设置已读
            List<Integer> ids = getLetterIds(letterList);
            if (!ids.isEmpty()) {
        
                messageService.readMessage(ids);
            }
    
            return "/site/letter-detail";
        }
    
        private List<Integer> getLetterIds(List<Message> letterList) {
        
            List<Integer> ids = new ArrayList<>();
    
            if (letterList != null) {
        
                for (Message message : letterList) {
        
                    if (hostHolder.getUser().getId() == message.getToId() && message.getStatus() == 0) {
        
                        ids.add(message.getId());
                    }
                }
            }
    
            return ids;
        }

OK，重启服务器看看效果

![在这里插入图片描述][63d2a1f5214e4bbb87e24542f884b117.png_pic_center]

这两条消息dingjiaxiong 肯定是未读的，现在登录一下dingjiaxiong 的账号

![在这里插入图片描述][b9a5160e2d3e42b9a1fdda75bf6bbe54.png_pic_center]

点开消息

![在这里插入图片描述][8b901baaa49c4ffe9cea1f587fe23469.png_pic_center]

OK， 两条来自aaa 的消息，点进去

![在这里插入图片描述][64698d89beb945dda7e523d9ddf23b93.png_pic_center]

这样就算已读了，返回

![在这里插入图片描述][d274b7db1f4549499ed1bdc520442968.png_pic_center]

红星就没了。这样就是已读私信的状态了。

【课后作业，是开发删除私信的功能，即点击某条私信的删除按钮时，将其状态设置为删除态】

实现一下

首先是业务：

public int deleteMessage(int id) {
        
            return messageMapper.updateStatus(Arrays.asList(new Integer[]{
        id}), 2);
        }

![在这里插入图片描述][cbfbaeff79644deda9533d2eb26e61fb.png_pic_center]

然后是表现层：

// 删除私信
        @RequestMapping(path = "/letter/delete", method = RequestMethod.POST)
        @ResponseBody
        public String deleteLetter(int id) {
        
            messageService.deleteMessage(id);
            return CommunityUtil.getJSONString(0);
        }

![在这里插入图片描述][2798664f979e4ca080b4f106c224c9d6.png_pic_center]

接着就是修改前端模板了

![在这里插入图片描述][13c8648474dd492fb05a258baac502aa.png_pic_center]

这里主要是在JavaScript 中进行实现

![在这里插入图片描述][4f35955271f74384a686bd4d0be96120.png_pic_center]

就这个，其实之前已经写好了，但是没有去实现

![在这里插入图片描述][d5bc881379db46ee8c9418a65596df0f.png_pic_center]

OK， 运行重启看看

![在这里插入图片描述][9908e7b8568e4ff6b5e7795367da3674.png_pic_center]

点击这个删除按钮

![在这里插入图片描述][5540d6ee7e65412aa66e3ac2e59284b4.png_pic_center]

![在这里插入图片描述][8464cbccfc2549998fd18fd7dd8585e8.png_pic_center]

可以的，没有任何提示，直接删了，回到aaa 用户

![在这里插入图片描述][29c04105b05e4f739a7d1137a7fbd031.png_pic_center]

![在这里插入图片描述][85f1e5a0e73441e7bac6e076c2cc9a6f.png_pic_center]

确实已经删了

[c7f732d6212b4397a5f68517b6fe704f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f4da03ae3ec44d13a927f094f1e82211.png
[a181cc53dbed48a8b6883878f396e735.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7c2c4c5b64874f8fa8ec45194a4cd8f9.png
[6b76993fa5e74937975be8f13496db92.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/800854183dc34bb5b19b9b1666d27fe3.png
[8848e737253e4efba3bf0a1948b593c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/eeb085e08634464285408ac9455d68b8.png
[214e8c42f4a348128ae478844f63d70c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/399dc6a400aa4ff9846cc3cdef0bc30c.png
[e11b52088d024516990bb0754f20ec90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f013892073d74bc8bfddc2dfdc9826d2.png
[cd5ba76301374955af7cb21b62ff7b7e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a20c364ad49d48c5ade383126bce0a74.png
[8fd04542c6904a61ad634f5035cc6ab4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/17d3f7f7a3ca4ad8b425bdd10b1bd5db.png
[aced1d66cabb4c04ba4dae4a3f988e48.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/350f45df90b3446c8a10cd6789052083.png
[57a692ce95314a47893b7d7ee03c53f4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/961d7d2e974d4b4d96a66534e4bbcfdc.png
[a4101726f93a443c92c2980e0ff517c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a03b73d08ec54b1ea2e74ed0a8389d14.png
[e3a36ef45fa64a53a4097850dc7db1a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/62b0e2fff0744517b09b09558814fecd.png
[7c276e7f57814257bbf31a191fa3ed3e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e4c1ee7ec8fe4f7e8278f1d071abc800.png
[c65b69b8a88c45b2872dde5ec1284207.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/da0b9fee7fb141949e4ebee3b8040b8f.png
[73ada8f4511b42aa8b3d360e9b666511.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5f2dd7e019be45a4800c70263203f854.png
[dd28a6e884d54e7b91118e3122ca9f3c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e10dc559e7cf43c085cb6a3f96f9e339.png
[6ba39cbc35e44fc1bbd21f9196f8cd63.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f03bf46b8ccd49dcbb4f97c13208d03f.png
[e2020e6361f1482fac21bdf4a5b636dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1d8b5aaa14364705951d5c92aa7f0ec9.png
[e5d9c91f80fa49ea960420dd493ce33d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/36a2073a2c5c49eaa1024b2618280289.png
[8a2e5198ef754b06a3743f22d2679626.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/60ccfa7f5e3b4355ac45dcd9d2d29fe8.png
[c7261f9eb85342ce92605c194a870881.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/231103428c8f4cff8558a47278a465e5.png
[63d2a1f5214e4bbb87e24542f884b117.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/37c485917228436baf92626988fe5f55.png
[b9a5160e2d3e42b9a1fdda75bf6bbe54.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/51d5743ddc87493a98ba5fbe7205c0b5.png
[8b901baaa49c4ffe9cea1f587fe23469.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f6505fec42e44efe919cf4889203d892.png
[64698d89beb945dda7e523d9ddf23b93.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cfa6f96a242444a8a6ef3ca85f7c8a00.png
[d274b7db1f4549499ed1bdc520442968.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9fccff04a5a9480e8b1a071061b2c801.png
[cbfbaeff79644deda9533d2eb26e61fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/13d37ed2f80240fda595f3fa400f5404.png
[2798664f979e4ca080b4f106c224c9d6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/545da579cfbc429a8a971c2c0dab02f0.png
[13c8648474dd492fb05a258baac502aa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fb62f304d56d4b2a81205f7b06f48870.png
[4f35955271f74384a686bd4d0be96120.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3499a93d03b64fbbbdb64b55aaac3b12.png
[d5bc881379db46ee8c9418a65596df0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3a3fd45bc3974aea93b4cff7e42a30b9.png
[9908e7b8568e4ff6b5e7795367da3674.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f3e045a8fae24426b25d218da055b34f.png
[5540d6ee7e65412aa66e3ac2e59284b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4622e2de354449de8ba2cb5a53fb8df9.png
[8464cbccfc2549998fd18fd7dd8585e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b81d3593c18f45118d0fffa1c6e73a81.png
[29c04105b05e4f739a7d1137a7fbd031.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/017ff0873a244874a60e56404ed9f020.png
[85f1e5a0e73441e7bac6e076c2cc9a6f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a51c910d5d04466ca25aa543e81c8473.png