前端页面部分数据不显示问题

 

 不显示菜品分类。原因是给前端返回的是一个Dish对象，里面的属性categoryId不能被前端解析，在list.html中，菜品分类这一列标识为：

　　

<el-table-column
 prop="categoryName"
 label="菜品分类"
></el-table-column>

所以封装一个DishDTO类：

@Data
public class DishDto extends Dish {

    private List<DishFlavor> flavors = new ArrayList<>();

    private String categoryName;

    private Integer copies;
}

查的时候这么查：

 1 @GetMapping("/page")
 2     public R<Page<DishDto>> page(int page, int pageSize, String name) {
 3         Page<Dish> dishPage = new Page<>(page, pageSize);
 4         dishService.page(dishPage, new QueryWrapper<Dish>().like(StringUtils.isNotEmpty(name), "name", name).orderByDesc("update_time"));
 5 
 6         Page<DishDto> dishDtoPage = new Page<>();
 7         /**
 8          * protected List<T> records;
 9          * records里保存的就是Dish、DishDTO对象，拷贝的时候，单独处理
10          */
11         BeanUtils.copyProperties(dishPage, dishDtoPage, "records");
12         List<DishDto> dishDtos = dishPage.getRecords().stream().map((item) -> {
13             /**
14              * 因为Dish里只存了categoryId，没有前端要的categoryName
15              * 所以我们根据categoryId查一下categoryName
16              */
17             DishDto dishDto = new DishDto();
18             BeanUtils.copyProperties(item, dishDto);
19             Long categoryId = item.getCategoryId();
20             String categoryName = categoryService.getById(categoryId).getName();
21             dishDto.setCategoryName(categoryName);
22             return dishDto;
23         }).collect(Collectors.toList());
24         dishDtoPage.setRecords(dishDtos);
25         return R.success(dishDtoPage);
26     }

 

标签：categoryName,name,前端,page,Dish,new,数据,categoryId,页面
来源： https://www.cnblogs.com/WilsonEdwards/p/16321455.html