业务开发Day4-01-本章内容介绍
目录
- 文件上传下载
- 新增菜品
- 菜品信息分页查询
- 修改菜品
需要实现页面的功能
业务开发Day4-02-文件上传下载_文件上传下载介绍
内容
- 文件上传介绍
- 文件下载介绍
文件上传介绍
- 文件上传,也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程
- 文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能
文件上传时,对页面的form表单有如下要求:
- method=“post” 采用post方式提交数据
- enctype=“multipart/form-data” 采用multipart格式上传文件
- type=“file” 使用input的file控件上传
举例:
<form method="post" action="/common/upload" enctype="multipart/form-data">
<input name="myFile" type="file"/>
<input type="submit" value="提交" />
<form>
目前一些前端组件库也提供了相应的上传组件,但是底层原理还是基于form表单的文件上传
例如ElementUI中提供的upload上传组件:
服务端要接收客户端页面上传的文件,通常都会使用Apache的两个组件:
- commons-fileupload
- commons-io
Spring框架在spring-web包中对文件上传进行了封装,大大简化了服务端代码,我们只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件,例如:
文件下载介绍
- 文件下载,也称为download,是指将文件从服务器传输到本地计算机的过程
通过浏览器进行文件下载,通常有两种表现形式:
- 以附件形式下载,弹出保存对话框,将文件保存到指定磁盘目录
- 直接在浏览器中打开
通过浏览器进行文件下载,本质上就是服务端将文件以流的形式写回浏览器的过程。
业务开发Day4-03-文件上传下载_文件上传代码实现1
文件上传代码实现1
文件上传,页面端可以使用ElementUI提供的上传组件。
可以直接使用资料中提供的上传页面,位置:资料/文件上传下载页面/upload.html
upload.html-前端上传文件页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
<link rel="stylesheet" href="../../styles/common.css" />
<link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="addBrand-container" id="food-add-app">
<div class="container">
<el-upload class="avatar-uploader"
action="/common/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload"
ref="upload">
<img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/index.js"></script>
<script>
new Vue({
el: '#food-add-app',
data() {
return {
imageUrl: ''
}
},
methods: {
handleAvatarSuccess (response, file, fileList) {
this.imageUrl = `/common/download?name=${response.data}`
},
beforeUpload (file) {
if(file){
const suffix = file.name.split('.')[1]
const size = file.size / 1024 / 1024 < 2
if(['png','jpeg','jpg'].indexOf(suffix) < 0){
this.$message.error('上传图片只支持 png、jpeg、jpg 格式!')
this.$refs.upload.clearFiles()
return false
}
if(!size){
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
return file
}
}
}
})
</script>
</body>
</html>
放置upload.html代码的位置(需创建一个demo文件夹)
在controller包下创建CommonController类,代码内容如下:
package com.itzq.reggie.controller;
import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
//file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件删除
log.info(file.toString());
return null;
}
}
注意:
- MultipartFile是spring类型,代表HTML中form data方式上传的文件,包含二进制数据+文件名称。
- MultipartFile后面的参数名必须为file,因为需要和前端页面的name保持一致,否则不会生效
启动项目,在浏览器地址栏输入:http://localhost:8080/backend/page/demo/upload.html
-
点击上传图片,并上传一个符合文件上传格式,符合文件上传大小的图片
-
后端返回给前端的msg数据为NOTLOGIN,可知被filter过滤器拦截,返还还未登录的信息
-
因此我们需要先在页面上登录,登录后会在服务端的内存中存储session对象,session的作用域为一次会话范围内
-
在浏览器地址栏中输入:http://localhost:8080/backend/page/demo/upload.html,即可避免被filter过滤器拦截
被filter拦截
登录后可正常上传文件,在此处添加断点,以debug方式启动项目
来到文件上传页面,点击上传文件,进入断点模式,查看文件的存储位置
在磁盘中寻找到文件,发现该文件为临时文件(TMP文件),所以需要转存到指定位置,否则本次请求完成后临时文件删除
放行后发现临时文件消失
业务开发Day4-04-文件上传下载_文件上传代码实现2
文件上传代码实现2
在开发上传文件代码前,先再LoginCheckFilter类的urls数组中添加 "/common/"**
作用:避免每次上传文件时都需要进行登录操作
将临时文件存储存储到指定位置
package com.itzq.reggie.controller;
import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
//file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件删除
log.info(file.toString());
try {
//将临时文件存储到指定位置
file.transferTo(new File("D:\\hello.jpg"));
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
启动项目,浏览器地址栏输入地址:http://localhost:8080/backend/page/demo/upload.html
- 上传图片,查看指定存储文件的位置是否有上传的文件
文件转存的位置改为动态可配置的,通过配置文件的方式指定
- 使用 @Value(“${reggie.path}”)读取到配置文件中的动态转存位置
- 使用uuid方式重新生成文件名,避免文件名重复造成文件覆盖
- 通过获取原文件名来截取文件后缀
package com.itzq.reggie.controller;
import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {
@Value("${reggie.path}")
private String basePath;
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
//file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件删除
log.info(file.toString());
//获取原始的文件名
String originalFilename = file.getOriginalFilename();
//获取上传的文件后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//使用uuid重新生成文件名,防止文件名重复造成文件覆盖
String fileName = UUID.randomUUID().toString() + suffix;
try {
//将临时文件存储到指定位置
file.transferTo(new File(basePath + fileName));
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
重启项目,上传图片,在动态指定的位置上发现上传的文件
指定的目录或许不存在于磁盘中,所以我们要为程序添加逻辑代码
若目录不存在于磁盘中,则需要创建该目录
具体代码
//创建一个目录对象
File dir = new File(basePath);
//判断目录是否存在
if (!dir.exists()){
//目录不存在需要创建
dir.mkdir();
}
测试,
将配置文件中的目录信息修改为本地磁盘中不存在的目录
重启项目,上传图片,发现创建了一个新的目录,并将文件放入该目录下
服务端需返回文件名给前端,便于后续开发使用
业务开发Day4-05-文件上传下载_文件下载代码实现&测试
文件下载代码实现
前端处理
前端页面ElementUI的upload组件会在上传完图片后,触发img组件发送请求,服务端以流的形式(输出流)将文件写回浏览器,在浏览器中展示图片
定义前端发送回显图片请求的地址
在CommonController类中添加download方法
- 通过输入流读取文件内容
- 通过输出流将文件写回浏览器,在浏览器展示图片
- 关闭输入输出流,释放资源
@GetMapping("/download")
public void download(String name, HttpServletResponse response){
try {
//输入流,通过输入流读取文件内容
FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));
//输出流,通过输出流将文件写回浏览器,在浏览器展示图片
ServletOutputStream outputStream = response.getOutputStream();
//代表图片文件
response.setContentType("image/jpeg");
int len = 0;
byte[] bytes = new byte[1024];
while ((len = fileInputStream.read(bytes)) != -1){
//向response缓冲区中写入字节,再由Tomcat服务器将字节内容组成Http响应返回给浏览器。
outputStream.write(bytes,0,len);
//所储存的数据全部清空
outputStream.flush();
}
//关闭流
fileInputStream.close();
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
测试
启动项目,上传图片,图片回显到页面
业务开发Day4-06-新增菜品_需求分析&数据模型
需求分析
- 后台系统中可以管理菜品信息,通过新增功能来添加一个新的菜品
- 在添加菜品时需要选择当前菜品所属的菜品分类,并且需要上传菜品图片
- 在移动端会按照菜品分类来展示对应的菜品信息。
数据模型
dish表
dish_flavor表
新增菜品分类,会将前端传过来的数据保存在这两张表中
业务开发Day4-07-新增菜品_代码开发_查询分类数据
代码开发-准备工作
在开发业务功能前,先将需要用到的类和接口基本结构创建好:
- 实体类DishFlavor(直接从课程资料中导入即可,Dish实体前面课程中已经导入过了)
- Mapper接口DishFlavorMapper
- 业务层接口DishFlavorService
- 业务层实现类DishFlavorServicelmpl
- 控制层DishController
实体类DishFlavor
package com.itzq.reggie.entity;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;
/**
菜品口味
*/
@Data
public class DishFlavor implements Serializable {
private static final long serialVersionUID = 1L;
private Long id;
//菜品id
private Long dishId;
//口味名称
private String name;
//口味数据list
private String value;
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
@TableField(fill = FieldFill.INSERT_UPDATE)
private LocalDateTime updateTime;
@TableField(fill = FieldFill.INSERT)
private Long createUser;
@TableField(fill = FieldFill.INSERT_UPDATE)
private Long updateUser;
//是否删除
private Integer isDeleted;
}
Mapper接口DishFlavorMapper
package com.itzq.reggie.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.itzq.reggie.entity.DishFlavor;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface DishFlavorMapper extends BaseMapper<DishFlavor> {
}
业务层接口DishFlavorService
package com.itzq.reggie.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.itzq.reggie.entity.DishFlavor;
public interface DishFlavorService extends IService<DishFlavor> {
}
业务层实现类DishFlavorServicelmpl
package com.itzq.reggie.service.Impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itzq.reggie.entity.DishFlavor;
import com.itzq.reggie.mapper.DishFlavorMapper;
import com.itzq.reggie.service.DishFlavorService;
import org.springframework.stereotype.Service;
@Service
public class DishFlavorServicelmpl extends ServiceImpl<DishFlavorMapper, DishFlavor> implements DishFlavorService {
}
控制层DishController
package com.itzq.reggie.controller;
import com.itzq.reggie.service.DishFlavorService;
import com.itzq.reggie.service.DishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/dish")
@Slf4j
public class DishController {
@Autowired
private DishService dishService;
@Autowired
private DishFlavorService dishFlavorService;
}
代码开发-梳理交互过程
在开发代码之前,需要梳理一下新增菜品时前端页面和服务端的交互过程:
- 页面(backend/page/food/add.html)发送ajax请求,请求服务端获取菜品分类数据并展示到下拉框中
- 页面发送请求进行图片上传,请求服务端将图片保存到服务器
- 页面发送请求进行图片下载,将上传的图片进行回显
- 点击保存按钮,发送ajax请求,将菜品相关数据以json形式提交到服务端
开发新增菜品功能,其实就是在服务端编写代码去处理前端页面发送的这4次请求即可。
添加菜品页面展示
业务开发Day4-08-新增菜品_代码开发_查询分类数据
前端分析
一个vue实例被创建后会调用钩子函数,执行其中的方法
来到getDishList方法,执行其中getCategoryList方法
执行getCategoryList方法向服务端发送ajax请求,请求方式为get
在CategoryController类中,添加list方法,具体代码如下:
@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);
}
启动项目,进入菜品管理,点击菜品分类下拉框,成功获得数据
业务开发Day4-09-新增菜品_代码开发_接收页面提交的数据
接收图片文件
在本章节02-05,我们已经将图片的上传下载准备完毕
测试
添加一张图片,并回显图片
注意事项
-
价格在前端已被处理,在点击提交按钮后,先执行前端的submitForm方法,并将price做相应的处理(在页面中单位为元,在数据库中存储的单位为分),再通过ajax请求向后端提供相应的json数据
-
因为Dish实体类不满足接收flavor参数,即需要导入DishDto,用于封装页面提交的数据
DTO,全称为Data Transfer Object,即数据传输对象,一般用于展示层与服务层之间的数据传输。
- 在reggie包下,创建一个新包为dto
- 在该包下创建DishDto 数据传输类
package com.itzq.reggie.dto;
import com.itzq.reggie.entity.Dish;
import com.itzq.reggie.entity.DishFlavor;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
@Data
public class DishDto extends Dish {
private List<DishFlavor> flavors = new ArrayList<>();
private String categoryName;
private Integer copies;
}
代码开发
在DishController类中添加save方法
- 代码逻辑:测试是否可以正常的接收前端传过来的json数据
- 注意:因为前端传来的是json数据,所以我们需要在参数前添加*@RequestBody*注解
- 具体代码如下:
@PostMapping
public R<String> save(@RequestBody DishDto dishDto){
log.info("接收的dishDto数据:{}",dishDto.toString());
return null;
}
测试
debug方式启动项目,在标记的行处添加断点,用于查看数据
在添加菜品页面输入数据,点击保存
来到断点处,查看到数据准确无误的提交到服务端
业务开发Day4-10-新增菜品_代码开发_保存数据到菜品表和菜品口味表
分析
- 在保存数据到菜品表和菜品口味表的过程中,我们需要对保存到菜品口味表的数据做相应的处理
- 取出dishDto的dishId,通过stream流对每一组flavor的dishId赋值
- 保存菜品口味到菜品数据表
代码开发
在DishServicelmpl类中添加如下代码
package com.itzq.reggie.service.Impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itzq.reggie.dto.DishDto;
import com.itzq.reggie.entity.Dish;
import com.itzq.reggie.entity.DishFlavor;
import com.itzq.reggie.mapper.DishMapper;
import com.itzq.reggie.service.DishFlavorService;
import com.itzq.reggie.service.DishService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
import java.util.stream.Collectors;
@Service
@Transactional
public class DishServicelmpl extends ServiceImpl<DishMapper, Dish> implements DishService {
@Autowired
DishFlavorService dishFlavorService;
@Override
public void saveWithFlavor(DishDto dishDto) {
//保存菜品的基本信息到菜品表
super.save(dishDto);
//获取菜品id
Long dishId = dishDto.getId();
//获取菜品口味
List<DishFlavor> flavors = dishDto.getFlavors();
//将每条flavor的dishId赋上值
flavors = flavors.stream().map((item) -> {
item.setDishId(dishId);
return item;
}).collect(Collectors.toList());
//保存菜品口味数据到菜品口味表
dishFlavorService.saveBatch(flavors);
}
}
在ReggieApplication主启动类上,添加注解:@EnableTransactionManagement
业务开发Day4-11-新增菜品_代码开发_功能测试
功能测试
前提:在DishController类的save方法中添加代码
@PostMapping
public R<String> save(@RequestBody DishDto dishDto){
log.info("接收的dishDto数据:{}",dishDto.toString());
//保存数据到数据库
dishService.saveWithFlavor(dishDto);
return R.success("新增菜品成功");
}
重启项目,进入添加菜品页面,输入数据,点击保存
dish表中添加数据成功
dish_flavor表中添加数据成功,并成功为每组flavor数据附上dishId
业务开发Day4-12-菜品信息分页查询_需求分析
需求分析
- 系统中的菜品数据很多的时候,如果在一个页面中全部展示出来会显得比较乱,不便于查看
- 所以一般的系统中都会以分页的方式来展示列表数据。
图片和菜品分类比较特殊
- 图片列:会用到文件的下载功能
- 菜品分类列:只保存了菜品的category_id,需通过查找category_id所对应的菜品分类名称,从而回显数据
业务开发Day4-13-菜品信息分页查询_代码开发1
代码开发-梳理交互过程
在开发代码之前,需要梳理一下菜品分页查询时前端页面和服务端的交互过程:
- 页面(backend/page/food/list.html)发送ajax请求,将分页查询参数(page、pageSize、name),提交到服务端,获取分页数据
- 页面发送请求,请求服务端进行图片下载,用于页面图片展示
开发菜品信息分页查询功能,其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。
代码
在DishController下,添加page方法,进行分页查询
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name){
//构造分页构造器对象
Page<Dish> pageInfo = new Page<>();
//条件构造器
LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
//添加条件
queryWrapper.like(name != null,Dish::getName,name);
queryWrapper.orderByDesc(Dish::getUpdateTime);
//执行分页查询
dishService.page(pageInfo,queryWrapper);
return R.success(pageInfo);
}
测试
- 为什么只有宫保鸡丁有图片的展示效果,因为这是在刚刚添加菜品的时候添加的数据
- 保证了在服务端存在对应图片名的信息,而其他是菜品是直接从sql文件导入,服务端不一定有对应的图片名
- 为什么菜品分类中没有数据?
- 因为服务端传给前端的菜品分类数据不满足前端的要求,所以在页面中不能回显菜品分类数据
业务开发Day4-14-菜品信息分页查询_代码开发2
分析
在前端页面发现菜品分类对应的prop属性名为categoryName
但我们在响应的数据当中并没有发现categoryName字段
- 页面需要什么数据,服务端就应该返还什么样的数据,所以Dish对象不满足该页面要求
- 在之前我们创建了DishDto类,发现类中的属性名正好和前端的属性名对应
代码
修改DishController中的page方法
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name){
//构造分页构造器对象
Page<Dish> pageInfo = new Page<>();
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");
//获取原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
Category category = categoryService.getById(categoryId);
String categoryName = category.getName();
dishDto.setCategoryName(categoryName);
return dishDto;
}).collect(Collectors.toList());
dishDtoPage.setRecords(list);
return R.success(dishDtoPage);
}
业务开发Day4-15-菜品信息分页查询_功能测试
功能测试
前提
我们需要在分页方法中添加判空条件,若查询的数据为空,经过判断后跳过部分代码,就不会爆空指针异常
启动项目,点击菜品管理,可以看见页面展现的菜品分类信息
业务开发Day4-16-修改菜品_需求分析&梳理交互过程
需求分析
- 在菜品管理列表页面点击修改按钮,跳转到修改菜品页面
- 在修改页面回显菜品相关信息并进行修改
- 最后点击确定按钮完成修改操作
代码开发-梳理交互过程
在开发代码之前,需要梳理一下修改菜品时前端页面( add.html)和服务端的交互过程:
- 页面发送ajax请求,请求服务端获取分类数据,用于菜品分类下拉框中数据展示(已完成)
- 页面发送ajax请求,请求服务端,根据id查询当前菜品信息,用于菜品信息回显
- 页面发送请求,请求服务端进行图片下载,用于页图片回显(已完成)
- 点击保存按钮,页面发送ajax请求,将修改后的菜品相关数据以json形式提交到服务端
开发修改菜品功能,其实就是在服务端编写代码去处理前端页面发送的这4次请求即可。
业务开发Day4-17-修改菜品_代码开发_根据id查询对应的菜品和口味信息
代码
在DishService接口中添加方法getByIdWithFlavor
在DishServicelmpl中实现getByIdWithFlavor方法,并添加逻辑代码
- 根据服务端接收的id,查询菜品的基本信息-dish
- 创建dishDto对象,并将查询到的dish对象属性赋值给dishDto
- 根据查询到的dish对象,可以取出对应的菜品id,再通过等值条件查询,查询到DishFlavor数据信息
- 将查询到的flavor数据信息使用set方法赋值给dishDto对象
- 返回dishDto对象
@Override
public DishDto getByIdWithFlavor(Long id) {
//通过id查询菜品基本信息
Dish dish = super.getById(id);
//创建dto对象
DishDto dishDto = new DishDto();
//对象拷贝
BeanUtils.copyProperties(dish,dishDto);
//条件查询flavor
LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(DishFlavor::getDishId,dish.getId());
List<DishFlavor> list = dishFlavorService.list(queryWrapper);
//将查询到的flavor赋值到dto对象中
dishDto.setFlavors(list);
return dishDto;
}
在DishController中添加get方法,实现添加在DishServicelmpl中的逻辑代码,返回查询到的数据信息
@GetMapping("/{id}")
public R<DishDto> get(@PathVariable Long id){
//查询
DishDto dishDto = dishService.getByIdWithFlavor(id);
return R.success(dishDto);
}
业务开发Day4-18-修改菜品_代码开发_测试数据回显
测试数据回显
在DishController的get方法中加入断点
进入菜品管理,点击修改菜品按钮,程序跳转到断点处,查询回显的dishDto数据是否成功
页面回显成功
业务开发Day4-19-修改菜品_代码开发_修改菜品信息和口味信息
分析前端页面发送的请求
-
请求的地址::http://localhost:8080/dish
-
请求的方式:put
-
发送到服务端的数据为json数据
代码
在DishService接口中添加updateWithFlavor方法
DishServicelmpl类中实现DishService定义的方法,并添加代码逻辑
- 根据id修改菜品的基本信息
- 通过dish_id,删除菜品的flavor
- 获取前端提交的flavor数据
- 为条flavor的dishId属性赋值
- 将数据批量保存到dish_flavor数据库
@Override
public void updateWithFlavor(DishDto dishDto) {
//根据id修改菜品的基本信息
super.updateById(dishDto);
//通过dish_id,删除菜品的flavor
LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(DishFlavor::getDishId,dishDto.getId());
dishFlavorService.remove(queryWrapper);
//获取前端提交的flavor数据
List<DishFlavor> flavors = dishDto.getFlavors();
//将每条flavor的dishId赋值
flavors = flavors.stream().map((item) -> {
item.setDishId(dishDto.getId());
return item;
}).collect(Collectors.toList());
//将数据批量保存到dish_flavor数据库
dishFlavorService.saveBatch(flavors);
}
在DishController类中添加方法update,并调用updateWithFlavor方法实现表中数据的修改
@PutMapping
public R<String> update(@RequestBody DishDto dishDto){
log.info("接收的dishDto数据:{}",dishDto.toString());
//更新数据库中的数据
dishService.updateWithFlavor(dishDto);
return R.success("新增菜品成功");
}
业务开发Day4-20-修改菜品_功能测试
功能测试
启动项目,来到菜品管理界面
-
要修改菜品的初始值
-
点击修改,输入想要修改的信息,点击保存
-
跳转到菜品管理界面,修改菜品信息成功