新增菜品以及分页请求(瑞吉外卖)
图片的上传和下载就不说了
1.新增
在进入前端页面的时候发送过一次请求
就是这个请求,通过浏览器可以具体
先完成这个
1.1下拉框
思路:就是调用service层里面的list的那个方法,然后写一些排序的条件
代码
/**
* 根据条件查询分类数据
* @param category
* @return
*/
@GetMapping("/list")
public R<List<Category>> list(Category category){
//条件构造器
LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper<>();
//添加条件
queryWrapper.eq(category.getType() != null,Category::getType,category.getType());
//添加排序条件
queryWrapper.orderByAsc(Category::getSort).orderByDesc(Category::getUpdateTime);
List<Category> list = categoryService.list(queryWrapper);
return R.success(list);
}
1.2新增页面
在开发代码之前,需要梳理一下新增菜品时前端页面和服务端的交互过程:
1、页面(backend/page/food/add.html)发送ajax请求,请求服务端获取菜品分类数据并展示到下拉框中2、页面发送请求进行图片上传,请求服务端将图片保存到服务器
3、页面发送请求进行图片下载,将上传的图片进行回显
4、点击保存按钮,发送ajax请求,将菜品相关数据以json形式提交到服务端
开发新增菜品功能,其实就是在服务端编写代码去处理前端页面发送的这4次请求即可。
1.21先看发送的ajax请求
很明确的可以看出来是一个post的请求,然后重点看数据,会发现其实这个是对两个表进行修改的
其次就是关于flavors这个数据,从前端页面来看是封装成了一个list的集合
浏览页面代码
如果是dish可以吗很明显是不对的,因为dish的属性里面根本没有flavors这个属性
所以导入一个dto的类
DTO,全称为Data Transfer Object,即数据传输对象,一般用于展示层与服务层之间的数据传输。
//这个类就将flavors做成了一个集合,并且继承了dish,将两个类整合成一个类了
@Data
public class DishDto extends Dish {
private List<DishFlavor> flavors = new ArrayList<>();
private String categoryName;
private Integer copies;
}
所以我们需要对service层中的save方法进行重写
1.2.2如何重写这个service
明确需求,这个service的对象是dto,dto里面封装了一个list集合,所以基本信息和这个list集合其实是分开的是两部分
那就先保存基本信息,然后在调用service的saveBatch全部保存下来
既然是两部分就需要开启一个事务啦
@Transactional
public void saveWithFlavor(DishDto dishDto) {
//保存菜品的基本信息到菜品表dish
this.save(dishDto);
Long dishId = dishDto.getId();//菜品id
//菜品口味
List<DishFlavor> flavors = dishDto.getFlavors();
flavors = flavors.stream().map((item) -> {
item.setDishId(dishId);
return item;
}).collect(Collectors.toList());
//保存菜品口味数据到菜品口味表dish_flavor
dishFlavorService.saveBatch(flavors);
}
当然这里你也可以用for循环的方式来遍历
// 获取菜品口味列表
List<DishFlavor> flavors = dishDto.getFlavors();
// 使用循环遍历每个口味对象
for (int i = 0; i < flavors.size(); i++) {
DishFlavor flavor = flavors.get(i);
flavor.setDishId(dishId); // 将菜品ID设置到每个口味对象中
flavors.set(i, flavor); // 更新列表中的口味对象
}
// 保存菜品口味数据到菜品口味表dish_flavor
dishFlavorService.saveBatch(flavors);
然后在service层里面调用就可以了
可能会有些疑惑对这个代码
//菜品口味
List<DishFlavor> flavors = dishDto.getFlavors();
flavors = flavors.stream().map((item) -> {
item.setDishId(dishId);
return item;
}).collect(Collectors.toList());
//使用collect方法将流中的元素收集到一个新的列表中。Collectors.toList()是一个收集器,指定了收集的结果应该是一个列表
想如何将这两个表关联起来?
-
在
map
操作的lambda表达式中,对每个DishFlavor
对象调用setDishId
方法,将dishId
(菜品的ID)设置到该对象中。这样,每个口味对象就与特定的菜品关联起来。
1.2.3调用
@PostMapping
public R<String> save(@RequestBody DishDto dishDto){
log.info(dishDto.toString());
dishService.savithFlavor(dishDto);
return R.success("新增菜品成功");
}
记得页面返回的是一个json数据
2.分页
分页的时候会有一个问题
@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){
//构造分页构造器对象
Page<Dish> pageInfo = new Page<>(page,pageSize);
//条件构造器
LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
//添加过滤条件
queryWrapper.like(name != null,Dish::getName,name);
//添加排序条件
queryWrapper.orderByDesc(Dish::getUpdateTime);
//执行分页查询
dishService.page(pageInfo,queryWrapper);
return R.success(pageInfo);
}
如果是这样的话页面不会显示菜品分类,为什么了
很简单,在dish里面并没有我们需要的这个Category,只有关于他的id
所以我们这里的类又需要dto
2.1思路
依旧写一个分页构造器,里面的泛型写dto,并且将前面的赋值给这个新的
Page<DishDto> dishDtoPage = new Page<>();
BeanUtils.copyProperties(pageInfo,dishDtoPage,"records");
这里为什么需要records
public class Page<T> implements IPage<T> {
private static final long serialVersionUID = 8545996863226528798L;
protected List<T> records;
protected long total;
protected long size;
protected long current;
protected List<OrderItem> orders;
protected boolean optimizeCountSql;
protected boolean isSearchCount;
protected boolean hitCount;
protected String countId;
protected Long maxLimit;
这里的list其实就是我们页面的所有元素
所以相当于我们要往这个里面设置一些东西
所以先获得这个list
List<Dish> records = pageInfo.getRecords();
遍历这个然后通过id来找名
List<DishDto> list = records.stream().map((item) -> {
DishDto dishDto = new DishDto();
BeanUtils.copyProperties(item,dishDto);
//值得注意
Long categoryId = item.getCategoryId();//分类id
//根据id查询分类对象
Category category = categoryService.getById(categoryId);
if(category != null){
String categoryName = category.getName();
dishDto.setCategoryName(categoryName);
}
return dishDto;
}).collect(Collectors.toList());
最后才将这个list重新设置
dishDtoPage.setRecords(list);
2.2完整的代码
@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){
//构造分页构造器对象
Page<Dish> pageInfo = new Page<>(page,pageSize);
Page<DishDto> dishDtoPage = new Page<>();
//条件构造器
LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
//添加过滤条件
queryWrapper.like(name != null,Dish::getName,name);
//添加排序条件
queryWrapper.orderByDesc(Dish::getUpdateTime);
//执行分页查询
dishService.page(pageInfo,queryWrapper);
//对象拷贝
BeanUtils.copyProperties(pageInfo,dishDtoPage,"records");
List<Dish> records = pageInfo.getRecords();
List<DishDto> list = records.stream().map((item) -> {
DishDto dishDto = new DishDto();
BeanUtils.copyProperties(item,dishDto);
Long categoryId = item.getCategoryId();//分类id
//根据id查询分类对象
Category category = categoryService.getById(categoryId);
if(category != null){
String categoryName = category.getName();
dishDto.setCategoryName(categoryName);
}
return dishDto;
}).collect(Collectors.toList());
dishDtoPage.setRecords(list);
return R.success(dishDtoPage);
}
Category category = categoryService.getById(categoryId);
if(category != null){
String categoryName = category.getName();
dishDto.setCategoryName(categoryName);
}
return dishDto;
}).collect(Collectors.toList());
dishDtoPage.setRecords(list);
return R.success(dishDtoPage);
}