学习【瑞吉外卖④】SpringBoot单体项目_菜品管理业务开发

已于 2022-06-20 00:01:59 修改
阅读量1.2k 收藏 16
点赞数 8
分类专栏： Java 项目 # 瑞吉外卖 文章标签： spring boot 学习 java
于 2022-06-08 22:21:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzhaohanwei/article/details/125138771
版权
  • 若文章内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系博主删除。

文章目录

上一篇：学习【瑞吉外卖③】SpringBoot单体项目：https://blog.csdn.net/yanzhaohanwei/article/details/125110127

0.总目录

1.文件上传下载

1.1.文件上传介绍

文件上传，也称为 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 类型的参数即可接收上传的文件。

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

1.2.文件下载介绍

文件下载，也称为 download，是指将文件从服务器传输到本地计算机的过程。

  • 通过浏览器进行文件下载，通常有两种表现形式。
    • 以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录。
    • 直接在浏览器中打开。

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

1.3.准备工作

1.3.1.upload.html

可以直接使用资料中提供的上传页面：upload.html

其中 upload.html 所在位置：1.瑞吉外卖项目/资料/文件上传下载页面/upload.html

将 upload.html 复制到 resources 目录下的 backend/page/demo/ 中

以下是 backend/page/demo/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>

1.3.2.基本架构

为了方便测试，我们需要在告诉拦截器不需要拦截的路径：/common/**

com/itheima/reggie/filter/LoginCheckFilter.java

@Override
public void doFilter(... ...) {
	... ...
    //定义不需要处理的请求路径
    String[] urls = new String[]{
            ... ... 
            "/common/**"
    };
    ... ...
}

为了设置动态存储目录，我们需要在配置文件里定义相关路径的属性

resources 目录下的 application.yml

reggie:
  path: D:\D_File\D_Pictures\IdeaProjectsPictures\ReggieTakeout\ # 自定义存储位置

在 controller 层中创建与文件上传下载对应的控制器的基本结构

com/itheima/reggie/controller/CommonController.java

package com.itheima.reggie.controller;

import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
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 javax.servlet.http.HttpServletResponse;

/**
 * 文件上传和下载
 */
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {

    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file) {return null;}

    /**
     * 文件下载
     *
     * @param name
     * @param response
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response) { }
}

！注意：MultipartFile 定义的 file 变量必须与 name 保持一致，否则传递值为空。

FormData

1.4.文件上传代码实现

com/itheima/reggie/controller/CommonController.java

/**
 * 文件上传
 *
 * @param file
 * @return
 */
@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;//动态拼接成类似于 dfsdfdfd.jpg 的字符串

    //创建一个目录对象
    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);
}

1.5.文件下载代码实现

文件下载，页面端可以使用 <img> 标签展示下载的图片

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

handleAvatarSuccess(response, file, fileList) {
	this.imageUrl = '/common/download?name=${response.data}'
}

com/itheima/reggie/controller/CommonController.java

/**
 * 文件下载
 *
 * @param name
 * @param response
 */
@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) {
            outputStream.write(bytes, 0, len);
            outputStream.flush();
        }

        //关闭资源
        outputStream.close();
        fileInputStream.close();
    } catch (Exception e) {
        e.printStackTrace();
    }

}

可以通过 localhost:8080/backend/page/demo/upload.html 这个路径来测试以上代码。

2.新增菜品

2.1.需求分析

后台系统中可以管理菜品信息，通过新增功能来添加一个新的菜品。

在添加菜品时需要选择当前菜品所属的菜品分类,并且需要上传菜品图片，在移动端会按照菜品分类来展示对应的菜品信息。

在这里插入图片描述

2.2.数据模型

新增菜品，其实就是将新增页面录入的菜品信息插入到 dish 表。

如果添加了口味做法，还需要向 dish_flavor 表插入数据。

所以在新增菜品时，涉及到两个表：dish（菜品表）、dish_flavor（菜品口味表）

在这里插入图片描述

  • dish（菜品表）

在这里插入图片描述

  • dish_flavor（菜品口味表）

在这里插入图片描述

2.3.准备工作

  1. 实体类：DishFlavor

com/itheima/reggie/entity/DishFlavor.java

package com.itheima.reggie.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
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;
}
  1. Mapper 接口 DishFlavorMapper

com/itheima/reggie/mapper/DishFlavorMapper.java

package com.itheima.reggie.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.itheima.reggie.entity.DishFlavor;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface DishFlavorMapper extends BaseMapper<DishFlavor> { }
  1. 业务层接口 DishFlavorService

com/itheima/reggie/service/DishFlavorService.java

package com.itheima.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.DishFlavor;

public interface DishFlavorService extends IService<DishFlavor> { }
  1. 业务层实现类 DishFlavorServicelmpl

com/itheima/reggie/service/impl/DishFlavorServiceImpl.java

package com.itheima.reggie.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.DishFlavor;
import com.itheima.reggie.mapper.DishFlavorMapper;
import com.itheima.reggie.service.DishFlavorService;
import org.springframework.stereotype.Service;

@Service
public class DishFlavorServiceImpl extends ServiceImpl<DishFlavorMapper, DishFlavor> implements DishFlavorService { }
  1. 控制层 DishController

com/itheima/reggie/controller/DishController.java

package com.itheima.reggie.controller;

import com.itheima.reggie.service.CategoryService;
import com.itheima.reggie.service.DishFlavorService;
import com.itheima.reggie.service.DishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * 菜品管理
 */
@RestController
@RequestMapping("/dish")
@Slf4j
public class DishController {
    @Autowired
    private DishService dishService;

    @Autowired
    private DishFlavorService dishFlavorService;

    @Autowired
    private CategoryService categoryService;
}

2.4.代码开发

2.4.1.梳理交互过程

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

  1. 页面（backend/page/food/add.htm）发送 ajax 请求，请求服务端获取菜品分类数据并展示到下拉框中。
  2. 页面发送请求进行图片上传，请求服务端将图片保存到服务器。
  3. 页面发送请求进行图片下载，将上传的图片进行回显。
  4. 点击保存按钮，发送 ajax 请求，将菜品相关数据以 json 形式提交到服务端。

开发新增菜品功能，其实就是在服务端编写代码去处理前端页面发送的这 4 次请求即可。

图片的上传下载功能在本博客的【1.文件上传下载】中已经详细阐述过了，这里不再赘述。

2.4.2.查询分类数据

页面（backend/page/food/add.htm）发送 ajax 请求，请求服务端获取菜品分类数据并展示到下拉框中。

在这里插入图片描述

通过 resources 目录下的 backend/page/food/add.html ，来理解菜单分类的列表展示的前端的逻辑。

created() {
  this.getDishList()
  // 口味临时数据
  this.getFlavorListHand()
  this.id = requestUrlParam('id')
  this.actionType = this.id ? 'edit' : 'add'
  if (this.id) {
    this.init()
  }
},

然后查找 getDishList() 方法的具体实现代码。

// 获取菜品分类
getDishList () {
  getCategoryList({ 'type': 1 }).then(res => {
    if (res.code === 1) {
      this.dishList = res.data
    } else {
      this.$message.error(res.msg || '操作失败')
    }
  })
},

通过 Idea 快捷键 CTRL+B 找到其调用的 getCategoryList()。

backend/api/food.js

// 获取菜品分类列表
const getCategoryList = (params) => {
  return $axios({
    url: '/category/list',
    method: 'get',
    params
  })
}

通过 /category/list 得知，我们需要在 Controller 层编写代码来响应其的请求。

编写代码

com/itheima/reggie/controller/CategoryController.java

/**
 * 根据条件查询分类数据
 *
 * @param category
 * @return
 */
@GetMapping("/list")
public R<List<Category>> list(Category category) {
    //条件构造器
    LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper<Category>();
    //添加条件
    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);
}

2.4.3.接收页面提交的数据

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

  1. 创建 DishDto 类，用于封装页面提交的数据

因为 Dish 实体类中没有对 flavors 中的数据做过声明，所以我们需要封装一个新类来处理所有参数。

在这里插入图片描述

DTO，全称为 Data Transfer object，即数据传输对象，一般用于展示层与服务层之间的数据传输。

com/itheima/reggie/dto/DishDto.java

package 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;
}
  1. 在 service 层中编写相关的逻辑代码

com/itheima/reggie/service/DishService.java

package com.itheima.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.dto.DishDto;
import com.itheima.reggie.entity.Dish;

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

com/itheima/reggie/service/impl/DishServiceImpl.java

package com.itheima.reggie.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.dto.DishDto;
import com.itheima.reggie.entity.Dish;
import com.itheima.reggie.entity.DishFlavor;
import com.itheima.reggie.mapper.DishMapper;
import com.itheima.reggie.service.DishFlavorService;
import com.itheima.reggie.service.DishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
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
@Slf4j
public class DishServiceImpl extends ServiceImpl<DishMapper, Dish> implements DishService {
    @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);
    }
}

事实上在博客【瑞吉外卖③】SpringBoot单体项目中我们已经创建 Service 和 ServiceImpl 的基本架构了，这里主要是添加相关方法。

！注意：因为涉及到多张表的具体操作，需要使用 @Transactional 来开启事务，在启动类上加入注解 @EnableTransactionManagement 使得上面的注解生效。但是 @SpringBootApplication 这个注解是默认自动开启 @EnableTransactionManagement，所以其实也可以对启动类做操作。

  1. 在 Controller 层中编写相关方法的代码，接收页面提交的数据。

com/itheima/reggie/controller/DishController.java

/**
 * 新增菜品
 *
 * @param dishDto
 * @return
 */
@PostMapping
public R<String> save(@RequestBody DishDto dishDto) {
    log.info(dishDto.toString());
    dishService.saveWithFlavor(dishDto);
    return R.success("新增菜品成功");
}

3.菜品信息的分页查询

3.1.需求分析

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

所以一般的系统中都会以分页的方式来展示列表数据。

3.2.代码开发

3.2.1.梳理交互过程

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

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

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

开发菜品信息分页查询功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。

3.2.2.代码实现

com/itheima/reggie/controller/DishController.java

/**
 * 菜品信息分页查询
 *
 * @param page
 * @param pageSize
 * @param name
 * @return
 */
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name) {

    //构造分页构造器对象
    Page<Dish> pageInfo = new Page<Dish>(page, pageSize);
    Page<DishDto> dishDtoPage = new Page<DishDto>();

    //条件构造器
    LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<Dish>();
    //添加过滤条件
    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);
}

这里需要注意的是，之前我们设置了浏览器图片上传下载的位置，但是没有在里面导入图片，所以部分图片是显示不出来的。

控制台会报空指针异常。

要想避免以上情况，需要在我们之前设置的位置里导入图片。

比如我之前在 application.yml 中设置了 reggie 属性： path: D:\D_File\D_Pictures\IdeaProjectsPictures\ReggieTakeout\。

那么我把相关图片导入进该目录下即可。（相关图片资源在 瑞吉外卖-资料\瑞吉外卖项目\资料\图片资源 中）

4.修改菜品

4.1.需求分析

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

在这里插入图片描述

4.2.代码开发

4.2.1.梳理交互过程

在开发代码之前，需要梳理一下修改菜品时前端页面（add.html）和服务端的交互过程：

  1. 页面发送 ajax 请求，请求服务端获取分类数据，用于菜品分类下拉框中数据展示。
  2. 页面发送 ajax 请求，请求服务端，根据 id 查询当前菜品信息，用于菜品信息回显。
  3. 页面发送请求，请求服务端进行图片下载，用于页面回显。
  4. 点击保存按钮，页面发送 ajax 请求，将修改后的菜品相关数据以 json 形式提交到服务端

开发修改菜品功能，其实就是在服务端编写代码去处理前端页面发送的这4次请求即可。

其中第1步、第3步的操作前面已经完成了。（新增、修改界面本质上用的是同一个界面）

4.2.2.代码实现

com/itheima/reggie/service/DishService.java

根据 id 查询菜品信息和对应的口味信息

//根据 id 查询菜品信息和对应的口味信息
public DishDto getByIdWithFlavor(Long id);

更新菜品信息，同时更新对应的口味信息

//更新菜品信息，同时更新对应的口味信息
public void updateWithFlavor(DishDto dishDto);

com/itheima/reggie/service/impl/DishServiceImpl.java

根据 id 查询菜品信息和对应的口味信息

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

    DishDto dishDto = new DishDto();
    BeanUtils.copyProperties(dish, dishDto);

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

    return dishDto;
}

更新菜品信息，同时更新对应的口味信息

/**
 * 更新菜品信息，同时更新对应的口味信息
 *
 * @param dishDto
 */
@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());

    dishFlavorService.remove(queryWrapper);

    //添加当前提交过来的口味数据---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);
}

com/itheima/reggie/controller/DishController.java

根据 id 查询菜品信息和对应的口味信息

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

    DishDto dishDto = dishService.getByIdWithFlavor(id);

    return R.success(dishDto);
}

修改菜品

/**
 * 修改菜品
 *
 * @param dishDto
 * @return
 */
@PutMapping
public R<String> update(@RequestBody DishDto dishDto) {
    log.info(dishDto.toString());

    dishService.updateWithFlavor(dishDto);

    return R.success("修改菜品成功");
}

在此处补充一下 idea 控制台输出的 部分SQL 语句的展示

SELECT id,type,name,sort,create_time,update_time,create_user,update_user FROM category WHERE (type = ?) ORDER BY sort ASC,update_time DESC;

SELECT id,name,category_id,price,code,image,description,status,sort,create_time,update_time,create_user,update_user FROM dish WHERE id=?

SELECT id,dish_id,name,value,create_time,update_time,create_user,update_user,is_deleted FROM dish_flavor WHERE (dish_id = ?)

UPDATE dish SET name=?, category_id=?, price=?, code=?, image=?, description=?, status=?, sort=?, create_time=?, update_time=?, create_user=?, update_user=? WHERE id=?

DELETE FROM dish_flavor WHERE (dish_id = ?)

INSERT INTO dish_flavor ( id, dish_id, name, value, create_time, update_time, create_user, update_user, is_deleted ) VALUES ( ?, ?, ?, ?, ?, ?, ?, ?, ? )

5.其他功能

  • 本章节中，视频中并未出现教程，官方建议诸位自行解决以加强动手能力。
  • 对于菜品管理的业务模块，我们尚未完成的功能还有：
    • 删除、停售 / 启售、批量删除、批量停售 / 批量启用。

5.1.需求分析

在商品买卖过程中，商品停售，起售可以更加方便的让用户知道店家还有什么类型的商品在卖。删除方法也更方便的管理菜品。

5.2.菜品管理业务前端初步分析

当我们使用浏览器对其调试时，显然发现 http:/localhost:8080/backend/page/food/list.html 可以作为切入点来了解前后端的交互关系。

在这里插入图片描述

因为该项目的命名较为规范，我们很容易在 resources 目录下找到对应的前端页面：backend/page/food/list.html。

这里是 backend/page/food/list.html 引用的 js 文件。

<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/food.js"></script>

接下来的分析也基本上是根据以上的页面，以及相关引用 js 文件来分析编码的。

下面的代码是 backend/page/food/list.html 中的 data() 中封装的属性。

data() {
  return {
     input: '',
     counts: 0,
     page: 1,
     pageSize: 10,
     tableData : [],
     dishState : '',
     checkList: []
  }
},

5.3.菜品启售/停售

5.3.1.需求分析

在菜品管理列表页面，可以单个菜品进行 启售 / 停售 操作。

也可以批量启售 / 停售菜品。

5.3.2.前端分析

点击“停售”按钮时，浏览器发送的请求消息。

在这里插入图片描述
点击“批量启售”按钮时，浏览器发送的请求消息。

在这里插入图片描述

显然，前端发送的是 POST 请求方式：http://localhost:8080/dish/status/1?ids=... , ...

backend/page/food/list.html 中的 “启售 / 停售“” 按钮对应的代码

<el-button
  type="text"
  size="small"
  class="blueBug"
  @click="statusHandle(scope.row)"
>
  {{ scope.row.status == '0' ? '启售' : '停售' }}
</el-button>

backend/page/food/list.html 中的 “启售 / 停售“” 按钮对应的代码所调用的方法 。

状态更改方法：statusHandle()

//状态更改
statusHandle (row) {
  let params = {}
  if (typeof row === 'string' ) {
    if (this.checkList.length === 0) {
      this.$message.error('批量操作，请先勾选操作菜品！')
      return false
    }
    params.id = this.checkList.join(',')
    params.status = row
  } else {
    params.id = row.id
    params.status = row.status ? '0' : '1'
  }
  this.dishState = params
  this.$confirm('确认更改该菜品状态?', '提示', {
    'confirmButtonText': '确定',
    'cancelButtonText': '取消',
    'type': 'warning'
  }).then(() => {
    // 起售停售---批量起售停售接口
    dishStatusByStatus(this.dishState).then(res => {
      if (res.code === 1) {
        this.$message.success('菜品状态已经更改成功！')
        this.handleQuery()
      } else {
        this.$message.error(res.msg || '操作失败')
      }
    }).catch(err => {
        this.$message.error('请求出错了：' + err)
    })
  })
},

statusHandle() 中调用了 backend/api/food.js 的 dishStatusByStatus。

// 起售停售---批量起售停售接口
const dishStatusByStatus = (params) => {
  return $axios({
    url: `/dish/status/${params.status}`,
    method: 'post',
    params: { ids: params.id }
  })
}

5.3.3.后端代码编写

com/itheima/reggie/service/DishService.java

//停售/启售单个菜品 或 批量停售/启售菜品
public void status(Integer status, List<Long> ids);

com/itheima/reggie/service/impl/DishServiceImpl.java

 /**
 * 停售/启售单个菜品 或 批量停售/启售菜品
 *
 * @param status
 * @param ids
 */
@Transactional
public void status(Integer status, List<Long> ids) {
    //条件构造器
    LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<Dish>();
    //添加条件
    queryWrapper.in(ids != null, Dish::getId, ids);

    List<Dish> list = dishService.list(queryWrapper);

    for (Dish dish : list) {
        if (dish != null) {
            dish.setStatus(status);
            dishService.updateById(dish);
        }
    }

}

com/itheima/reggie/controller/DishController.java

/**
 * 菜品启售/停售（单个或批量
 *
 * @param status
 * @param ids
 * @return
 */
@PostMapping("/status/{status}")
public R<String> status(@PathVariable("status") Integer status, @RequestParam List<Long> ids) {
    log.info("status:{}", status);
    log.info("ids:{}", ids);

    dishService.status(status, ids);

    return R.success("售卖状态修改成功");
}

5.4.删除功能

5.4.1.需求分析

在菜品管理列表页面，可以对单个菜品进行删除操作，也可以对菜品进行批量删除。

需要注意的是当菜品在售卖时，此菜品不允许删除。

5.4.2.前端分析

当我们点击“批量删除”按钮时，浏览器发送的请求。

在这里插入图片描述

当我们点击“删除”按钮时，浏览器发送的请求。

在这里插入图片描述

基本上可以判断我们需要在后端使用 Restful 风格的代码编写响应功能，其中参数是 ids。

在 backend/page/food/list.html 中，我们发现“删除”按钮、“批量删除”按钮对应的前端代码。

"批量”操作中调用了 deleteHandle 方法。

<div class="tableLab">
	<span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span>
</div>

“删除”操作中调用了 deleteHandle 方法。

<el-button
  type="text"
  size="small"
  class="delBut non"
  @click="deleteHandle('单删', scope.row.id)"
>
  删除
</el-button>

接下来我们在 <script></script> 中找到该 deleteHandle 方法即可。

// 删除
deleteHandle (type, id) {
  if (type === '批量' && id === null) {
    if (this.checkList.length === 0) {
      return this.$message.error('请选择删除对象')
    }
  }
  this.$confirm('确认删除该菜品, 是否继续?', '确定删除', {
    'confirmButtonText': '确定',
    'cancelButtonText': '取消',
  }).then(() => {
    deleteDish(type === '批量' ? this.checkList.join(',') : id).then(res => {
      if (res.code === 1) {
        this.$message.success('删除成功！')
        this.handleQuery()
      } else {
        this.$message.error(res.msg || '操作失败')
      }
    }).catch(err => {
      this.$message.error('请求出错了：' + err)
    })
  })
},

这里我们可以使用 Ctrl+B （idea快捷键）查看有关 checkList 的调用。

// 全部操作
handleSelectionChange (val){
  let checkArr = []
  val.forEach((n) => {
    checkArr.push(n.id)
  })
  this.checkList = checkArr
},

在 backend/page/food/list.html 中，我们发现 deleteHandle 方法调用了 deleteDish 方法。

使用 Ctrl+B （idea快捷键）可以快速定位到 deleteDish 方法的具体代码编写位置。

backend/api/food.js

// 删除接口
const deleteDish = (ids) => {
  return $axios({
    url: '/dish',
    method: 'delete',
    params: { ids }
  })
}

5.4.3.后端代码编写

在 private Integer isDeleted; 前添加 @TableLogic 注解，表示删除是逻辑删除。

该注解由 MyBatisPlus 提供。

com/itheima/reggie/entity/DishFlavor.java

//是否删除
@TableLogic//逻辑删除
private Integer isDeleted;

com/itheima/reggie/service/DishService.java

//根据 id 删除单个菜品或批量删除菜品
public void deleteByIds(List<Long> ids);

com/itheima/reggie/service/impl/DishServiceImpl.java

/**
 * 根据 id 删除单个菜品或批量删除菜品
 *
 * @param ids
 */
@Override
@Transactional
public void deleteByIds(List<Long> ids) {
    //构造条件查询器
    LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<Dish>();

    /* 查询该菜品的售卖状态。若为启售状态，则抛出业务异常；反之，则允许删除 */

    //添加条件
    queryWrapper.in(ids != null, Dish::getId, ids);

    List<Dish> list = this.list(queryWrapper);

    for (Dish dish : list) {
        Integer status = dish.getStatus();

        //若为停售状态，则可以删除
        if (status == 0) {
            this.removeById(dish.getId());
        } else {
            //此时应该回滚信息。防止出现恰好删除菜品时，该菜品也正在售卖中
            throw new CustomException("要删除的菜品中有正在售卖的菜品，无法全部删除");
        }
    }
}

com/itheima/reggie/controller/DishController.java

/**
 * 批量删除菜品 或 删除单个菜品
 *
 * @param ids
 * @return
 */
@DeleteMapping
public R<String> delete(@RequestParam("ids") List<Long> ids) {
    log.info("删除分类，ids 为：{}", ids);

    //删除菜品（此处的删除操作为逻辑删除）
    dishService.deleteByIds(ids);

    //删除菜品对应的口味（逻辑删除）
    LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<DishFlavor>();
    queryWrapper.in(DishFlavor::getDishId, ids);
    dishFlavorService.remove(queryWrapper);

    return R.success("删除成功");
}

下一篇：学习【瑞吉外卖⑤】SpringBoot单体项目：https://blog.csdn.net/yanzhaohanwei/article/details/125194124

燕赵韩魏555
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马-瑞吉外卖 day4 菜品管理
weixin_49465828的博客
06-10 163
黑马Java企业级入门项目——瑞吉外卖：全程跟练代码+笔记总结+内容精进+多种方法尝试。全网最详细保姆级笔记，适合初学者。
瑞吉外卖 —— 5、菜品管理
Mr_zhangyj的博客
09-04 1590
菜品管理
瑞吉外卖功能开发----菜品管理
m0_56604311的博客
02-23 534
瑞吉外卖菜品管理，包括批量停售和批量删除自由编写代码
[瑞吉外卖项目]DAY4——菜品管理
ajjjjjjjjjtty的博客
07-11 1139
[瑞吉外卖项目]DAY4——菜品管理
【瑞吉外卖】学习笔记-day4:（三）菜品管理开发——菜品信息分页查询、修改菜品、停售起售菜品以及删除菜品
qq_50298703的博客
10-20 1657
瑞吉外卖项目学习笔记：菜品管理开发——菜品信息分页查询及修改菜品
【瑞吉外卖】SpringBoot使用邮件发送短信验证码--完善用户登录功能
06-24
这个示例是基于“瑞吉外卖”项目，由黑马程序员提供，通过集成SpringBoot的`spring-boot-starter-mail`依赖来实现这一功能。 首先，我们需要在项目的`pom.xml`文件中添加SpringBoot的邮件服务依赖： ```xml ...
java瑞吉外卖项目SpringBoot
02-20
瑞吉外卖项目是一个基于Spring Boot框架的在线外卖订餐系统。该项目旨在为用户提供一个便捷、高效、安全的在线订餐体验，同时为餐厅提供一个展示菜品、接收订单、管理订单等功能的平台。 技术栈： 后端：Spring ...
瑞吉外卖项目完整篇（vue+springboot+redis+mybatis-plus）
04-29
瑞吉外卖项目是根据黑马课程的资源项目，但黑马课程中有些模块没有开发和讲解。导致大家在学习完后还有很多的模块是不完整的。 该资源是我学习完瑞吉外卖项目后将所有的功能模块都实现了。所有的接口在后端都有相应...
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
07-24
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
基于Javascript的瑞吉外卖项目设计源码
最新发布
05-22
瑞吉外卖项目设计源码：该项目基于Javascript开发，包含247个文件，主要使用Java、JavaScript、HTML和CSS语言。该设计源码是一个外卖项目的实现，包括用户下单、商品展示、支付等功能，适用于外卖平台和商家。
猿创征文｜瑞吉外卖——管理端_菜品管理_3(笔记)
m0_65144570的博客
09-12 208
瑞吉外卖的管理端中菜品管理的笔记。内容简短，为个人理解。
猿创征文｜瑞吉外卖——管理端_菜品管理_2
m0_65144570的博客
09-11 1186
瑞吉外卖的管理端中菜品管理操作。
瑞吉外卖项目（五） 菜品管理业务开发
缘昔的博客
07-28 391
文件下载，download，将文件从服务器传输到本地计算机的过程以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录直接在浏览器打开通过浏览器进行文件下载，本质上就是服务端将文件以流的形式写回浏览器的过程由于下载下来的文件是临时文件，需要在配置中，添加一个自定义路径去保存图片配置好后，在Controller中获得该参数/***文件上传*@return注意publicRupload(MultipartFilefile)必须要和前端参数名字保持一致，否则会出现报错。...
猿创征文｜瑞吉外卖——管理端_菜品管理_1
m0_65144570的博客
09-11 463
瑞吉外卖的管理端中菜品管理操作。
【瑞吉外卖】学习笔记-day4:（二）菜品管理开发——文件下载和新增菜品
qq_50298703的博客
10-19 562
瑞吉外卖项目学习笔记：菜品管理开发——文件下载和新增菜品
瑞吉外卖项目实战---菜品管理的功能补全篇
m0_57013005的博客
11-12 411
瑞吉外卖项目实战---菜品管理的功能补全篇
瑞吉外卖项目剩余功能补充
热门推荐
weixin_53142722的博客
04-23 6万+
瑞吉外卖其他十多个功能的补充，如：后台套餐的修改,后台按条件查询客户订单，用户个人查询自己的订单，移动端的再来一单功能，菜品，套餐的启售，停售，购物车中菜品或者是套餐数量减少。代码不一定规范，但是功能是没问题的！！！...............
瑞吉外卖项目详细分析笔记及所有功能补充代码
SeeYouAgain的博客
01-16 3万+
瑞吉外卖项目的详细笔记及部分功能的补充实现，实现了视频剩余没有定义的功能，例如管理端的订单明细，起售停售；移动端的订单查看及再来一单等，也是对整个项目整体步骤流程的经验总结。
瑞吉外卖springboot vur项目实验原理
06-12
瑞吉外卖是一个在线餐饮订餐平台，使用了Spring Boot和Vue.js两个框架进行开发。其中Spring Boot是一个基于Spring框架的快速开发框架，可以帮助开发者快速构建Web应用程序；而Vue.js则是一款轻量级的JavaScript框架，用于构建用户界面。 在实验中，我们首先使用Spring Boot框架来构建后端服务，包括用户注册、登录、菜品信息的查询、下单等功能。在这个过程中，我们使用了Spring MVC框架来处理请求和响应，使用Spring Data JPA来操作数据库。 接着，我们使用Vue.js框架来构建前端界面，包括用户登录注册、浏览菜品、下单、支付等功能。在这个过程中，我们使用了Vue Router来实现单页面应用程序，并使用Axios来向后端发送HTTP请求。 最后，我们将前后端进行整合，使用Spring Boot的内置Tomcat服务器来部署整个应用程序。用户可以通过浏览器访问应用程序，进行在线订餐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值