[瑞吉外卖项目]DAY4——菜品管理

目录

• 文件上传下载
• 新增菜品
• 菜品信息分页查询
• 修改菜品

一、文件上传和下载

• 文件上传介绍
• 文件下载介绍
• 文件上传代码展示
• 文件下载代码展示

文件上传介绍

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

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

1. method=“post”                               采用post方式提交数据
2. enctype=“multipart/form-data”       采用multipart格式上传文件
3. type=“file”                                      使用input的file控件上传
    

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

例如ElementUI中提供的upload上传组件:

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

• commons-fileupload
• commons-io

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

文件下载介绍

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

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

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

文件上传下载_文件上传代码实现

文件上传代码实现1

文件上传，页面端可以使用ElementUI提供的上传组件。
可以直接使用资料中提供的上传页面，位置:资料/文件上传下载页面/upload.html

upload.html-前端上传文件页面代码

在controller包下创建CommonController类，代码内容如下：

package com.itheima.common;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * 文件的上传和下载
 */
@Slf4j
@RestController
@RequestMapping("/common")
public class CommonController {
    /**
     * 文件上传
     * @param file
     * @return
     */
    public R<String> upload(MultipartFile file){
        log.info(file.toString());
        return  null;
    }
}

注意：

• MultipartFile是spring类型，代表HTML中form data方式上传的文件，包含二进制数据+文件名称。
• MultipartFile后面的参数名必须为file，因为需要和前端页面的name保持一致，否则不会生效

启动项目，在浏览器地址栏输入：http://localhost:8080/backend/page/demo/upload.html

点击上传图片，并上传一个符合文件上传格式，符合文件上传大小的图片

• 后端返回给前端的msg数据为NOTLOGIN，可知被filter过滤器拦截，返还还未登录的信息
• 因此我们需要先在页面上登录，登录后会在服务端的内存中存储session对象，session的作用域为一次会话范围内
• 在浏览器地址栏中输入：http://localhost:8080/backend/page/demo/upload.html，即可避免被filter过滤器拦截
   

被filter拦截
登录后可正常上传文件，在此处添加断点，以debug方式启动项目
来到文件上传页面，点击上传文件，进入断点模式，查看文件的存储位置
在磁盘中寻找到文件，发现该文件为临时文件（TMP文件），所以需要转存到指定位置，否则本次请求完成后临时文件删除
放行后发现临时文件消失

文件上传下载_文件上传代码实现2

文件上传代码实现2

在开发上传文件代码前，先再LoginCheckFilter类的urls数组中添加 "/common/"**
作用：避免每次上传文件时都需要进行登录操

将临时文件存储存储到指定位置

package com.itzq.reggie.controller;

import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {

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

        try {
            //将临时文件存储到指定位置
            file.transferTo(new File("D:\\hello.jpg"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

启动项目，浏览器地址栏输入地址：http://localhost:8080/backend/page/demo/upload.html

上传图片，查看指定存储文件的位置是否有上传的文件

文件转存的位置改为动态可配置的，通过配置文件的方式指定

• 使用 @Value(“${reggie.path}”)读取到配置文件中的动态转存位置
• 使用uuid方式重新生成文件名，避免文件名重复造成文件覆盖
• 通过获取原文件名来截取文件后缀

指定的目录或许不存在于磁盘中，所以我们要为程序添加逻辑代码

若目录不存在于磁盘中，则需要创建该目录

package com.itheima.common;


import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

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

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

    /**
     * 文件上传
     * @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;

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

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

文件上传下载_文件下载代码实现&测试

文件下载代码实现

前端处理

前端页面ElementUI的upload组件会在上传完图片后，触发img组件发送请求，服务端以流的形式（输出流）将文件写回浏览器，在浏览器中展示图片

在CommonController类中添加download方法

• 通过输入流读取文件内容
• 通过输出流将文件写回浏览器，在浏览器展示图片
• 关闭输入输出流，释放资源

/**
     * 文件下载
     * @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) {
            throw new RuntimeException(e);
        }
}

测试：

启动项目，上传图片，图片回显到页面

 

新增菜品_需求分析&数据模型

• 需求分析
• 数据模型
• 代码开发
• 功能测试

需求分析

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

数据模型

dish表（菜品表）

dish_flavor表 （菜品口味表）

新增菜品_代码开发_查询分类数据
代码开发-准备工作
在开发业务功能前，先将需要用到的类和接口基本结构创建好:

• 实体类DishFlavor(直接从课程资料中导入即可，Dish实体前面课程中已经导入过了)
• Mapper接口DishFlavorMapper
• 业务层接口DishFlavorService
• 业务层实现类DishFlavorServicelmpl
• 控制层DishController

实体类DishFlavor

package com.itheima.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;

/**
菜品口味
 */
@Data
public class DishFlavor implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;


    //菜品id
    private Long dishId;


    //口味名称
    private String name;


    //口味数据list
    private String value;


    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;


    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;


    @TableField(fill = FieldFill.INSERT)
    private Long createUser;


    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;


    //是否删除
    private Integer isDeleted;

}

Mapper接口DishFlavorMapper

package com.itheima.mapper;

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

@Mapper
public interface DishFlavorMapper extends BaseMapper<DishFlavor> {
}

• 业务层接口DishFlavorService

package com.itheima.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.entity.DishFlavor;
import org.springframework.stereotype.Service;


public interface DishFlavorService extends IService<DishFlavor> {
}

• 业务层实现类DishFlavorServicelmpl

package com.itheima.service.impl;

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

@Service
public class DishFlavorServicelmpl extends ServiceImpl<DishFlavorMapper, DishFlavor> implements DishFlavorService {
}

控制层DishController

package com.itheima.controller;

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

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

    @Autowired
    private DishFlavorService dishFlavorService;

}

代码开发-梳理交互过程

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

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

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

新增菜品_代码开发_查询分类数据

前端分析

一个vue实例被创建后会调用钩子函数，执行其中的方法

在CategoryController类中，添加list方法，具体代码如下：

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

项目启动成功，下拉框展示

新增菜品_代码开发_接收页面提交的数据

接收图片文件

在本章节02-05，我们已经将图片的上传下载准备完毕

测试

添加一张图片，并回显图片

注意事项

1. 价格在前端已被处理，在点击提交按钮后，先执行前端的submitForm方法，并将price做相应的处理（在页面中单位为元，在数据库中存储的单位为分），再通过ajax请求向后端提供相应的json数据

2. 因为Dish实体类不满足接收flavor参数，即需要导入DishDto，用于封装页面提交的数据

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

• 在reggie包下，创建一个新包为dto
• 在该包下创建DishDto 数据传输类

package com.itheima.dto;

import com.itheima.entity.Dish;
import com.itheima.entity.DishFlavor;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;

@Data
public class DishDto extends Dish {

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

    private String categoryName;

    private Integer copies;
}

代码开发

在DishController类中添加save方法

• 代码逻辑：测试是否可以正常的接收前端传过来的json数据
• 注意：因为前端传来的是json数据，所以我们需要在参数前添加*@RequestBody*注解
• 具体代码如下：

 @PostMapping
    public R<String> save(@RequestBody DishDto dishDto){
        log.info(dishDto.toString());
        return null;
    }

测试

debug方式启动项目，在标记的行处添加断点，用于查看数据

新增菜品_代码开发_保存数据到菜品表和菜品口味表

分析

• 在保存数据到菜品表和菜品口味表的过程中，我们需要对保存到菜品口味表的数据做相应的处理

• 取出dishDto的dishId，通过stream流对每一组flavor的dishId赋值

• 保存菜品口味到菜品数据表

代码开发

在DishServicelmpl类中添加如下代码：

package com.itzq.reggie.service.Impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itzq.reggie.dto.DishDto;
import com.itzq.reggie.entity.Dish;
import com.itzq.reggie.entity.DishFlavor;
import com.itzq.reggie.mapper.DishMapper;
import com.itzq.reggie.service.DishFlavorService;
import com.itzq.reggie.service.DishService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;
import java.util.stream.Collectors;

@Service
@Transactional
public class DishServicelmpl extends ServiceImpl<DishMapper, Dish> implements DishService {

    @Autowired
    DishFlavorService dishFlavorService;

    @Override
    public void saveWithFlavor(DishDto dishDto) {

        //保存菜品的基本信息到菜品表
        super.save(dishDto);
        //获取菜品id
        Long dishId = dishDto.getId();
        //获取菜品口味
        List<DishFlavor> flavors = dishDto.getFlavors();

        //将每条flavor的dishId赋上值
        flavors = flavors.stream().map((item) -> {
            item.setDishId(dishId);
            return item;
        }).collect(Collectors.toList());

        //保存菜品口味数据到菜品口味表
        dishFlavorService.saveBatch(flavors);

    }
}

在ReggieApplication主启动类上，添加注解：@EnableTransactionManagement

业务开发Day4-11-新增菜品_代码开发_功能测试

功能测试

前提：在DishController类的save方法中添加代码

 @PostMapping
    public R<String> save(@RequestBody DishDto dishDto){
        log.info("接收的dishDto数据：{}",dishDto.toString());

        //保存数据到数据库
        dishService.saveWithFlavor(dishDto);
        return R.success("新增菜品成功");
    }

 重启项目，进入添加菜品页面，输入数据，点击保存

dish表中添加数据成功

dish_flavor表中添加数据成功，并成功为每组flavor数据附上dishId

菜品信息分页查询_需求分析

需求分析

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

图片和菜品分类比较特殊

• 图片列：会用到文件的下载功能
• 菜品分类列：只保存了菜品的category_id，需通过查找category_id所对应的菜品分类名称，从而回显数据

菜品信息分页查询_代码开发1

代码开发-梳理交互过程

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

1. 页面(backend/page/food/list.html)发送ajax请求，将分页查询参数(page、pageSize、name)，提交到服务端，获取分页数据
2. 页面发送请求，请求服务端进行图片下载，用于页面图片展示

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

代码

在DishController下，添加page方法，进行分页查询

/**
     *分页查询
     * @param page
     * @param pageSize
     * @param name
     * @return
     */
    @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(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(pageInfo);
    }

修改菜品_需求分析&梳理交互过程

• 需求分析
• 代码开发
• 功能测试

需求分析

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

修改菜品的代码开发-梳理交互过程

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

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

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

修改菜品_代码开发_根据id查询对应的菜品和口味信息

代码

在DishService接口中添加方法getByIdWithFlavor

在DishServicelmpl中实现getByIdWithFlavor方法，并添加逻辑代码：

• 根据服务端接收的id，查询菜品的基本信息-dish
• 创建dishDto对象，并将查询到的dish对象属性赋值给dishDto
• 根据查询到的dish对象，可以取出对应的菜品id，再通过等值条件查询，查询到DishFlavor数据信息
• 将查询到的flavor数据信息使用set方法赋值给dishDto对象
• 返回dishDto对象

@Override
    public DishDto getByIdWithFlavor(Long id) {
        //通过id查询菜品基本信息
        Dish dish = super.getById(id);

        //创建dto对象
        DishDto dishDto = new DishDto();

        //对象拷贝
        BeanUtils.copyProperties(dish,dishDto);

        //条件查询flavor
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(DishFlavor::getDishId,dish.getId());
        List<DishFlavor> list = dishFlavorService.list(queryWrapper);

        //将查询到的flavor赋值到dto对象中
        dishDto.setFlavors(list);

        return dishDto;
    }

在DishController中添加get方法，实现添加在DishServicelmpl中的逻辑代码，返回查询到的数据信息

@GetMapping("/{id}")
    public R<DishDto> get(@PathVariable Long id){
        //查询
        DishDto dishDto = dishService.getByIdWithFlavor(id);
 
        return R.success(dishDto);
    }

修改菜品_代码开发_测试数据回显

测试数据回显

在DishController的get方法中加入断点

进入菜品管理，点击修改菜品按钮，程序跳转到断点处，查询回显的dishDto数据是否成功

修改菜品_代码开发_修改菜品信息和口味信息

分析前端页面发送的请求

• 请求的地址:：http://localhost:8080/dish

• 请求的方式：put

代码

在DishService接口中添加updateWithFlavor方法

DishServicelmpl类中实现DishService定义的方法，并添加代码逻辑

• 根据id修改菜品的基本信息
• 通过dish_id,删除菜品的flavor
• 获取前端提交的flavor数据
• 为条flavor的dishId属性赋值
• 将数据批量保存到dish_flavor数据库

@Override
    public void updateWithFlavor(DishDto dishDto) {
        //根据id修改菜品的基本信息
        super.updateById(dishDto);

        //通过dish_id,删除菜品的flavor
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(DishFlavor::getDishId,dishDto.getId());
        dishFlavorService.remove(queryWrapper);

        //获取前端提交的flavor数据
        List<DishFlavor> flavors = dishDto.getFlavors();

        //将每条flavor的dishId赋值
        flavors = flavors.stream().map((item) -> {
            item.setDishId(dishDto.getId());
            return item;
        }).collect(Collectors.toList());


        //将数据批量保存到dish_flavor数据库
        dishFlavorService.saveBatch(flavors);
    }

在DishController类中添加方法update，并调用updateWithFlavor方法实现表中数据的修改

 @PutMapping
    public R<String> update(@RequestBody DishDto dishDto){

        log.info("接收的dishDto数据：{}",dishDto.toString());

        //更新数据库中的数据
        dishService.updateWithFlavor(dishDto);

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

修改菜品_功能测试

功能测试

启动项目，来到菜品管理界面

修改菜品成功