【项目】仿牛客网社区开发第6章 Elasticsearch 分布式搜索引擎 3 开发社区搜索功能

以你之姓@ 2024-03-22 16:40 7阅读 0赞

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

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

*   *  【项目】仿牛客网社区开发
     *   *  第6章 Elasticsearch 分布式搜索引擎
         *   *  3 开发社区搜索功能

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

#### 第6章 Elasticsearch 分布式搜索引擎 ####

##### 3 开发社区搜索功能 #####

*  搜索服务
    
     *  将帖子保存至Elasticsearch服务器。
     *  从Elasticsearch服务器删除帖子。
     *  从Elasticsearch服务器搜索帖子。
 *  发布事件
    
     *  发布帖子时，将帖子异步的提交到Elasticsearch服务器。
     *  增加评论时，将帖子异步的提交到Elasticsearch服务器。
     *  在消费组件中增加一个方法，消费帖子发布事件。
 *  显示结果
    
     *  在控制器中处理搜索请求，在HTML上显示搜索结果

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

这里有一个遗留问题

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

发布帖子的mapper 映射文件里面，加上获取主键。

先来一个业务层：

package com.nowcoder.community.service;
    
    import com.nowcoder.community.dao.elasticsearch.DiscussPostRepository;
    import com.nowcoder.community.entity.DiscussPost;
    import org.elasticsearch.action.search.SearchResponse;
    import org.elasticsearch.index.query.QueryBuilders;
    import org.elasticsearch.search.SearchHit;
    import org.elasticsearch.search.SearchHits;
    import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
    import org.elasticsearch.search.fetch.subphase.highlight.HighlightField;
    import org.elasticsearch.search.sort.SortBuilders;
    import org.elasticsearch.search.sort.SortOrder;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Pageable;
    import org.springframework.data.elasticsearch.core.ElasticsearchTemplate;
    import org.springframework.data.elasticsearch.core.SearchResultMapper;
    import org.springframework.data.elasticsearch.core.aggregation.AggregatedPage;
    import org.springframework.data.elasticsearch.core.aggregation.impl.AggregatedPageImpl;
    import org.springframework.data.elasticsearch.core.query.NativeSearchQueryBuilder;
    import org.springframework.data.elasticsearch.core.query.SearchQuery;
    import org.springframework.stereotype.Service;
    
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    /**
     * @Projectname: community
     * @Classname: ElasticsearchService
     * @Author: Ding Jiaxiong
     * @Date:2023/4/22 19:36
     */
    
    @Service
    public class ElasticsearchService {
        
    
        @Autowired
        private DiscussPostRepository discussRepository;
    
        @Autowired
        private ElasticsearchTemplate elasticTemplate;
    
        public void saveDiscussPost(DiscussPost post) {
        
            discussRepository.save(post);
        }
    
        public void deleteDiscussPost(int id) {
        
            discussRepository.deleteById(id);
        }
    
        public Page<DiscussPost> searchDiscussPost(String keyword, int current, int limit) {
        
            SearchQuery searchQuery = new NativeSearchQueryBuilder()
                    .withQuery(QueryBuilders.multiMatchQuery(keyword, "title", "content"))
                    .withSort(SortBuilders.fieldSort("type").order(SortOrder.DESC))
                    .withSort(SortBuilders.fieldSort("score").order(SortOrder.DESC))
                    .withSort(SortBuilders.fieldSort("createTime").order(SortOrder.DESC))
                    .withPageable(PageRequest.of(current, limit))
                    .withHighlightFields(
                            new HighlightBuilder.Field("title").preTags("<em>").postTags("</em>"),
                            new HighlightBuilder.Field("content").preTags("<em>").postTags("</em>")
                    ).build();
    
            return elasticTemplate.queryForPage(searchQuery, DiscussPost.class, new SearchResultMapper() {
        
                @Override
                public <T> AggregatedPage<T> mapResults(SearchResponse response, Class<T> aClass, Pageable pageable) {
        
                    SearchHits hits = response.getHits();
                    if (hits.getTotalHits() <= 0) {
        
                        return null;
                    }
    
                    List<DiscussPost> list = new ArrayList<>();
                    for (SearchHit hit : hits) {
        
                        DiscussPost post = new DiscussPost();
    
                        String id = hit.getSourceAsMap().get("id").toString();
                        post.setId(Integer.valueOf(id));
    
                        String userId = hit.getSourceAsMap().get("userId").toString();
                        post.setUserId(Integer.valueOf(userId));
    
                        String title = hit.getSourceAsMap().get("title").toString();
                        post.setTitle(title);
    
                        String content = hit.getSourceAsMap().get("content").toString();
                        post.setContent(content);
    
                        String status = hit.getSourceAsMap().get("status").toString();
                        post.setStatus(Integer.valueOf(status));
    
                        String createTime = hit.getSourceAsMap().get("createTime").toString();
                        post.setCreateTime(new Date(Long.valueOf(createTime)));
    
                        String commentCount = hit.getSourceAsMap().get("commentCount").toString();
                        post.setCommentCount(Integer.valueOf(commentCount));
    
                        // 处理高亮显示的结果
                        HighlightField titleField = hit.getHighlightFields().get("title");
                        if (titleField != null) {
        
                            post.setTitle(titleField.getFragments()[0].toString());
                        }
    
                        HighlightField contentField = hit.getHighlightFields().get("content");
                        if (contentField != null) {
        
                            post.setContent(contentField.getFragments()[0].toString());
                        }
    
                        list.add(post);
                    }
    
                    return new AggregatedPageImpl(list, pageable,
                            hits.getTotalHits(), response.getAggregations(), response.getScrollId(), hits.getMaxScore());
                }
            });
        }
    
    }

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

下面是表现层

发布帖子时：

@RequestMapping(path = "/add", method = RequestMethod.POST)
        @ResponseBody
        public String addDiscussPost(String title, String content) {
        
            User user = hostHolder.getUser();
            if (user == null) {
        
                return CommunityUtil.getJSONString(403, "你还没有登录哦!");
            }
    
            DiscussPost post = new DiscussPost();
            post.setUserId(user.getId());
            post.setTitle(title);
            post.setContent(content);
            post.setCreateTime(new Date());
            discussPostService.addDiscussPost(post);
    
            // 触发发帖事件
            Event event = new Event()
                    .setTopic(TOPIC_PUBLISH)
                    .setUserId(user.getId())
                    .setEntityType(ENTITY_TYPE_POST)
                    .setEntityId(post.getId());
            eventProducer.fireEvent(event);
    
            // 报错的情况,将来统一处理.
            return CommunityUtil.getJSONString(0, "发布成功!");
        }

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

发布评论时：

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

事件消费者

@Autowired
        private DiscussPostService discussPostService;
    
        @Autowired
        private ElasticsearchService elasticsearchService;
    
        // 消费发帖事件
        @KafkaListener(topics = {
        TOPIC_PUBLISH})
        public void handlePublishMessage(ConsumerRecord record) {
        
            if (record == null || record.value() == null) {
        
                logger.error("消息的内容为空!");
                return;
            }
    
            Event event = JSONObject.parseObject(record.value().toString(), Event.class);
            if (event == null) {
        
                logger.error("消息格式错误!");
                return;
            }
    
            DiscussPost post = discussPostService.findDiscussPostById(event.getEntityId());
            elasticsearchService.saveDiscussPost(post);
        }

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

新建controller 视图层接口

package com.nowcoder.community.controller;
    
    import com.nowcoder.community.entity.DiscussPost;
    import com.nowcoder.community.entity.Page;
    import com.nowcoder.community.service.ElasticsearchService;
    import com.nowcoder.community.service.LikeService;
    import com.nowcoder.community.service.UserService;
    import com.nowcoder.community.util.CommunityConstant;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * @Projectname: community
     * @Classname: SearchController
     * @Author: Ding Jiaxiong
     * @Date:2023/4/22 19:45
     */
    
    @Controller
    public class SearchController implements CommunityConstant {
        
    
        @Autowired
        private ElasticsearchService elasticsearchService;
    
        @Autowired
        private UserService userService;
    
        @Autowired
        private LikeService likeService;
    
        // search?keyword=xxx
        @RequestMapping(path = "/search", method = RequestMethod.GET)
        public String search(String keyword, Page page, Model model) {
        
            // 搜索帖子
            org.springframework.data.domain.Page<DiscussPost> searchResult =
                    elasticsearchService.searchDiscussPost(keyword, page.getCurrent() - 1, page.getLimit());
            // 聚合数据
            List<Map<String, Object>> discussPosts = new ArrayList<>();
            if (searchResult != null) {
        
                for (DiscussPost post : searchResult) {
        
                    Map<String, Object> map = new HashMap<>();
                    // 帖子
                    map.put("post", post);
                    // 作者
                    map.put("user", userService.findUserById(post.getUserId()));
                    // 点赞数量
                    map.put("likeCount", likeService.findEntityLikeCount(ENTITY_TYPE_POST, post.getId()));
    
                    discussPosts.add(map);
                }
            }
            model.addAttribute("discussPosts", discussPosts);
            model.addAttribute("keyword", keyword);
    
            // 分页信息
            page.setPath("/search?keyword=" + keyword);
            page.setRows(searchResult == null ? 0 : (int) searchResult.getTotalElements());
    
            return "/site/search";
        }
    
    }

OK，修改前端页面模板

首先是首页那个搜索框【其他页面都是复用的】

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

下面就是结果页面

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <title>牛客网-搜索结果</title>
    </head>
    <body>
    <div class="nk-container">
        
        <header class="bg-dark sticky-top" th:replace="index::header">
            <div class="container">
                
                <nav class="navbar navbar-expand-lg navbar-dark">
                    
                    <a class="navbar-brand" href="#"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link position-relative" href="letter.html">消息<span
                                        class="badge badge-danger">12</span></a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="register.html">注册</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="login.html">登录</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                         style="width:30px;"/>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                    <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                    <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <span class="dropdown-item text-center text-secondary">nowcoder</span>
                                </div>
                            </li>
                        </ul>
                        
                        <form class="form-inline my-2 my-lg-0" action="search.html">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </div>
                </nav>
            </div>
        </header>
    
        
        <div class="main">
            <div class="container">
                <h6><b class="square"></b> 相关帖子</h6>
                
                <ul class="list-unstyled mt-4">
                    <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
                        <img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像"
                             style="width:50px;height:50px;">
                        <div class="media-body">
                            <h6 class="mt-0 mb-3">
                                <a th:href="@{|/discuss/detail/${map.post.id}|}"
                                   th:utext="${map.post.title}">备战<em>春招</em>，面试刷题跟他复习，一个月全搞定！</a>
                            </h6>
                            <div class="mb-3" th:utext="${map.post.content}">
                                金三银四的金三已经到了，你还沉浸在过年的喜悦中吗？
                                如果是，那我要让你清醒一下了：目前大部分公司已经开启了内推，正式网申也将在3月份陆续开始，金三银四，<em>春招</em>的求职黄金时期已经来啦！！！
                                再不准备，作为19应届生的你可能就找不到工作了。。。作为20届实习生的你可能就找不到实习了。。。
                                现阶段时间紧，任务重，能做到短时间内快速提升的也就只有算法了，
                                那么算法要怎么复习？重点在哪里？常见笔试面试算法题型和解题思路以及最优代码是怎样的？
                                跟左程云老师学算法，不仅能解决以上所有问题，还能在短时间内得到最大程度的提升！！！
                            </div>
                            <div class="text-muted font-size-12">
                                <u class="mr-3" th:utext="${map.user.username}">寒江雪</u>
                                发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15
                                15:32:18</b>
                                <ul class="d-inline float-right">
                                    <li class="d-inline ml-2">赞 <i th:text="${map.likeCount}">11</i></li>
                                    <li class="d-inline ml-2">|</li>
                                    <li class="d-inline ml-2">回复 <i th:text="${map.post.commentCount}">7</i></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
                
                <nav class="mt-5" th:replace="index::pagination">
                    <ul class="pagination justify-content-center">
                        <li class="page-item"><a class="page-link" href="#">首页</a></li>
                        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    
        
        <footer class="bg-dark">
            <div class="container">
                <div class="row">
                    
                    <div class="col-4 qrcode">
                        <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                             style="width:136px;"/>
                    </div>
                    
                    <div class="col-8 detail-info">
                        <div class="row">
                            <div class="col">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">关于我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">加入我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">意见反馈</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">企业服务</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">联系我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">免责声明</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">友情链接</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <ul class="nav btn-group-vertical company-info">
                                    <li class="nav-item text-white-50">
                                        公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                    </li>
                                    <li class="nav-item text-white-50">
                                        联系方式：010-60728802(电话)    admin@nowcoder.com
                                    </li>
                                    <li class="nav-item text-white-50">
                                        牛客科技©2018 All rights reserved
                                    </li>
                                    <li class="nav-item text-white-50">
                                        京ICP备14055008号-4     
                                        <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                             style="width:18px;"/>
                                        京公网安备 11010502036488号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/js/global.js}"></script>
    </body>
    </html>

OK， 启动服务器看看效果

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

直接搜索一手

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

当然我们自己发那条还没有加到elasticsearch 服务器中

我们现在再发一次，

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

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

现在来搜索一下 elasticsearch

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

没问题，这也说明我们的消息队列也成功实现了。

[9626c34c83cf471ab02a9b5b5ad1a68e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/66b180c787d841cca78667dfa0712674.png
[a442c12ef49b4469bcf01c9088926923.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0159b6d8d4f24f19a8741460c2d0ba88.png
[983d1e9f39b5459dafa1de66b1058dff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f522cd4727f3494fb4605efd39faee2f.png
[d8cadee302254ddca62b74caa374a4d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/09edcee4814b44f797b880726ca94e2f.png
[05145b0f7f174f56addca6854c4429bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/79055a0405f54629b8cb121606fe7a2a.png
[7621dfde1a66413b9027f85644fc9218.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/30a8a9f8cb774c23a8354b11f971c7d6.png
[b1a686e422d6414081e51b7cda52c7dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/289c9f49344a40b0b68036418b970f5e.png
[ef7f0e90d3534c28adb5c4eea20da5ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/abba80db20284413a2986381bee1aa43.png
[9d2c668e8e7e435d9bb51f1b74ccbc9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/45f6e92412ce495d856010785e988e93.png
[c82198f66daf4101becd63b3e47c2dc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d965394e41e447948b861267fae6344a.png
[d1b90ac5198c4650934682ec494072a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bf22fcc4fce148db9642b794ad62d865.png
[98c5cc4c63d7494ebf24d04b16077e91.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a1aeeee332454fb4827064c653541482.png
[57503d94c9a44296a0fca8a0d64be5f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d20374abdeb449869d37d96b1a910ffe.png