HTML和CSS,我用得是Bootstrap的。
<!--搜索网站--> <div class="row " style="position: absolute; margin:0px auto; text-align:center; "> <div class="col-lg-6 gover_search"> <div class="input-group gover_search_form clearfix"> <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition"> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button> </span> <div class="search_suggest" id="gov_search_suggest"> <ul> </ul> </div> </div> </div> </div>
<!--搜索网站--> <div class="row " style="position: absolute; margin:0px auto; text-align:center; "> <div class="col-lg-6 gover_search"> <div class="input-group gover_search_form clearfix"> <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition"> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button> </span> <div class="search_suggest" id="gov_search_suggest"> <ul> </ul> </div> </div> </div> </div>
实现效果：
增加网站
在增加网站的时候，我们希望以单一的名字来进行添加，因为我们是通过命名来进行搜索对应的网站的。
所以在添加网站的时候需要先判断有没有该命名才能继续添加、如果存在命名了，就不让它添加了。
代码如下：
/** * 插入数据进索引库中，在插入之前先判断该“命名”索引是否存在 * * @param client * @param indexName * @param type * @param json * @param webSiteName * @return */ public static String insertIndexData(TransportClient client, String indexName, String type, String json, String webSiteName) { //在插入之前、查看一下有没有该数据、如果有就不允许插入了【本站只允许命名是唯一的】 List<String> list = queryIndexByCondition(client, indexName, type, webSiteName); if (list != null && list.size() > 0) { return "hasWebSiteName"; } else { client.prepareIndex(indexName, type).setSource(json).get(); return "success"; } }
删除与查询网站
添加完网站之后，我们可以查询当前用户所有的网站，并可以删除
查询用户所有的网站我还使用到了Elasticsearch的分页功能：
/** * 根据用户id查询出索引记录、并对其进行分页 * * @param client * @param indexName * @param type * @param userId * @param currentPage * @return */ public static Map<String, String> queryIndexById(TransportClient client, String indexName, String type, String userId, Integer currentPage) { QueryBuilder query = QueryBuilders.matchQuery("userId", userId); //接收返回的数据 Map<String, String> map = new HashMap(); //计算出开始取的页数 int startIndex = (currentPage - 1) * EsUtilsPro.PAGE_SIZE; //查询出总记录数 Long totalRecordCount = ElasticsearchUtils.queryTotalCount(client, indexName, type, userId); //查询出总页数 Long totalPageCount = totalRecordCount % EsUtilsPro.PAGE_SIZE == 0 ? totalRecordCount / EsUtilsPro.PAGE_SIZE : totalRecordCount / EsUtilsPro.PAGE_SIZE + 1; SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).setFrom(startIndex).setSize(EsUtilsPro.PAGE_SIZE).execute() .actionGet(); SearchHits hits = response.getHits(); //返回一个最高匹配那个对象就好了。 if (hits.totalHits() > 0) { for (SearchHit hit : hits) { map.put(hit.getId(), hit.getSourceAsString()); } } map.put("currentPage", String.valueOf(currentPage)); map.put("totalRecordCount", String.valueOf(totalRecordCount)); map.put("totalPageCount", String.valueOf(totalPageCount)); return map; }
查询总记录数
/** * 根据用户id查询该用户拥有的总记录数 * * @param client * @param indexName * @param type * @param userId * @return */ public static Long queryTotalCount(TransportClient client, String indexName, String type, String userId) { QueryBuilder query = QueryBuilders.matchQuery("userId", userId); SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).execute().actionGet(); return response.getHits().totalHits(); }
使用Map集合的原因是因为我们要在查询的基础上实现删除的功能，要想删除就必须知道当前记录的id,因此就使用到了Map集合了。
<!--根据Id查询索引记录--> <script> $(function () { $("#queryById").click(function () { var currentPage = $("#currentPage").val(); if (currentPage == null || currentPage == "") { currentPage = 1; } $.ajax({ url: path + "/favorites/querySiteById.do", type: "post", data: {userId: $("#userId").val(), currentPage: currentPage}, success: function (responseText) { //返回的是一个Map集合，我们遍历Map集合， for (var index in responseText) { //获取Map的value，index就代表Map的key var jsonObj = responseText[index] if (index.length > 16) { //获取JSON对象 var data = eval("(" + jsonObj + ")"); $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>"); } else { if (index == "currentPage") { $("#currentPage").val(jsonObj); } else if (index == "totalPageCount") { $("#totalPageCount").val(jsonObj); } else { $("#totalRecordCount").val(jsonObj); } } } createPage($("#currentPage").val(), $("#totalPageCount").val(), $("#totalRecordCount").val()); }, error: function () { sweetAlert("系统错误了"); } }); }); }); </script>
生成分页的样式、并指定当前页数（i就作为当前的页数）
<!--生成分页样式--> <script> function createPage(totalPageCount) { for (var i = 1; i <= totalPageCount; i++) { $(".pagination").append("<li><a href='#' onclick='queryPage(" + i + ")'>" + i + "</a></li>"); } } </script>
异步查询分页数据、在查询之前先把原有的记录删除掉。
<!--异步查询分页数据--> <script> function queryPage(currentPage) { //把原有的数据删除掉 $("#manageSiteTr").siblings().empty(); $.ajax({ url: path + "/favorites/querySiteById.do", type: "post", data: {userId: $("#userId").val(), currentPage: currentPage}, success: function (responseText) { //返回的是一个Map集合，我们遍历Map集合， for (var index in responseText) { //获取Map的value，index就代表Map的key var jsonObj = responseText[index] if (index.length > 16) { //获取JSON对象 var data = eval("(" + jsonObj + ")"); $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>"); } else { if (index == "currentPage") { $("#currentPage").val(jsonObj); } else if (index == "totalPageCount") { $("#totalPageCount").val(jsonObj); } else { $("#totalRecordCount").val(jsonObj); } } } }, error: function () { sweetAlert("系统错误了"); } }); } </script>
最终的效果如下：
