博客中需要包含一个简单的检索功能，我自己设定的目标是能够通过检索一定的关键词来获取带有这些关键词的标题的博客列表，并且能够通过云图展示搜索趋势。
在ArticleService.java中添加三个方法
//模糊查找 title的相关内容 List<Article> getArticleListByTitle(String contents); //搜索记录相关 List<Search> getSearchHistory(); int addSearchHistory(Search search);在ArticleServiceImpl.java中对其进行实现
@Override /** * @description: 查找的匹配方式是%contents%,如果检索到，则会将这个contents加到search History中 * @param [contents] * @return java.util.List<com.nevergetme.nevergetmeweb.bean.Article> * @throws * @author Alden He * @date 2019/5/23 19:04 */ public List<Article> getArticleListByTitle(String contents){ List<Article> list=articleMapper.getArticleListByTitle("%"+contents+"%"); if(list!=null&&list.size()>0)articleMapper.addSearchHistory(new Search(contents,1)); return list; } //搜索记录相关 @Override public List<Search> getSearchHistory(){ return articleMapper.getSearchHistory(); } @Override public int addSearchHistory(Search search){ return articleMapper.addSearchHistory(search); }这里的一个处理逻辑是如果搜索结果存在则将搜索词添加到搜索历史中
在ArticleMapper添加如下方法
List<Article> getArticleListByTitle(String contents); //搜索记录相关 List<Search> getSearchHistory(); int addSearchHistory(Search search);在ArticleMapper.xml中的实现为
<select id="getArticleListByTitle" parameterType="java.lang.String" resultMap="articleResultMapList"> select article.id,article.title,article.shortcut, DATE_FORMAT(article.publishDate,'%Y-%m-%d') publishDate, DATE_FORMAT(article.updateDate,'%Y-%m-%d') updateDate,article.likes,article.visitTimes,article.isStick,article.cover, user.id as user_id,user.username from article left join user on article.authorId=user.id where article.title like #{contents} order by isStick desc,article.id desc </select> <select id="getSearchHistory" resultType="com.nevergetme.nevergetmeweb.bean.Search"> select * from SearchHistory </select> <insert id="addSearchHistory" parameterType="com.nevergetme.nevergetmeweb.bean.Search" keyProperty="id" useGeneratedKeys="true"> insert into SearchHistory(content,times) values(#{content},#{times}) on duplicate key update times=times+1 </insert>需要建立存储搜索记录的表
CREATE TABLE `searchhistory` ( `id` int(11) NOT NULL AUTO_INCREMENT, `content` varchar(200) NOT NULL, `times` int(11) NOT NULL DEFAULT '1', PRIMARY KEY (`id`), UNIQUE KEY `content` (`content`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8controller层比较简单，首先是返回search模板
@GetMapping("/search") public String getSearchPage(){ return "search"; }然后是具体的处理请求的controller
@RequestMapping(value = "/article/searchArticle",method = RequestMethod.POST) public @ResponseBody List<Article> searchArticle(@RequestParam("contents")String contents){ return articleService.getArticleListByTitle(contents); } @RequestMapping("/article/getSearchHistory") public @ResponseBody List<Search> getSearchHistory(){ return articleService.getSearchHistory(); }编写界面时需要引入几个库
词云图数据展示：echarts具体代码如下
<!DOCTYPE html> <html 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"> <title>NeverGetMe</title> <link rel="shortcut" th:href="@{/icon/java.svg}"/> <script th:src="@{/js/jquery.min.js}"></script> <script th:src="@{/js/bootstrap.min.js}"></script> <script th:src="@{/js/popper.min.js}"></script> <link th:href="@{/css/bootstrap.css}" rel="stylesheet"> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script th:src="@{/js/popper.min.js}"></script> <script th:src="@{plug/echarts/echarts.min.js}"></script> <script th:src="@{/js/echarts-wordcloud.min.js}"></script> </head> <body> <div th:replace="header::html"></div> <div class="container"> <div class="card border-light" id="SearchCardShow" style="position:absolute;left: 50%;top:50%;transform: translate(-50%,-75%);width: 60%"> <div class="card-body" > <div class="input-group" > <input type="text" class="form-control" aria-describedby="SendSearchContent" id="SearchContent"> <div class="input-group-append"> <button class="btn btn-dark" type="button" id="SendSearchContent">搜索</button> </div> </div> <div class="container mt-3" id="articleTables" style="text-align: center"> </div> <div id="WordCloud" style="width: auto;height:200px;"></div> </div> </div> </div> <div th:replace="footer::html"></div> <script th:src="@{/js/header.js}"></script> <script th:src="@{/js/articleList.js}"></script> <!--<script th:inline="javascript">--> <!-- var userID=[[${userId}]];--> <!--</script>--> <script> readUserInfo(); var chart=echarts.init(document.getElementById('WordCloud')); function createRandomItemStyle() { return { normal: { color: 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')' } }; } function generateRequireData(data) { var chartData=[]; for(var i in data){ chartData.push({name:data[i].content,value:data[i].times,textStyle: createRandomItemStyle()}); } return chartData; } function loadWordCloudChart(data,chart){ option = { tooltip: { show: true }, series: [{ name: 'Search Trends', type: 'wordCloud', size: ['80%', '80%'], textRotation : [0, 45, 90, -45], textPadding: 0, autoSize: { enable: true, minSize: 14 }, data:generateRequireData(data) }] }; chart.setOption(option); } function setSearchShowList(status){ if(status){ $("#SearchCardShow").css("position","absolute"); $("#SearchCardShow").css("left","50%"); $("#SearchCardShow").css("transform","translate(-50%,-75%)"); $("#SearchCardShow").css("top","50%"); $("#SearchCardShow").css("width","60%"); }else{ $("#SearchCardShow").css("position",""); $("#SearchCardShow").css("left",""); $("#SearchCardShow").css("transform",""); $("#SearchCardShow").css("top",""); $("#SearchCardShow").css("width",""); } } var myStatus=true; $(document).ready(function () { updateFooter(1); $.get("/article/getSearchHistory",function (data,status) { if(data){ // console.log(data); loadWordCloudChart(data,chart); } }); $("#SendSearchContent").click(function () { if($("#SearchContent").val()){ $.post("/article/searchArticle",{ contents:$("#SearchContent").val() },function (data,status) { if(data){ //console.log(data); setSearchShowList(false); updateArticleList(data); updateFooter(data.length); $("#WordCloud").hide(); } }); } }); }); </script> </body> </html>需要注意的是文字颜色从之前的itemStyle变成了textStyle，而官方文档还是itemStyle
