黑马点评中商铺地址查询前端显示问题
这个页面存在以下前端问题，这个页面中选择美食之后往下翻是不能自动滚动分页查询所有的美食店铺数据的。前端往下翻没反应
但是还有个很奇怪的点就是前端点击距离之后滚动查询第一页查询了两次，如下图，点击距离之后除了第一页的数据查询了两次之外就其他就正常了
最后看了好久才知道是查询页面数据大小的问题
我的后端代码如下：
controller层
/** * 根据商铺类型分页查询商铺信息 * @param typeId 商铺类型 * @param current 页码 * @param x 经度 * @param y 纬度 * @return 商铺列表 */ @GetMapping("/of/type") public Result queryShopByType( @RequestParam("typeId") Integer typeId, @RequestParam(value = "current", defaultValue = "1") Integer current, @RequestParam("x") Double x, @RequestParam("y") Double y ) { // 调用Service层方法（修正方法名驼峰规范） return shopService.queryShopByType(typeId, current, x, y); }
serviceImpl层：
@Override public Result queryShopByType(Integer typeId, Integer current, Double x, Double y) { if(x==null || y==null){ //直接返回对应类型的店铺就行了 // 根据类型分页查询 Page<Shop> page = query() .eq("type_id", typeId) .page(new Page<>(current, SystemConstants.DEFAULT_PAGE_SIZE)); return Result.ok(page.getRecords()); } int from=(current-1)*SystemConstants.DEFAULT_PAGE_SIZE; int end=current*SystemConstants.DEFAULT_PAGE_SIZE; String key="geo:shop:type:"+typeId; // 2. 构造5000米的距离对象（核心：指定米为单位，5000m） Distance distance = new Distance(5000, Metrics.METERS); // 3. 完整的GEO圆形区域查询（补全所有参数） GeoResults<RedisGeoCommands.GeoLocation<String>> geoResults = stringRedisTemplate.opsForGeo() .search( key, // Redis的GEO集合Key（按商铺类型分组） GeoReference.fromCoordinate(new Point(x, y)), // 圆心坐标（x经度，y纬度） distance, // 圆形半径：5000米 // 查询参数配置：按距离由近到远+预查足够数据（为后续分页准备） RedisGeoCommands.GeoRadiusCommandArgs.newGeoRadiusArgs() .sortAscending() // 按距离从近到远排序（附近商户必备） .limit(end) .includeDistance() // 核心：让Redis返回每个元素到圆心的距离 .includeCoordinates() // 预查数据，避免分页漏条 ); // 4. 判空：geoResults为空 或 无内容，直接返回空列表（修复原判空不完整问题） if (geoResults == null || geoResults.getContent().isEmpty()) { return Result.ok(Collections.emptyList()); } // 5. 核心：Stream分页（skip+limit）并接收结果，提取【商铺ID+距离】 List<GeoResult<RedisGeoCommands.GeoLocation<String>>> pageGeoList = geoResults.getContent().stream() .skip(from) // 跳过前from条，实现分页 .limit(SystemConstants.DEFAULT_PAGE_SIZE) // 截取分页条数（一页的数量） .collect(Collectors.toList()); // 必须collect接收结果，否则跳过不生效 // 6. 提取商铺ID（批量查库，替代循环单查，提升性能10倍+） List<Long> shopIds = pageGeoList.stream() .map(geoResult -> Long.valueOf(geoResult.getContent().getName())) .collect(Collectors.toList()); if (shopIds.isEmpty()) { return Result.ok(Collections.emptyList()); } String shopIdstr = StringUtil.join(shopIds, ","); // 7. 批量查询商铺详情（MyBatis-Plus批量查，避免循环eq单查） List<Shop> shopList = query().in("id", shopIds).last(("ORDER BY FIELD(id, " +shopIdstr + ")")).list(); // 8. 给商铺赋值距离（并保证shopList顺序和pageGeoList一致） for (int i = 0; i < pageGeoList.size(); i++) { GeoResult<RedisGeoCommands.GeoLocation<String>> geoResult = pageGeoList.get(i); Shop shop = shopList.get(i); // 距离转Double，加非空判断（防止空指针） Double distValue = geoResult.getDistance().getValue(); shop.setDistance(distValue); // 给Shop的distance字段赋值 } return Result.ok(shopList); }
将DEFAULT_PAGE_SIZE的大小改为5以上就行了
