瑞吉外卖day04笔记

最新推荐文章于 2023-03-10 00:30:36 发布
最新推荐文章于 2023-03-10 00:30:36 发布
阅读量380 收藏
点赞数 1
分类专栏： 瑞吉外卖 文章标签： java spring spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43618464/article/details/126292311
版权

一、文件上传下载

1.1 文件上传介绍

文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。

文件上传时，对页面的form表单有如下要求：

表单属性取值说明
methodpost必须选择post方式提交
enctypemultipart/form-data采用multipart格式上传文件
typefile使用input的file控件上传

1. 前端介绍

1). 简单html页面表单

<form method="post" action="/common/upload" enctype="multipart/form-data">
    <input name="myFile" type="file"  />
    <input type="submit" value="提交" /> 
</form>

2). ElementUI中提供的upload上传组件

目前一些前端组件库也提供了相应的上传组件，但是底层原理还是基于form表单的文件上传。

image-20220807160953182

2.服务端介绍

服务端要接收客户端页面上传的文件，通常都会使用Apache的两个组件：

  • commons-fileupload

  • commons-io

而Spring框架在spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件，例如：

/**
 * 文件上传
 * @param file
 * @return
 */
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
    System.out.println(file);
    return R.success(fileName);
}

1.2 文件下载介绍

文件下载，也称为download，是指将文件从服务器传输到本地计算机的过程。通过浏览器进行文件下载，通常有两种表现形式：

1). 以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录

image-20220807161038817

2). 直接在浏览器中打开

而今天所需要实现的菜品展示，表现形式为在浏览器中直接打开。

image-20220807161047354

通过浏览器进行文件下载，本质上就是服务端将文件以流的形式写回浏览器的过程。

1.3 文件上传代码实现

1.导入文件上传页面

<!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" />
    <link rel="shortcut icon" href="../../favicon.ico">
</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>

2.配置文件存储路径

需要在application.yml中定义文件存储路径

reggie:
  path: D:\img\

2.添加Controller

编写文件上传的方法, 通过MultipartFile类型的参数即可接收上传的文件, 方法形参的名称需要与页面的file域的name属性一致。

所在包: com.itheima.reggie.controller

上传逻辑:

1). 获取文件的原始文件名, 通过原始文件名获取文件后缀

2). 通过UUID重新声明文件名, 文件名称重复造成文件覆盖

3). 创建文件存放目录

4). 将上传的临时文件转存到指定位置

/**
 * @auther xiaochen
 * @create 2022-08-07 16:16
 */
@Slf4j
@RestController
@RequestMapping("/common")
public class CommonController {
    @Value("${reggie.path}")
    private String basePath;

    //文件上传
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file) {
        //file 是一个临时文件，需要转存到指定位置，否则请求完成后临时文件会删除
        //log.info("file:{}",file.toString());

        //原始文件名
        String originalFilename = file.getOriginalFilename();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        //使用UUID随机生成文件名，防止因为文件名相同造成文件覆盖
        String fileName = UUID.randomUUID().toString() + suffix;

        //创建一个目录对象
        File dir = new File(basePath);
        //判断当前目录是否存在
        if (!dir.exists()) {
            //目录不存在
            dir.mkdirs();
        }

        try {
            //将临时文件转存到指定位置
            file.transferTo(new File(basePath + fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return R.success(fileName);
    }
}

3.在过滤器中进行路径放行

image-20220807161831315

4.测试

成功实现文件上传。

image-20220807162005372

1.4 文件下载代码实现

1.前端代码

文件下载，前端页面可以使用标签展示下载的图片。

<img v-if="imageUrl" :src="imageUrl" class="avatar"></img>

那么，通过标签如何展示图片数据呢，接下来我们来解析一下具体的流程：

image-20220807163952168

在文件上传成功后，在 handleAvatarSuccess 方法中获取文件上传成功之后返回的数据(文件名)，然后调用 /common/download?name=xxx 进行文件的下载。在这里，我们想让上传的照片能够在页面展示出来，所以我们就需要在服务端将文件以流的形式写回浏览器。

2.后端代码

在 CommonController 中定义方法download，并接收页面传递的参数name，然后读取图片文件的数据，然后以流的形式写回浏览器。

具体逻辑如下：

1). 定义输入流，通过输入流读取文件内容

2). 通过response对象，获取到输出流

3). 通过response对象设置响应数据格式(image/jpeg)

4). 通过输入流读取文件数据，然后通过上述的输出流写回浏览器

5). 关闭资源

代码：

//文件下载
@GetMapping("/download")
public void download(String name, HttpServletResponse response){
    try {
        //输入流，通过输入流读取文件内容
        FileInputStream fileInputStream=new FileInputStream(new File(basePath+name));
        //输出流，通过输出流将文件写回浏览器，在浏览器中展示图片
        ServletOutputStream outputStream = response.getOutputStream();

        int len=0;
        byte[] bytes = new byte[1024];
        while ((len=fileInputStream.read(bytes))!=-1){
            outputStream.write(bytes,0,len);
            outputStream.flush();
        }
        outputStream.close();
        fileInputStream.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

3.测试

图片正常展示

image-20220807164247038

二、新增菜品

2.1 需求分析

后台系统中可以管理菜品信息，通过 新增功能来添加一个新的菜品，在添加菜品时需要选择当前菜品所属的菜品分类，并且需要上传菜品图片，在移动端会按照菜品分类来展示对应的菜品信息 。

image-20220807171606466

2.2 数据模型

image-20220807171635111

新增菜品，其实就是将新增页面录入的菜品信息插入到dish表，如果添加了口味做法，还需要向dish_flavor表插入数据。所以在新增菜品时，涉及到两个表：

表结构说明
dish菜品表
dish_flavor菜品口味表
  1. 菜品表:dish

image-20220807171648611

  1. 菜品口味表:dish_flavor

image-20220807171701776

2.3 准备工作

在开发业务功能前，先将需要用到的类和接口基本结构创建好：

1、实体类 DishFlavor

package com.itheima.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;

}

2、Mapper接口DishFlavorMapper

/**
 * @auther xiaochen
 * @create 2022-08-07 17:06
 */
@Mapper
public interface DishFlavorMapper extends BaseMapper<DishFlavor> {
}

3、业务层接口 DishFlavorService

/**
 * @auther xiaochen
 * @create 2022-08-07 17:07
 */
public interface DishFlavorService extends IService<DishFlavor> {
}

4、业务层实现类 DishFlavorServiceImpl

/**
 * @auther xiaochen
 * @create 2022-08-07 17:07
 */
@Service
public class DishFlavorServiceImpl extends ServiceImpl<DishFlavorMapper, DishFlavor> implements DishFlavorService {
}

5、 控制层 DishController

菜品及菜品口味的相关操作，统一使用这一个controller。

/**
 * 菜品管理
 *
 * @auther xiaochen
 * @create 2022-08-07 17:08
 */
@RestController
@RequestMapping("/dish")
public class DishController {

    @Autowired
    private DishService dishService;

    @Autowired
    private DishFlavorService dishFlavorService;



}

2.4 前端页面分析

在开发代码之前，需要梳理一下新增菜品时前端页面和服务端的交互过程。

  1. 点击新建菜品按钮, 访问页面(backend/page/food/add.html), 页面加载时发送ajax请求，请求服务端获取菜品分类数据并展示到下拉框中

  2. 页面发送请求进行图片上传，请求服务端将图片保存到服务器(上传功能已实现)

  3. 页面发送请求进行图片下载，将上传的图片进行回显(下载功能已实现)

  4. 点击保存按钮，发送ajax请求，将菜品相关数据以json形式提交到服务端

开发新增菜品功能，其实就是在服务端编写代码去处理前端页面发送的这4次请求(上传、下载已实现)即可。经过上述的分析，我们还需要在服务端实现两块功能：

A. 菜品分类数据列表查询, 具体请求信息整理如下 :

请求说明
请求方式GET
请求路径/category/list
请求参数?type=1

B. 保存菜品信息, 具体请求信息整理如下 :

请求说明
请求方式POST
请求路径/dish
请求参数json格式

2.5 代码实现

1.菜品分类查询

在CategoryController中增加方法实现菜品分类查询，根据分类进行查询，并对查询的结果按照sort排序字段进行升序排序，如果sort相同，再按照修改时间倒序排序。

/**
 * 根据条件查询分类数据
 *
 * @param category
 * @return
 */
@GetMapping("/list")
public R<List<Category>> list(Category category) {
    //条件构造器
    LambdaQueryWrapper<Category> lambdaQueryWrapper = new LambdaQueryWrapper<>();
    //添加条件
    lambdaQueryWrapper.eq(category.getType() != null, Category::getType, category.getType());
    //添加排序条件
    lambdaQueryWrapper.orderByAsc(Category::getSort).orderByAsc(Category::getUpdateTime);
    List<Category> list = categoryService.list(lambdaQueryWrapper);
    return R.success(list);
}

测试：

可以正常显示。

image-20220807172303348

2.保存菜品信息

在上述的分析中，我们可以看到在保存菜品时，页面传递过来的是json格式数据，格式如下：

{
    "name":"佛跳墙",
    "price":88800,
    "code":"",
    "image":"da9e1c70-fc32-4781-9510-a1c4ccd2ff59.jpg",
    "description":"佛跳墙",
    "status":1,
    "categoryId":"1397844357980663809",
    "flavors":[
        {
            "name":"辣度",
            "value":"[\"不辣\",\"微辣\",\"中辣\",\"重辣\"]",
            "showOption":false
        },
        {
            "name":"忌口",
            "value":"[\"不要葱\",\"不要蒜\",\"不要香菜\",\"不要辣\"]",
            "showOption":false
        }
    ]
}

在服务端应该如何来封装前端传递的数据呢，我们发现，如果使用菜品类Dish来封装，只能封装菜品的基本属性，flavors属性是无法封装的。那么这个时候，我们应该如何处理呢?

这个时候，我们需要自定义一个实体类，然后继承自 Dish，并对Dish的属性进行拓展，增加 flavors 集合属性(内部封装DishFlavor)。

1). 导入 DishDto 实体类

封装页面传递的请求参数。

所属包: com.itheima.reggie.dto

import com.itheima.reggie.entity.Dish;
import com.itheima.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;
}

拓展： 我们在做项目时，经常会涉及到各种类型的实体模型。基本包含以下几种

实体模型描述
DTOData Transfer Object(数据传输对象)，一般用于展示层与服务层之间的数据传输。
Entity最常用实体类，基本和数据表一一对应，一个实体类对应一张表。
VOValue Object(值对象), 主要用于封装前端页面展示的数据对象，用一个VO对象来封装整个页面展示所需要的对象数据
POPersistant Object(持久层对象), 是ORM(Objevt Relational Mapping)框架中Entity，PO属性和数据库中表的字段形成一一对应关系

2). DishController定义方法新增菜品

在该Controller的方法中，不仅需要保存菜品的基本信息，还需要保存菜品的口味信息，需要操作两张表，所以我们需要在DishService接口中定义接口方法，在这个方法中需要保存上述的两部分数据。

/**
 * 新增菜品
 * @param dishDto
 * @return
 */
@PostMapping
public R<String> save(@RequestBody DishDto dishDto){
    log.info(dishDto.toString());

    dishService.saveWithFlavor(dishDto);

    return R.success("新增菜品成功");
}

3). DishService中增加方法saveWithFlavor

//新增菜品，同时插入菜品对应的口味数据，需要操作两张表：dish、dish_flavor
public void saveWithFlavor(DishDto dishDto);

4). DishServiceImpl中实现方法saveWithFlavor

页面传递的菜品口味信息，仅仅包含name 和 value属性，缺少一个非常重要的属性dishId， 所以在保存完菜品的基本信息后，我们需要获取到菜品ID，然后为菜品口味对象属性dishId赋值。

具体逻辑如下：

①. 保存菜品基本信息 ;

②. 获取保存的菜品ID ;

③. 获取菜品口味列表，遍历列表，为菜品口味对象属性dishId赋值;

④. 批量保存菜品口味列表;

代码实现如下:

@Autowired
private DishFlavorService dishFlavorService;
/**
* 新增菜品，同时保存对应的口味数据
* @param dishDto
*/
@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);
}

说明:

​ 由于在 saveWithFlavor 方法中，进行了两次数据库的保存操作，操作了两张表，那么为了保证数据的一致性，我们需要在方法上加上注解 @Transactional来控制事务。

5). 在引导类上加注解 @EnableTransactionManagement

Service层方法上加的注解@Transactional要想生效，需要在引导类上加上注解 @EnableTransactionManagement， 开启对事务的支持。

@Slf4j
@SpringBootApplication
@ServletComponentScan
@EnableTransactionManagement //开启对事物管理的支持
public class ReggieApplication {
    public static void main(String[] args) {
        SpringApplication.run(ReggieApplication.class,args);
        log.info("项目启动成功...");
    }
}

2.6 功能测试

image-20220808085237220

菜品表添加成功

image-20220808085255338

口味表添加成功

image-20220808085308284

三、菜品分页查询

3.1 需求分析

系统中的菜品数据很多的时候，如果在一个页面中全部展示出来会显得比较乱，不便于查看，所以一般的系统中都会以分页的方式来展示列表数据。

image-20220808092228949

在菜品列表展示时，除了菜品的基本信息(名称、售价、售卖状态、更新时间)外，还有两个字段略微特殊，第一个是图片字段 ，我们从数据库查询出来的仅仅是图片的名字，图片要想在表格中回显展示出来，就需要下载这个图片。第二个是菜品分类，这里展示的是分类名称，而不是分类ID，此时我们就需要根据菜品的分类ID，去分类表中查询分类信息，然后在页面展示。

3.2 前端页面分析

前端页面和服务端的交互过程：

  1. 访问页面(backend/page/food/list.html)时，发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端，获取分页数据

  2. 页面发送请求，请求服务端进行图片下载，用于页面图片展示

开发菜品信息分页查询功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可，而前端发起的请求中， 图片文件下载回显的代码，我们已经实现了。所以，我们只需要开发分页查询的功能即可，分页查询具体的请求信息如下：

请求说明
请求方式GET
请求路径/dish/page
请求参数?page=1&pageSize=10&name=xxx

3.3 代码实现

1.分析

在分页查询时需要给页面返回分类的名称，而分类的名称前端在接收的时候是通过 categoryName 属性获取的，那么对应的服务端也应该封装到 categoryName 属性中。

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

而在我们的实体类 Dish 中，仅仅包含 categoryId， 不包含 categoryNam所以要返回DishDto对象，在该对象中可以拓展一个属性 categoryName，来封装菜品分类名称。

@Data
public class DishDto extends Dish {
    private List<DishFlavor> flavors = new ArrayList<>();
    private String categoryName; //菜品分类名称
    private Integer copies;
}

具体逻辑为：

  1. 构造分页条件对象

  2. 构建查询及排序条件

  3. 执行分页条件查询

  4. 遍历分页查询列表数据，根据分类ID查询分类信息，从而获取该菜品的分类名称

  5. 封装数据并返回

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(!StringUtils.isEmpty(name), Dish::getName, name);

    //添加排序条件
    queryWrapper.orderByDesc(Dish::getUpdateTime);

    //进行分页查询
    dishService.page(pageInfo, queryWrapper);

    //对象拷贝，records属性不拷贝，过会我们自己填
    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查分类对象
        Category category = categoryService.getById(categoryId);
        //如果当前分类为空就跳过不添加
        if(category!=null){
            String categoryName = category.getName();
            dishDto.setCategoryName(categoryName);
        }
        return dishDto;
    }).collect(Collectors.toList());
    //存入DtoPage的集合中
    dishDtoPage.setRecords(list);

    return R.success(dishDtoPage);
}

3.3 功能测试

菜品信息分类正常且菜品分类正常显示

image-20220808092835511

四、修改菜品基本信息

4.1 需求分析

在菜品管理列表页面点击修改按钮，跳转到修改菜品页面，在修改页面回显菜品相关信息并进行修改，最后点击确定按钮完成修改操作。

4.2 前端页面分析

前端页面（add.html）和服务端的交互过程：

  1. 点击菜品列表的中的修改按钮，携带菜品id跳转至add.html

  2. 进入add.html，页面发送ajax请求，请求服务端获取分类数据，用于菜品分类下拉框中数据展示(已实现)

  3. add.html获取id, 发送ajax请求，请求服务端，根据id查询当前菜品信息，用于菜品信息回显

  4. 页面发送请求，请求服务端进行图片下载，用于页图片回显(已实现)

  5. 点击保存按钮，页面发送ajax请求，将修改后的菜品相关数据以json形式提交到服务端

经过上述的分析，我们发现，菜品分类下拉框的展示、图片的下载回显功能我们都已经实现了。我们只需要在这里实现两个功能即可，分别是：

1. 根据ID查询菜品及菜品口味信息

具体请求信息如下：

请求说明
请求方式GET
请求路径/dish/{id}

2. 修改菜品及菜品口味信息

具体请求信息如下：

请求说明
请求方式PUT
请求路径/dish
请求参数json格式数据

具体的json格式数据，我们可以通过浏览器抓取：

{
    "id":"1422783914845487106",
    "name":"佛跳墙",
    "categoryId":"1397844357980663809",
    "price":88800,
    "code":"",
    "image":"da9e1c70-fc32-4781-9510-a1c4ccd2ff59.jpg",
    "description":"佛跳墙",
    "status":1,
    "sort":0,
    "createTime":"2021-08-04 12:58:14",
    "createUser":"1412578435737350122",
    "updateUser":"1412578435737350122",
    "flavors":[
        {
            "id":"1422783914883235842",
            "dishId":"1422783914845487106",
            "name":"辣度",
            "value":"[\"不辣\",\"微辣\",\"中辣\",\"重辣\"]",
            "createTime":"2021-08-04 12:58:14",
            "updateTime":"2021-08-04 12:58:14",
            "createUser":"1412578435737350122",
            "updateUser":"1412578435737350122",
            "isDeleted":0,
            "showOption":false
        },
        {
            "id":"1422783914895818754",
            "dishId":"1422783914845487106",
            "name":"忌口",
            "value":"[\"不要葱\",\"不要蒜\",\"不要香菜\",\"不要辣\"]",
            "createTime":"2021-08-04 12:58:14",
            "updateTime":"2021-08-04 12:58:14",
            "createUser":"1412578435737350122",
            "updateUser":"1412578435737350122",
            "isDeleted":0,
            "showOption":false
        }
    ]
}

4.3 功能实现

1.根据ID查询菜品信息

代码实现

页面发送ajax请求，请求服务端，根据id查询当前菜品信息和对应的口味信息，用于修改页面中菜品信息回显。

  1. 在DishService接口中扩展getByIdWithFlavor方法
//根据id查询菜品信息和对应的口味信息
public DishDto getByIdWithFlavor(Long id);
  1. 在DishService实现类中实现此方法
    1. 根据ID查询菜品的基本信息
    2. 根据菜品的ID查询菜品口味列表数据
    3. 组装数据并返回

代码实现:

    /**
     * 根据id查询菜品信息和对应的口味信息
     * @param id
     * @return
     */
    public DishDto getByIdWithFlavor(Long id) {
        //查询菜品基本信息，从dish表查询
        Dish dish = this.getById(id);

        DishDto dishDto = new DishDto();
        //对象拷贝，将菜品基本信息拷贝到Dto对象中
        BeanUtils.copyProperties(dish,dishDto);

        //查询当前菜品对应的口味信息，从dish_flavor表查询
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(DishFlavor::getDishId,dish.getId());
        List<DishFlavor> flavors = dishFlavorService.list(queryWrapper);
        dishDto.setFlavors(flavors);

        return dishDto;
    }

3). 在DishController中创建get方法

/**
* 根据id查询菜品信息和对应的口味信息
* @param id
* @return
*/
@GetMapping("/{id}")
public R<DishDto> get(@PathVariable Long id){
    DishDto dishDto = dishService.getByIdWithFlavor(id);
    return R.success(dishDto);
}

@PathVariable : 该注解可以用来提取url路径中传递的请求参数。

测试

数据成功回显

image-20220808101301876

2.修改菜品信息

1.代码实现

点击保存按钮，页面发送ajax请求，将修改后的菜品相关数据以json形式提交到服务端。在修改菜品信息时需要注意，除了要更新dish菜品表，还需要更新dish_flavor菜品口味表。

  1. 在DishService接口中扩展方法updateWithFlavor
//更新菜品信息，同时更新对应的口味信息
public void updateWithFlavor(DishDto dishDto);
  1. 在DishServiceImpl中实现方法updateWithFlavor

在该方法中，既需要更新dish菜品基本信息表，还需要更新dish_flavor菜品口味表。

而页面再操作时，关于菜品的口味，有修改，有新增，也有可能删除，name应该如何更新菜品口味信息呢？

其实，无论菜品口味信息如何变化，我们只需要保持一个原则： 先删除，后添加。

   @Override
    @Transactional
    public void updateWithFlavor(DishDto dishDto) {
        //更新dish表基本信息
        this.updateById(dishDto);

        //将修改操作拆解为删除+重新添加两部分来完成

        //清理当前菜品对应口味数据---dish_flavor表的delete操作
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper();
        queryWrapper.eq(DishFlavor::getDishId,dishDto.getId());

        //1.删除
        dishFlavorService.remove(queryWrapper);

        //2.添加
        //添加当前提交过来的口味数据---dish_flavor表的insert操作
        List<DishFlavor> flavors = dishDto.getFlavors();

        flavors = flavors.stream().map((item) -> {
            item.setDishId(dishDto.getId());
            return item;
        }).collect(Collectors.toList());

        dishFlavorService.saveBatch(flavors);
    }

3). 在DishController中创建update方法

/**
* 修改菜品
* @param dishDto
* @return
*/
@PutMapping
public R<String> update(@RequestBody DishDto dishDto){
    log.info(dishDto.toString());
    dishService.updateWithFlavor(dishDto);
    return R.success("修改菜品成功");
}
4.3.2.2 功能测试

这是原来的菜品信息

image-20220808102827337

修改为

image-20220808103015255

页面修改操作成功

image-20220808103045478

菜品表更新成功

image-20220808103146956

口味表更新成功

image-20220808103118506

最后也欢迎大家来访问我的博客：丸了鸭的博客

零落陈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
瑞吉外卖项目实战说明图文详解
02-27
瑞吉外卖项目实战说明图文详解
瑞吉外卖小程序开发笔记
最新发布
09-23
帮助瑞吉外卖学习的小伙伴快速查阅代码和主要内容。
基于Springboot外卖系统18：套餐分页查询模块+删除套餐+多数据表同步
小李的研究生学习日记
08-21 9647
在查询套餐信息时, 只包含套餐的基本信息, 并不包含套餐的分类名称, 所以在这里查询到套餐的基本信息后, 还需要根据分类ID(categoryId), 查询套餐分类名称(categoryName)，并最终将套餐的基本信息及分类名称信息封装到SetmealDto(在第一小节已经导入)中。查询返回的字段中，包含套餐的基本信息之外，还有一个套餐的分类名称，在查询时，需要关联查询这个字段。2). 删除多个套餐时，页面发送ajax请求，根据提交的多个套餐id删除对应套餐。
黑马瑞吉外卖项目之套餐修改功能
seabirdssss的博客
06-05 970
黑马瑞吉外卖项目之套餐修改功能
外卖项目04---菜品管理业务开发
xiaoxixicc的博客
11-21 816
菜品管理
ERROR 9560 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter 瑞吉外卖报红问题
yiqieanhaowzq的博客
10-14 795
Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled. 2022-10-14 20:01:15.567 ERROR 9560 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter :
关于报错Consider defining a bean of type 的解决
热门推荐
automal的博客
12-28 21万+
关于报错Consider defining a bean of type 的解决 引用： https://blog.csdn.net/qq_41937388/article/details/106967610
SB_5_瑞吉外卖_4_文件上传下载_菜品新增_菜品分页查询_菜品修改
xujunming668的博客
12-29 2212
瑞吉外卖-Day04 课程内容 文件上传下载 菜品新增 菜品分页查询 菜品修改 1. 文件上传下载 1.1 上传介绍 1.1.1 概述 文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。 文件上传时，对页面的form表单有如下要求： 表单属性 取值 说明 method post 必须选择post方式提交 enctype multipart/f
瑞吉外卖 —— 5、菜品管理
Mr_zhangyj的博客
09-04 1483
菜品管理
瑞吉外卖day06笔记
凌乱陈的博客
08-11 748
瑞吉外卖day06笔记，希望对兄弟们有所帮助。
比foreach效率高的遍历循环
A1916403680的博客
09-07 204
stream().map().collect();
瑞吉外卖-Day01.md
03-30
瑞吉外卖-Day01.md
最新java项目-瑞吉外卖
05-07
最新java项目-瑞吉外卖 最新java项目-瑞吉外卖最新java项目-瑞吉外卖
瑞吉外卖学习笔记...
08-28
瑞吉外卖学习笔记...
java项目实战--瑞吉外卖Day4
qq_52852268的博客
03-10 246
java瑞吉外卖项目实现的第四天
Java后端项目瑞吉外卖-修改菜品功能
pyscl01的博客
02-13 496
Java后端项目瑞吉外卖-修改菜品功能的详细实现
2.登陆退出功能开发
xjhqre的博客
06-17 297
登陆网址：http://localhost:8080/backend/page/login/login.html1、创建员工实体类Employee 2、创建MVC目录：controller、service、service.impl、mapper3、创建EmployeeMapper 4、创建EmployeeService 5、创建EmployeeServiceImpl 6、创建EmployeeController 1.2、创建返回值类R 创建common目录，在该目录下创建R用于给前端返回信息，将所需要传递的
JAVA 批量修改List里面某个字段的方法
weixin_49628243的博客
05-09 9815
方法一：通过流的方式 List<DishFlavor> flavors = dishDto.getFlavors(); flavors = flavors.stream().map((item) -> { item.setDishId(dishId); return item; }).collect(Collectors.toList()); 方法二：通过forEach List<DishFla
瑞吉外卖项目：新增菜品与菜品分页查询
qq_41857955的博客
05-18 2161
目录 一. 新增菜品 1.1 需求分析 1.2 数据模型 1.3代码实现 二. 菜品分页查询 2.1 需求分析 2.2 代码编写 一. 新增菜品 1.1 需求分析 后台系统可以管理菜品信息，通过新增功能来添加新的菜品，在添加菜品时需要选择当前菜品所属的菜品分类。 此外还需要上传菜品图片，在移动端会按照菜品分类来展示对应的菜品信息。 1.2 数据模型 设计两张表菜品表与菜品口味表，添加某个菜品的口味做法时，需要加入菜品口味表中。 菜品表（dish） 菜品口味表(.
瑞吉外卖day04用mybatis怎么写新增菜品
04-27
首先，在MyBatis中，我们需要创建一个实体类来表示菜品信息，例如： ``` public class Dish { private int id; private String name; private String description; private double price;... // 省略getter和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值