问答平台（5），显示系统通知

示意图

显示系统通知-图示

通知列表

1
- 显示评论、点赞、关注三种类型的通知

通知详情

1
- 分页显示某一类主题所包含的通知

未读消息

1
- 在页面头部显示所有的未读消息数量

数据访问层

  • MessageMapper: 添加内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // MessageMapper.java

    // 查询某个主题下最新的通知
    Message selectLatestNotice(int userId, String topic);

    // 查询某个主题所包含的通知数量
    int selectNoticeCount(int userId, String topic);

    // 查询未读的通知数量
    int selectNoticeUnreadCount(int userId, String topic);

    // 查询某个主题所包含的通知列表
    List<Message> selectNotices(int userId, String topic, int offset, int limit);
  • message-mapper.xml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!-- message-mapper.xml -->
    <select id="selectLatestNotice" resultType="Message">
        select
        <include refid="selectFields"></include>
        from message
        where id in (
            select max(id) from message
            where status != 2
            and from_id = 1
            and to_id = #{userId}
            and conversation_id = #{topic}
        )
    </select>

    <select id="selectNoticeCount" resultType="int">
        select count(id) from message
        where status != 2
        and from_id = 1
        and to_id = #{userId}
        and conversation_id = #{topic}
    </select>

    <select id="selectNoticeUnreadCount" resultType="int">
        select count(id) from message
        where status = 0
        and from_id = 1
        and to_id = #{userId}
        <if test="topic!=null">
            and conversation_id = #{topic}
        </if>
    </select>

    <select id="selectNotices" resultType="Message">
        select
        <include refid="selectFields"></include>
        from message
        where status != 2
        and from_id = 1
        and to_id = #{userId}
        and conversation_id = #{topic}
        order by create_time desc
        limit #{offset}, #{limit}
    </select>

业务层

  • MessageService: 增加内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // MessageService.java
    public Message findLatestNotice(int userId, String topic) {
        return messageMapper.selectLatestNotice(userId, topic);
    }

    public int findNoticeCount(int userId, String topic) {
        return messageMapper.selectNoticeCount(userId, topic);
    }

    public int findNoticeUnreadCount(int userId, String topic) {
        return messageMapper.selectNoticeUnreadCount(userId, topic);
    }

    public List<Message> findNotices(int userId, String topic, int offset, int limit) {
        return messageMapper.selectNotices(userId, topic, offset, limit);
    }

表现层

  • MessageController: 增加内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    // MessageController.java
    @RequestMapping(path = "/notice/list", method = RequestMethod.GET)
    public String getNoticeList(Model model) {
        User user = hostHolder.getUser();

        // 查询评论类通知
        Message message = messageService.findLatestNotice(user.getId(), TOPIC_COMMENT);
        if (message != null) {
            Map<String, Object> messageVO = new HashMap<>();
            messageVO.put("message", message);

            // 转义字符（去掉）
            String content = HtmlUtils.htmlUnescape(message.getContent());
            Map<String, Object> data = JSONObject.parseObject(content, HashMap.class);

            messageVO.put("user", userService.findUserById((Integer) data.get("userId")));
            messageVO.put("entityType", data.get("entityType"));
            messageVO.put("entityId", data.get("entityId"));
            messageVO.put("postId", data.get("postId"));

            int count = messageService.findNoticeCount(user.getId(), TOPIC_COMMENT);
            messageVO.put("count", count);

            int unread = messageService.findNoticeUnreadCount(user.getId(), TOPIC_COMMENT);
            messageVO.put("unread", unread);

            model.addAttribute("commentNotice", messageVO);
        }

        // 查询点赞类通知
        message = messageService.findLatestNotice(user.getId(), TOPIC_LIKE);
        if (message != null) {
            Map<String, Object> messageVO = new HashMap<>();
            messageVO.put("message", message);

            String content = HtmlUtils.htmlUnescape(message.getContent());
            Map<String, Object> data = JSONObject.parseObject(content, HashMap.class);

            messageVO.put("user", userService.findUserById((Integer) data.get("userId")));
            messageVO.put("entityType", data.get("entityType"));
            messageVO.put("entityId", data.get("entityId"));
            messageVO.put("postId", data.get("postId"));

            int count = messageService.findNoticeCount(user.getId(), TOPIC_LIKE);
            messageVO.put("count", count);

            int unread = messageService.findNoticeUnreadCount(user.getId(), TOPIC_LIKE);
            messageVO.put("unread", unread);

            model.addAttribute("likeNotice", messageVO);
        }

        // 查询关注类通知
        message = messageService.findLatestNotice(user.getId(), TOPIC_FOLLOW);
        if (message != null) {
            Map<String, Object> messageVO = new HashMap<>();
            messageVO.put("message", message);

            String content = HtmlUtils.htmlUnescape(message.getContent());
            Map<String, Object> data = JSONObject.parseObject(content, HashMap.class);

            messageVO.put("user", userService.findUserById((Integer) data.get("userId")));
            messageVO.put("entityType", data.get("entityType"));
            messageVO.put("entityId", data.get("entityId"));

            int count = messageService.findNoticeCount(user.getId(), TOPIC_FOLLOW);
            messageVO.put("count", count);

            int unread = messageService.findNoticeUnreadCount(user.getId(), TOPIC_FOLLOW);
            messageVO.put("unread", unread);

            model.addAttribute("followNotice", messageVO);
        }

        // 查询未读消息数量
        int letterUnreadCount = messageService.findLetterUnreadCount(user.getId(), null);
        model.addAttribute("letterUnreadCount", letterUnreadCount);
        int noticeUnreadCount = messageService.findNoticeUnreadCount(user.getId(), null);
        model.addAttribute("noticeUnreadCount", noticeUnreadCount);

        return "/site/notice";
    }

    @RequestMapping(path = "/notice/detail/{topic}", method = RequestMethod.GET)
    public String getNoticeDetail(@PathVariable("topic") String topic, Page page, Model model) {
        User user = hostHolder.getUser();

        page.setLimit(5);
        page.setPath("/notice/detail/" + topic);
        page.setRows(messageService.findNoticeCount(user.getId(), topic));

        List<Message> noticeList = messageService.findNotices(user.getId(), topic, page.getOffset(), page.getLimit());
        List<Map<String, Object>> noticeVoList = new ArrayList<>();
        if (noticeList != null) {
            for (Message notice : noticeList) {
                Map<String, Object> map = new HashMap<>();
                // 通知
                map.put("notice", notice);
                // 内容
                String content = HtmlUtils.htmlUnescape(notice.getContent());
                Map<String, Object> data = JSONObject.parseObject(content, HashMap.class);
                map.put("user", userService.findUserById((Integer) data.get("userId")));
                map.put("entityType", data.get("entityType"));
                map.put("entityId", data.get("entityId"));
                map.put("postId", data.get("postId"));
                // 通知作者
                map.put("fromUser", userService.findUserById(notice.getFromId()));

                noticeVoList.add(map);
            }
        }
        model.addAttribute("notices", noticeVoList);

        // 设置已读
        List<Integer> ids = getLetterIds(noticeList);
        if (!ids.isEmpty()) {
            messageService.readMessage(ids);
        }

        return "/site/notice-detail";
    }

拦截器

  • 定义拦截器显示刷新通知页面时，显示所有的通知数（未读私信 + 未读通知）。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // MessageInterceptor.java
    @Component
    public class MessageInterceptor implements HandlerInterceptor {

        @Autowired
        private HostHolder hostHolder;

        @Autowired
        private MessageService messageService;

        @Override
        public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
            User user = hostHolder.getUser();
            if (user != null && modelAndView != null) {
                int letterUnreadCount = messageService.findLetterUnreadCount(user.getId(), null);
                int noticeUnreadCount = messageService.findNoticeUnreadCount(user.getId(), null);
                modelAndView.addObject("allUnreadCount", letterUnreadCount + noticeUnreadCount);
            }
        }
    }

注入拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 包: config
// WebMvcConfig.java

// 添加拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
    //将拦截器加入registry对象
    registry.addInterceptor(alphaInterceptor)
            .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg")
            .addPathPatterns("/register", "/login");

    registry.addInterceptor(loginTicketInterceptor)
            .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");

    registry.addInterceptor(loginRequiredInterceptor)
            .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");

    registry.addInterceptor(messageInterceptor)
            .excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");
}

页面

  • letter.html
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 内容 -->
    <!-- 选项 -->
    <li class="nav-item">
        <a class="nav-link position-relative" th:href="@{/notice/list}">
            系统通知<span class="badge badge-danger" th:text="${noticeUnreadCount}"
                        th:if="${noticeUnreadCount!=0}">27</span>
        </a>
    </li>
  • notice.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    <!-- 内容 -->
    <!-- 选项 -->
     <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
            <a class="nav-link position-relative" th:href="@{/letter/list}">
                朋友私信<span class="badge badge-danger" th:text="${letterUnreadCount}"
                            th:if="${letterUnreadCount!=0}">3</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link position-relative active" th:href="@{/notice/list}">
                系统通知<span class="badge badge-danger" th:text="${noticeUnreadCount}"
                            th:if="${noticeUnreadCount!=0}">27</span>
            </a>
        </li>
    </ul>
    <!-- 通知列表 -->
    <!--评论类通知-->
    <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" th:if="${commentNotice.message!=null}">
        <span class="badge badge-danger"
                th:text="${commentNotice.unread!=0?commentNotice.unread:''}">3</span>
        <img src="http://static.nowcoder.com/images/head/reply.png" class="mr-4 user-header" alt="通知图标">
        <div class="media-body">
            <h6 class="mt-0 mb-3">
                <span>评论</span>
                <span class="float-right text-muted font-size-12"
                        th:text="${#dates.format(commentNotice.message.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-28 14:13:25
                </span>
            </h6>
            <div>
                <a th:href="@{/notice/detail/comment}">
                    用户
                    <i th:utext="${commentNotice.user.username}">nowcoder</i>
                    评论了你的<b th:text="${commentNotice.entityType==1?'帖子':'回复'}">帖子</b> ...
                </a>
                <ul class="d-inline font-size-12 float-right">
                    <li class="d-inline ml-2"><span class="text-primary">共 <i th:text="${commentNotice.count}">3</i> 条会话</span></li>
                </ul>
            </div>
        </div>
    </li>
    <!--点赞类通知-->
    <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" th:if="${likeNotice.message!=null}">
        <span class="badge badge-danger" th:text="${likeNotice.unread!=0?likeNotice.unread:''}">3</span>
        <img src="http://static.nowcoder.com/images/head/like.png" class="mr-4 user-header" alt="通知图标">
        <div class="media-body">
            <h6 class="mt-0 mb-3">
                <span>赞</span>
                <span class="float-right text-muted font-size-12"
                        th:text="${#dates.format(likeNotice.message.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-28 14:13:25
                </span>
            </h6>
            <div>
                <a th:href="@{/notice/detail/like}">
                    用户
                    <i th:utext="${likeNotice.user.username}">nowcoder</i>
                    点赞了你的<b th:text="${likeNotice.entityType==1?'帖子':'回复'}">帖子</b> ...
                </a>
                <ul class="d-inline font-size-12 float-right">
                    <li class="d-inline ml-2"><span class="text-primary">共 <i th:text="${likeNotice.count}">3</i> 条会话</span></li>
                </ul>
            </div>
        </div>
    </li>
    <!--关注类通知-->
    <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" th:if="${followNotice.message!=null}">
        <span class="badge badge-danger" th:text="${followNotice.unread!=0?followNotice.unread:''}">3</span>
        <img src="http://static.nowcoder.com/images/head/follow.png" class="mr-4 user-header" alt="通知图标">
        <div class="media-body">
            <h6 class="mt-0 mb-3">
                <span>关注</span>
                <span class="float-right text-muted font-size-12"
                        th:text="${#dates.format(followNotice.message.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-28 14:13:25
                </span>
            </h6>
            <div>
                <a th:href="@{/notice/detail/follow}">
                    用户
                    <i th:utext="${followNotice.user.username}">nowcoder</i>
                    关注了你 ...
                </a>
                <ul class="d-inline font-size-12 float-right">
                    <li class="d-inline ml-2"><span class="text-primary">共 <i th:text="${followNotice.count}">3</i> 条会话</span></li>
                </ul>
            </div>
        </div>
    </li>
  • notice-detail.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!-- 内容 -->
    <div class="col-4 text-right">
        <button type="button" class="btn btn-secondary btn-sm" onclick="back();">返回</button>
    </div>
    <!-- 通知列表 -->
    <ul class="list-unstyled mt-4">
        <li class="media pb-3 pt-3 mb-2" th:each="map:${notices}">
            <img th:src="${map.fromUser.headerUrl}" class="mr-4 rounded-circle user-header" alt="系统图标">
            <div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="mr-auto" th:utext="${map.fromUser.username}">落基山脉下的闲人</strong>
                    <small th:text="${#dates.format(map.notice.createTime, 'yyyy-MM-dd HH:mm:ss')}">2019-04-25 15:49:32</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body">
                    <span th:if="${topic.equals('comment')}">
                        用户
                        <i th:utext="${map.user.username}">nowcoder</i>
                        评论了你的<b th:text="${map.entityType==1?'帖子':'回复'}">帖子</b>,
                        <a class="text-primary" th:href="@{|/discuss/detail/${map.postId}|}">点击查看</a> !
                    </span>
                    <span th:if="${topic.equals('like')}">
                        用户
                        <i th:utext="${map.user.username}">nowcoder</i>
                        点赞了你的<b th:text="${map.entityType==1?'帖子':'回复'}">帖子</b>,
                        <a class="text-primary" th:href="@{|/discuss/detail/${map.postId}|}">点击查看</a> !
                    </span>
                    <span th:if="${topic.equals('follow')}">
                        用户
                        <i th:utext="${map.user.username}">nowcoder</i>
                        关注了你,
                        <a class="text-primary" th:href="@{|/user/profile/${map.user.id}|}">点击查看</a> !
                    </span>
                </div>
            </div>
        </li>
    </ul>
    <!-- 分页：复用 -->
    <!-- js -->
    <script>
        function back() {
            location.href = CONTEXT_PATH + "/notice/list";
        }
    </script>
  • index.html: 修改，头部（导航 -> 功能）。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 头部 -->
    <!-- 导航 -->
    <!-- 功能 -->
    <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser!=null}">
        <a class="nav-link position-relative" th:href="@{/letter/list}">消息
            <span class="badge badge-danger"
                th:text="${allUnreadCount!=0?allUnreadCount:''}">12
            </span>
        </a>
    </li>

结果展示

导航栏消息-图示

#问答平台
问答平台（5），显示系统通知
https://lcf163.github.io/2020/06/04/问答平台（5），显示系统通知/
作者
乘风的小站
发布于
2020年6月4日
许可协议