一、文件上传——upload

1.1 介绍

1.2 前端代码实现

1.3 后端代码实现

二、文件下载——download

2.1 介绍

2.2 前端代码编写

2.3 后端代码编写

三、前端总代码

四、应用场景

4.1 数据库表

4.1.1 菜品表

4.1.2 菜品口味表

4.1.3 菜品分类及菜品套餐表

4.2 实体类

4.2.1 菜品实体类

4.2.2 菜品口味实体类

4.2.3 菜品分类及菜品套餐实体类

4.3 新增菜品

4.3.1 菜品分类下拉框

4.3.2 封装DTO

4.3.3 添加菜品

4.4 菜品分页查询

4.4.1 构建DTO

4.4.2 菜品分页查询

4.5 修改菜品功能

4.5.1 数据回显操作

4.5.2 修改菜品信息

五、新增套餐功能

5.1 数据库对应表

5.1.1 套餐表 setmeal

5.1.2 套餐菜品关系表

5.2 实体类

5.2.1 套餐实体类

5.2.2 套餐菜品关系类

5.3 新增菜品

5.3.1 根据分类查询菜品

5.3.2 封装DTO

5.3.3 新增套餐操作

5.4 分页查询

5.5 删除套餐与批量删除套餐

一、文件上传——upload

1.1 介绍

将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程

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

method="post" 采用post方式提交数据
encttype=""multipart/form-data" 采用multipart格式上传文件
type="file" 使用input的file空间上传

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

commons-fileupload
commons-io （对文件的操作本质上还是对流的操作）

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

1.2 前端代码实现

使用的element-ui组件进行实现，这段代码的编写既有上传，也有下载，其中:src就是下载图片

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

action="/common/upload" 代表controller层的请求路径

1.3 后端代码实现

我们可以先发一个请求查看一下MultipartFile对象里面包括什么

我们仔细看发现了一个存储路径，也就是说当前传过来的文件被存储在了一个临时的位置(临时目录)，我们要做的就是把这个文件存储到一个指定的位置。如果不转存的话，当我们此次请求结束后，这个文件就不存在了。

我们在请求成功后返回了图片的文件名+后缀名，目的就是为了下载图片的时候将图片名称传过去然后找到对应的图片

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

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

    /**
     * 文件上传
     *
     * @param file 是一个临时文件，需要转存的指定的位置，否则本次请求后此文件就会消失
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file) throws IOException {
        log.info("上传文件：{}", file.toString());

//      1.拼接转存的位置
//      获取文件的原始名
        String originalFilename = file.getOriginalFilename();   //abc.jpg
//      文件名后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

//       也可以使用UUID生成文件名，防止文件名称重复导致覆盖原文件
        String filename = UUID.randomUUID().toString();   //缺少后缀

        String url= basePath + filename+suffix;


//      2. 判断转存的目录是否存在
//         File既可以代表一个目录，又可以代表一个文件
        File dir = new File(basePath);
//         判断当前目录是否存在
        if (!dir.exists()){
//          不存在的时候进行创建
            dir.mkdirs();
        }

//      转存临时文件到指定的位置  参数是一个URL路径
        file.transferTo(new File(url));

        return R.success(filename+suffix);
    }

}

二、文件下载——download

2.1 介绍

指将文件从服务器传输到本地计算机的过程。

通过浏览器进行文件下载，通常有两种表现形式：

以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录
直接在浏览器中打开

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

2.2 前端代码编写

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

2.3 后端代码编写

  /**
     * 文件下载
     *
     * @param name     图片名
     * @param response 图片要通过响应流获得
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response) throws IOException {
//      0. 设置文件格式
        response.setContentType("image/jpeg");

//      1. 输入流，通过输入流读取文件内容
        FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));


//      2. response输出流，将文件写回浏览器
        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();
        }

//      3.关闭流
        outputStream.close();
        fileInputStream.close();


    }

三、前端总代码

<!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>

四、应用场景

4.1 数据库表

4.1.1 菜品表

4.1.2 菜品口味表

4.1.3 菜品分类及菜品套餐表

4.2 实体类

4.2.1 菜品实体类

/**
 菜品
 */
@Data
public class Dish implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;


    //菜品名称
    private String name;


    //菜品分类id
    private Long categoryId;


    //菜品价格
    private BigDecimal price;


    //商品码
    private String code;


    //图片
    private String image;


    //描述信息
    private String description;


    //0 停售 1 起售
    private Integer status;


    //顺序
    private Integer sort;


    @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;


}

4.2.2 菜品口味实体类

@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;

}

4.2.3 菜品分类及菜品套餐实体类

@Data
public class Category implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;


    //类型 1 菜品分类 2 套餐分类
    private Integer type;


    //分类名称
    private String name;


    //顺序
    @TableField("sort")
    private Integer sort;


    //创建时间
    @TableField(value = "create_time",fill = FieldFill.INSERT)
    private LocalDateTime createTime;


    //更新时间
    @TableField(value = "update_time",fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;


    //创建人
    @TableField(value = "create_user",fill = FieldFill.INSERT)
    private Long createUser;


    //修改人
    @TableField(value = "update_user",fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;


    //是否删除
//    @TableField(value = "is_deleted")
//    private Integer isDeleted;

}

4.3 新增菜品

说明：

1. 页面发送ajax请求，请求服务端获取菜品分类数据并展示到下拉框中

2. 页面发送请求进行图片上传，请求服务端将图片保存到服务器

3. 页面发送请求进行图片下载，将上传的图片进行回显

4. 点击保存按钮，发送ajax请求将菜品相关信息保存到数据库

重要点：价格是以分为单位！！！！！！！！防止精度缺失！！！！！！！

4.3.1 菜品分类下拉框

不是说看见对象就用@RequestBody注解，而是看前端是否提交过来的是json数据，后端用对象来接收才用@RequestBody注解

前端提交过来的得是json格式的数据才用@RequestBody注解

因为这个是前端页面直接通过请求地址提交过来的type，所以不需要使用@RequestBody注解

那我们这里为什么要使用一个Category对象来进行接收呢？

防止前端以后再传入其他参数，所以我们直接用整个Category进行接收

    /**
     * @param category 这个地方我们没有选择声明一个String的type接收，而是选择一个实体类，
     *                 原因是防止以后前端再转过来其他的参数，我们还要再修改这个地方
     *                 总的来说就是通用性更强
     * @return
     */
    @GetMapping("/list")
    public R<List<Category>> list(Category category) {
        log.info("获取菜品分类的下拉列表");
        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);
    }

4.3.2 封装DTO

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

我们可以自己看一下这些请求参数，我们并没有一个类能完整的接收这些参数，所以我们要创建一个类来进行接收

@Data
public class DishDto extends Dish {

    private List<DishFlavor> flavors = new ArrayList<>();

    private String categoryName;

    private Integer copies;
}

子类不能继承父类的私有属性，但是如果子类中公有的方法影响到了父类私有属性，那么私有属性是能够被子类使用的。

4.3.3 添加菜品

因为同时操作两张表，开启事务可以保证两张表，同时操作成功或者失败，不然第一个表操作成功后如果出现异常，第二张会操作失败，这样数据就出问题了

    @Override
    @Transactional  // 操作多张表，加一个事物的处理 ，记得在启动类添加一个EnableTransactionManagement
    public void saveWithFlavor(DishDto dishDto) {
//     保存菜品的基本信息到菜品表dish
        this.save(dishDto);
//     保存菜品口味数据到菜品口味表dish_flavor
//          但是我们刚刚分析的时候知识封装了name与value， id与dishId没有封装
        Long dishId = dishDto.getId();
        List<DishFlavor> dishFlavorList = dishDto.getFlavors();
        dishFlavorList = dishFlavorList.stream().map((item) -> {
            item.setDishId(dishId);
            return item;
        }).collect(Collectors.toList());

//      传入集合，批量保存
        dishFlavorService.saveBatch(dishFlavorList);
    }

4.4 菜品分页查询

与之前分页查询的不同就是加入了图片下载

1. 页面发送ajax请求，将分页查询参数提交到服务端，获取分页数据

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

总共两次请求

4.4.1 构建DTO

注意看下图中标红的地方，我们需要的是一个菜品分类的名称，而不是一个id，所以我们现有的Dish实体类无法直接返回到前端，要进行处理

我们之前创建的DishDTO就很符合要求