效果图：
搜索全部：
布尔搜索：
关键词搜索：
前端代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>诗语旅游</title><link rel="stylesheet" href="/jsapi_demos/static/demo-center/css/demo-center.css"/><link rel="stylesheet" href="./css/index.css"/><link rel="stylesheet" href="./css/banner.css"/><script src="js/amap.min.js"></script><script src="js/axios.min.js"></script><script src="js/vue.js"></script></head><body><div id="app" @click="showOps=false"><div style="width: 70%;text-align: center;margin: auto;"><div class="banner"><div class="logo"><img src="./img/logo.jpeg" alt="1"/><span><div class="logo-ch">诗语旅游</div><div class="logo-en"></div></span></div><div ><input type="checkbox" id="toggle-button" v-model="isTest"><!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input--><label for="toggle-button" class="button-label"><span class="circle"></span><span class="text on">测试</span><span class="text off">正式</span></label></div></div><!--关键字搜索--><div class="search-bar"><div class="input-box"><input title="输入关键字搜索酒店" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"@keyup="handleKeyUp($event)"><button @click="handleSearch">搜索</button></div><div id="complete-box" v-show="showOps && ops.length > 0"><div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i":style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}</div></div></div><!-- 已选择过滤项 --><div class="selected-ops"><div class="open">全部结果：</div><div class="selected-op" v-for="(v, k) in params.filters" :key="k" @click="deleteFilter(k)">{{filterNames[k]}}：<span>{{v}} <span class='close'>×</span></span></div></div><!--过滤项--><div class="filter-list"><div v-for="(v, k) in remainFilter" :key="k"><div class="filter-box"><div class="f-key"><strong>{{filterNames[k]}}</strong></div><div class="column-divider"></div><div class="f-items"><div class="f-item" @click="clickFilter(k, o)" v-for="(o, j) in v" :key="j"><a href="javascript:void(0)">{{o}}</a></div></div></div><div class="row-divider"></div></div><div class="filter-box"><div class="f-key"><strong>价格</strong></div><div class="column-divider"></div><div class="f-items"><div class="f-item" @click="clickFilter('price','0-100')"><a href="javascript:void(0)">100元以下</a></div><div class="f-item" @click="clickFilter('price','100-300')"><a href="javascript:void(0)">100-300元</a></div><div class="f-item" @click="clickFilter('price','300-600')"><a href="javascript:void(0)">300-600元</a></div><div class="f-item" @click="clickFilter('price','600-1500')"><a href="javascript:void(0)">600-1500元</a></div><div class="f-item" @click="clickFilter('price','1500-0')"><a href="javascript:void(0)">1500元以上</a></div></div></div></div><!-- 排序 --><div class="top-ban"><!--排序条件--><div class="sort-items"><div class="sort-item" v-for="(item, i) in sortItems" :key="i"><a :class="{selected: params.sortBy===item.key}" @click="params.sortBy=item.key"href="javascript:void(0)">{{item.text}}</a>|</div></div><!--分页条--><div class="top-pagination"><span>共 <i style="color: #222;">{{total}}</i> 家酒店</span><span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span><a class="btn-arrow" href="#" style="display: inline-block" @click="prePage"><</a><a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">></a></div></div><div class="row-divider" style="margin-bottom: 5px; width: 100%"></div><!--酒店列表--><div style="display: flex; justify-content: space-between;"><div class="hotel-list"><div class="hotel-box" v-for="(hotel,i) in hotels" :key="i"style="display: flex;justify-content: space-between;" @mouseover="handleMarkerFocus(hotel)"><div class="ad-mark" v-if="hotel.isAD"><img src="./img/ad.png" width="25"/></div><div style="width: 0;"></div><div style="width: 25%"><img width="100%" :src="hotel.pic"></div><div class="hotel-info"><div class="hotel-name" v-html="hotel.name"></div><div class="star-name"> {{hotel.starName}}</div><div class="address">位于 <span style="color: #BC8516;">{{hotel.business}}</span> 周边，{{hotel.address}}</div><div class="order"> 1分钟前有人预订了该酒店</div><div v-if="hotel.distance" class="address">距离您 {{hotel.distance.toFixed(2)}} km</div></div><div style="text-align: left; width: 15%;"><div><b style="color: #f60;">￥</b> <span id='hotel-price'>{{hotel.price}}</span> <spanstyle="font-size: 0.2em; color: #999;">起</span></div><div class='btn'>立即预定</div><div><span class="hotel-score">{{hotel.score / 10}}分</span> /<span>5分</span></div></div></div></div><div :class='{"map-box": true, "fixed-map": isFixed}' :style="{left: ml + 'px'}" style="display: none"><div class="map-head">地图预览</div><div class="amap" id="container"></div><div class="map-geo" @click="getGeoLoc"><img src="/jsapi/static/image/plugin/waite.png" v-show="loading"></div></div></div></div></div><script src="./js/vue.js"></script><script src="./js/axios.min.js"></script><script src="./js/amap.min.js"></script><script type="text/javascript" src="/maps?v=2.0&key=ddd292c88aa1bad9c04891a47724f40a"></script><script>// 设置后台服务地址axios.defaults.baseURL = "http://localhost:8080";axios.defaults.timeout = 3000;let app = new Vue({el: "#app",data: {isTest: false,filterNames: {brand: "品牌",city: "城市",starName: "星级",price: "价格",},filterList: {},// 过滤项的假数据sortItems: [{key: "default",text: "默认",},{key: "score",text: "评价",},{key: "price",text: "价格",}],// 排序字段的假数据hotels: [],// 酒店数据total: 0, // 总条数totalPage: 0, // 总页数params: {key: "", // 搜索关键字page: 1, // 当前页码size: 5, // 每页大小sortBy: "default",// 排序字段filters: {}, // 过滤字段},map: {},// 地图对象loc: "", // 地图标记ml: 0, // 控制地图位置geolocation:{}, // 定位系统loading: false, // 是否在定位currentHotel: {},ops: [],showOps: false,opsIndex: -1,isFixed: false,testFilterData: {"city": ["上海", "北京", "深圳", "杭州"],"starName": ["四星","五星","二钻","三钻","四钻","五钻"],"brand": ["7天酒店", "如家","速8", "皇冠假日","华美达","万怡","喜来登","万豪","和颐","希尔顿"],},},watch: {"params.sortBy"() {// 每当page改变，当前代码就会执行。搜索一下this.search(this.loc);},"params.page"() {// 每当page改变，当前代码就会执行。搜索一下this.search(this.loc);},"params.filters": {deep: true,handler() {this.search();// 获取过滤项this.getFilter();}},opsIndex() {if (this.opsIndex !== -1) {this.params.key = this.ops[this.opsIndex]}}},created() {// 页面加载时，先搜索一下this.search();// 获取过滤项this.getFilter();},mounted() {//初始化地图this.map = new AMap.Map('container', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 11, //初始地图级别center: [120.0, 32.0], //初始地图中心点});// 初始化定位系统AMap.plugin('AMap.Geolocation', () => {this.geolocation = new AMap.Geolocation({position: 'RT', //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});// AMap.Event.addListener(geolocation, 'complete', result => {// if (this.params.page !== 1) {//this.params.page = 1;//this.loc = result.position.lat + ", " + result.position.lng;// } else {//this.searchByMap(result.position.lat + ", " + result.position.lng);// }//// });//返回定位信息// AMap.Event.addListener(geolocation, 'error', err => console.log(err));//返回定位出错信息});let oDiv = document.querySelector(".map-box"),H = 0,Y = oDiv;while (Y) {H += Y.offsetTop;Y = Y.offsetParent;}window.addEventListener('scroll', () => this.handleScroll(H, oDiv));},methods: {handleScroll(h, o) {let s = document.body.scrollTop || document.documentElement.scrollTopthis.isFixed = s > h;this.ml = o.offsetLeft;},handleKeyUp(e) {if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {// 用户输入的字符，需要自动补全this.getSuggestion();} else if (e.keyCode === 13) {// 用户按回车，需要搜索this.search();this.getFilter();} else if (e.keyCode === 38) {if (this.opsIndex > 0) {this.opsIndex--;} else {this.opsIndex = this.ops.length - 1;}} else if (e.keyCode === 40) {this.opsIndex = (this.opsIndex + 1) % this.ops.length;} else if (e.keyCode === 27) {this.show = false}},handleSearch(){this.search();this.getFilter();},getSuggestion() { // 查询自动补全if (!this.params.key) {// key没有值，不去搜索了this.ops = [];return;}axios.get("/hotel/suggestion?key=" + this.params.key).then(resp => {this.ops = resp.data;}).catch(e => {if(this.isTest){this.ops = ["万豪", "如家", "喜来登"]}else{this.ops = []}console.log(e);})},getFilter() {if(this.isTest){this.filterList = this.testFilterData;return;}// 准备参数const {filters: {price: ps, ... fs}, ...params} = this.params;for( _k in fs){params[_k] = fs[_k];}// 处理价格if(ps){let pArr = ps.split("-");params.minPrice = parseInt(pArr[0]);let max = parseInt(pArr[1]);params.maxPrice = max === 0 ? 999999 : max;}axios.post("/hotel/filters", params).then(resp => {this.filterList = resp.data;}).catch(err => {console.log(err);this.filterList = this.testFilterData;})},searchByMap(location) {// 准备参数const {filters: {price: ps, ... fs}, ...params} = this.params;for( _k in fs){params[_k] = fs[_k];}// 处理价格if(ps){let pArr = ps.split("-");params.minPrice = parseInt(pArr[0]);let max = parseInt(pArr[1]);params.maxPrice = max === 0 ? 999999 : max;}// 准备地址if (location) {params.location = location;this.loc = location;}axios.post("/hotel/list", params).then(resp => {this.hotels = resp.data.hotels;this.total = resp.data.total;this.totalPage = Math.floor((this.total + 5 - 1) / 5);if (location) {this.setMapCenter(location);} else if(this.hotels && this.hotels.length > 0){this.setMapCenter(this.hotels[0].location);}this.initMarker();}).catch(err => {console.log(err)this.hotels = [{"id":60223,"name":"上海希尔顿酒店","address":"静安华山路250号","price":2688,"score":37,"brand":"希尔顿","city":"上海","starName":"五星级","business":"静安寺地区","location":"31.219306, 121.445427","pic":"/filebroker/cdn/res/92/10/9210e74442aceceaf6e196d61fc3b6b1_w200_h200_c1_t0.jpg"},{"id":60922,"name":"上海虹桥祥源希尔顿酒店","address":"红松东路1116号","price":1108,"score":45,"brand":"希尔顿","city":"上海","starName":"五钻","business":"虹桥地区","location":"31.18746, 121.395312","pic":"/fb3/s1/2n9c/tQRqDTFkHnHzMZiDKjcGV81ekvc_w200_h200_c1_t0.jpg"},{"id":309208,"name":"北京王府井希尔顿酒店","address":"王府井东街8号","price":1679,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"天安门/王府井地区","location":"39.914539, 116.413392","pic":"/fb2/t1/G6/M00/52/10/Cii-TF3ePt2IX9UEAALb6VYBSmoAAGKMgGsuW8AAtwB147_w200_h200_c1_t0.jpg"},{"id":395434,"name":"北京希尔顿酒店","address":"东三环北路东方路1号","price":350,"score":45,"brand":"希尔顿","city":"北京","starName":"五星级","business":"燕莎/朝阳公园商业区","location":"39.952703, 116.462387","pic":"/fb3/s1/2n9c/3fwNbKGhk6XCrkdVyxwhC5uGpLVy_w200_h200_c1_t0.jpg"},{"id":395702,"name":"北京首都机场希尔顿酒店","address":"首都机场3号航站楼三经路1号","price":222,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"首都机场/新国展地区","location":"40.048969, 116.619566","pic":"/fb2/t1/G6/M00/52/10/Cii-U13ePtuIMRSjAAFZ58NGQrMAAGKMgADZ1QAAVn_167_w200_h200_c1_t0.jpg"},{"id":615175,"name":"千岛湖滨江希尔顿度假酒店","address":"环湖北路600号","price":1265,"score":47,"brand":"希尔顿","city":"杭州","starName":"五钻","business":"千岛湖镇","location":"29.603634, 119.077596","pic":"/fb3/s1/2n9c/6qzYeUrrXsH5H3cd9bMXLz8MJtT_w200_h200_c1_t0.jpg"},{"id":2351601,"name":"深圳蛇口希尔顿南海酒店","address":"望海路1177号","price":509,"score":47,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"深圳湾口岸/蛇口","location":"22.479373, 113.916013","pic":"/fb2/t1/G6/M00/45/EA/Cii-TF3ZpXOIfa6fAAJjiUOiuYgAAFrtgDtgpQAAmOh799_w200_h200_c1_t0.jpg"},{"id":368701368,"name":"深圳大中华希尔顿酒店","address":"福田深南大道1003号","price":1666,"score":46,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"会展中心/CBD","location":"22.539313, 114.069763","pic":"/fb3/s1/2n9c/4EnHseZ73LXdFJY7DSdJ8xqAcjXe_w200_h200_c1_t0.jpg"},{"id":2048042240,"name":"北京大兴希尔顿酒店","address":"高米店南里18号楼","price":1283,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"大兴北京新机场地区","location":"39.76875, 116.339199","pic":"/fb3/s1/2n9c/3B32F8zSU2CJCWzs1hoH2o4WcquR_w200_h200_c1_t0.jpg"},{"id":2056105938,"name":"北京通州北投希尔顿酒店","address":"新华东街289号2号楼","price":1068,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"果园环岛/通州区","location":"39.908805, 116.659748","pic":"/fb3/s1/2n9c/NGKdpec3tZJNUUNWJ5pd67Cp5AY_w200_h200_c1_t0.png"}]this.total = 271;this.totalPage = 28;})},search(location) {// 发送ajaxthis.searchByMap(location);},prePage() {if (this.params.page > 1) {this.params.page--}},nextPage() {if (this.params.page < this.totalPage) {this.params.page++}},clickPrice(min, max) {this.params.minPrice = min;this.params.maxPrice = max;},clickFilter(key, option) {this.loc = "";const {...obj} = this.params.filters;obj[key] = option;this.params.filters = obj;},deleteFilter(k) {this.loc = "";const {...obj} = this.params.filters;delete obj[k];this.params.filters = obj;},location(loc) {let arr = loc.split(",");let json = '[' + arr[1] + ',' + arr[0] + ']'return JSON.parse(json);},initMarker() {if (!this.loc) {this.map.clearMap();}this.markHotels();},setMapCenter(location){this.map.setCenter(this.location(location));},markHotels(){this.hotels.forEach((h, i) => {// 将创建的点标记添加到已有的地图实例：let marker = new AMap.Marker({position: this.location(h.location), // 经纬度构成的一维数组[116.39, 39.9]title: h.name,offset: new AMap.Pixel(0, 0),anchor:'bottom-center'});marker.vid = h.id;this.map.add(marker);});},handleMarkerFocus(h) {this.map.setCenter(this.location(h.location));let old = this.currentHotel;let oldMarker = this.map.getAllOverlays("marker").find(m => m.vid === old.id);if (oldMarker) {this.updateMarker(oldMarker, "///jsapi_demos/static/demo-center/icons/poi-marker-default.png", "", this.location(old.location), old.id);}this.currentHotel = h;let marker = this.map.getAllOverlays("marker").find(m => m.vid === h.id);this.updateMarker(marker, "///jsapi_demos/static/demo-center/icons/poi-marker-red.png", h.name, this.location(h.location), h.id);},updateMarker(marker, icon, text, position, id) {// 自定义点标记内容var markerContent = document.createElement("div");// 点标记中的图标var markerImg = document.createElement("img");markerImg.className = "markerlnglat";markerImg.src = icon;markerImg.setAttribute('width', '25px');markerImg.setAttribute('height', '34px');markerContent.appendChild(markerImg);// 点标记中的文本if (text) {var markerSpan = document.createElement("span");markerSpan.className = 'marker';markerSpan.innerHTML = text;markerContent.appendChild(markerSpan);}marker.setContent(markerContent);marker.setPosition(position);marker.vid = id;},getGeoLoc(){this.loading = true;this.geolocation.getCurrentPosition((status,result) => {this.loading = false;if(status === 'complete'){console.log("successs")// /jsapi/static/image/plugin/point.pngthis.addMaker('///jsapi/static/image/plugin/point.png', result.position.lng,result.position.lat);if (this.params.page !== 1) {this.params.page = 1;this.loc = result.position.lat + ", " + result.position.lng;} else {this.searchByMap(result.position.lat + ", " + result.position.lng);}}else{console.log("err", status)}});},addMaker(iconUrl, lng, lat){// 创建 AMap.Icon 实例：let icon = new AMap.Icon({size: new AMap.Size(25, 25), // 图标尺寸image: iconUrl, // Icon的图像imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片});// 将 Icon 实例添加到 marker 上:let marker = new AMap.Marker({position: new AMap.LngLat(lng, lat),offset: new AMap.Pixel(0, 0),icon: icon, // 添加 Icon 实例title: '北京',zoom: 13,anchor:"center"});this.map.add(marker);}},computed: {remainFilter() {let keys = Object.keys(this.params.filters);let obj = {};Object.keys(this.filterList).forEach(key => {if (!keys.includes(key) && this.filterList[key].length > 1) {obj[key] = this.filterList[key];}})return obj;}}})</script></body></html>
控制层代码：
package com.hk.hotel.controller;import com.fasterxml.jackson.databind.ObjectMapper;import com.hk.hotel.pojo.HotelDoc;import com.hk.hotel.pojo.PageResult;import com.hk.hotel.pojo.RequestParams;import com.hk.hotel.service.IHotelService;import org.apache.http.HttpHost;import org.apache.lucene.search.TotalHits;import org.elasticsearch.action.search.SearchRequest;import org.elasticsearch.action.search.SearchResponse;import org.elasticsearch.client.RequestOptions;import org.elasticsearch.client.RestClient;import org.elasticsearch.client.RestHighLevelClient;import org.elasticsearch.index.query.QueryBuilder;import org.elasticsearch.index.query.QueryBuilders;import org.elasticsearch.search.SearchHit;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Qualifier;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.io.IOException;import java.util.ArrayList;/*** * 1、定义实体类，接收请求参数的JSON对象* 2、编写controller，接收页面的请求* 3、编写业务实现，利用RestHighLevelClient实现搜索、分页* * @author yellow Docter* @date -05-31* @desc*/@RestController@RequestMapping("hotel")public class HotelController {@Autowiredprivate IHotelService hotelService;private static RestHighLevelClient client=new RestHighLevelClient(RestClient.builder(HttpHost.create("http://120.48.46.177:9200")));private static ObjectMapper objectMapper = new ObjectMapper();@PostMapping("list")public PageResult simpleSearch(@RequestBody RequestParams params) throws IOException {return hotelService.multipleSearch(params);}}
业务层代码：
接口业务：
package com.hk.hotel.service;import com.hk.hotel.pojo.Hotel;import com.baomidou.mybatisplus.extension.service.IService;import com.hk.hotel.pojo.PageResult;import com.hk.hotel.pojo.RequestParams;import java.io.IOException;public interface IHotelService extends IService<Hotel> {PageResult multipleSearch(RequestParams params) throws IOException;}
实现业务：
package com.hk.hotel.service.impl;import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.hk.hotel.mapper.HotelMapper;import com.hk.hotel.pojo.Hotel;import com.hk.hotel.pojo.HotelDoc;import com.hk.hotel.pojo.PageResult;import com.hk.hotel.pojo.RequestParams;import com.hk.hotel.service.IHotelService;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import org.apache.http.HttpHost;import org.elasticsearch.action.search.SearchRequest;import org.elasticsearch.action.search.SearchResponse;import org.elasticsearch.client.RequestOptions;import org.elasticsearch.client.RestClient;import org.elasticsearch.client.RestHighLevelClient;import org.elasticsearch.index.query.BoolQueryBuilder;import org.elasticsearch.index.query.QueryBuilder;import org.elasticsearch.index.query.QueryBuilders;import org.elasticsearch.search.SearchHit;import org.elasticsearch.search.SearchHits;import org.elasticsearch.search.builder.SearchSourceBuilder;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.util.StringUtils;import java.io.IOException;import java.util.ArrayList;import java.util.List;@Servicepublic class HotelService extends ServiceImpl<HotelMapper, Hotel> implements IHotelService {@Autowiredprivate IHotelService hotelService;private static RestHighLevelClient client=new RestHighLevelClient(RestClient.builder(HttpHost.create("http://120.48.46.177:9200")));private static ObjectMapper objectMapper = new ObjectMapper();/*** 1、进行DSL语句处理*** 2、装入pageresult*** 3、进行发送**** @param params* @return*/@Overridepublic PageResult multipleSearch(RequestParams params) throws IOException {// 拿到前端传递的参数String key = params.getKey();String brand = params.getBrand();String city = params.getCity();Integer maxPrice = params.getMaxPrice();Integer minPrice = params.getMinPrice();// 进行DSL语句拼接SearchRequest searchRequest = new SearchRequest("hotel");BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();// 进行搜索词的DSL语句拼接if (key != null&& !key.equals(" ")) {boolQueryBuilder.must(QueryBuilders.matchQuery("all",key));}else {boolQueryBuilder.must(QueryBuilders.matchAllQuery());}// 进行品牌的DSL语句拼接if (brand != null&& !brand.equals(" ")) {boolQueryBuilder.should(QueryBuilders.termQuery("brand",brand));}// 进行城市的DSL语句拼接if (city != null&& !city.equals(" ")) {boolQueryBuilder.filter(QueryBuilders.termQuery("city",city));}// 进行价格的DSL语句拼接if (maxPrice != null&&minPrice != null) {boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").gte(minPrice).lte(maxPrice));}searchRequest.source().query(boolQueryBuilder);SearchResponse searchResponse = client.search(searchRequest, RequestOptions.DEFAULT);return handleResponse(searchResponse);}public PageResult handleResponse(SearchResponse searchResponse) throws JsonProcessingException {PageResult result = new PageResult();ArrayList<HotelDoc> hotelDocs = new ArrayList<>();long total = searchResponse.getHits().getTotalHits().value;SearchHit[] hits = searchResponse.getHits().getHits();for (SearchHit hit : hits) {String json = hit.getSourceAsString();HotelDoc hotelDoc = objectMapper.readValue(json,HotelDoc.class);hotelDocs.add(hotelDoc);}result.setHotels(hotelDocs);result.setTotal(total);return result;}}
