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




  • 若文章内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系博主删除。


上一篇学习【瑞吉外卖③】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"
      • 使用 inputfile 控件上传

举例

<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单体项目中我们已经创建 ServiceServiceImpl 的基本架构了,这里主要是添加相关方法。

!注意:因为涉及到多张表的具体操作,需要使用 @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请求,将分页查询参数(pagepageSizename)提交到服务端,获取分页数据。

  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.jsdishStatusByStatus

// 起售停售---批量起售停售接口
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+Bidea快捷键)查看有关 checkList 的调用。

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

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

使用 Ctrl+Bidea快捷键)可以快速定位到 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


  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值