业务开发Day4-01-本章内容介绍

目录

  1. 文件上传下载
  2. 新增菜品
  3. 菜品信息分页查询
  4. 修改菜品

需要实现页面的功能
在这里插入图片描述

业务开发Day4-02-文件上传下载_文件上传下载介绍

内容

  1. 文件上传介绍
  2. 文件下载介绍

文件上传介绍

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

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

  1. method=“post” 采用post方式提交数据
  2. enctype=“multipart/form-data” 采用multipart格式上传文件
  3. 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类型的参数即可接收上传的文件，例如:
在这里插入图片描述

文件下载介绍

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

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

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

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

业务开发Day4-03-文件上传下载_文件上传代码实现1

文件上传代码实现1

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

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>

放置upload.html代码的位置（需创建一个demo文件夹）
在这里插入图片描述

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

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;

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

    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
        //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文件），所以需要转存到指定位置，否则本次请求完成后临时文件删除
在这里插入图片描述

放行后发现临时文件消失
在这里插入图片描述

业务开发Day4-04-文件上传下载_文件上传代码实现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.itzq.reggie.controller;

import com.itzq.reggie.common.R;
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;

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

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

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



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

重启项目，上传图片，在动态指定的位置上发现上传的文件
在这里插入图片描述

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

若目录不存在于磁盘中，则需要创建该目录
在这里插入图片描述
具体代码

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

测试，
将配置文件中的目录信息修改为本地磁盘中不存在的目录
在这里插入图片描述

重启项目，上传图片，发现创建了一个新的目录，并将文件放入该目录下
在这里插入图片描述

服务端需返回文件名给前端，便于后续开发使用
在这里插入图片描述

业务开发Day4-05-文件上传下载_文件下载代码实现&测试

文件下载代码实现

前端处理

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

定义前端发送回显图片请求的地址
在这里插入图片描述

在CommonController类中添加download方法

  1. 通过输入流读取文件内容
  2. 通过输出流将文件写回浏览器，在浏览器展示图片
  3. 关闭输入输出流，释放资源
@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){
                //向response缓冲区中写入字节，再由Tomcat服务器将字节内容组成Http响应返回给浏览器。
                outputStream.write(bytes,0,len);
                //所储存的数据全部清空
                outputStream.flush();
            }

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

        } catch (IOException e) {
            e.printStackTrace();
        }
    }

测试

启动项目，上传图片，图片回显到页面
在这里插入图片描述

业务开发Day4-06-新增菜品_需求分析&数据模型

需求分析

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

数据模型

dish表
在这里插入图片描述

dish_flavor表
在这里插入图片描述

新增菜品分类，会将前端传过来的数据保存在这两张表中

业务开发Day4-07-新增菜品_代码开发_查询分类数据

代码开发-准备工作

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

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

实体类DishFlavor

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

}

Mapper接口DishFlavorMapper

package com.itzq.reggie.mapper;

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

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

业务层接口DishFlavorService

package com.itzq.reggie.service;

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

public interface DishFlavorService extends IService<DishFlavor> {
}

业务层实现类DishFlavorServicelmpl

package com.itzq.reggie.service.Impl;

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

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

控制层DishController

package com.itzq.reggie.controller;

import com.itzq.reggie.service.DishFlavorService;
import com.itzq.reggie.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次请求即可。

添加菜品页面展示
在这里插入图片描述

业务开发Day4-08-新增菜品_代码开发_查询分类数据

前端分析

一个vue实例被创建后会调用钩子函数，执行其中的方法
在这里插入图片描述

来到getDishList方法，执行其中getCategoryList方法
在这里插入图片描述

执行getCategoryList方法向服务端发送ajax请求，请求方式为get
在这里插入图片描述

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

    @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).orderByDesc(Category::getUpdateTime);
        //查询数据
        List<Category> list = categoryService.list(queryWrapper);
        //返回数据
        return R.success(list);

    }

启动项目，进入菜品管理，点击菜品分类下拉框，成功获得数据
在这里插入图片描述

业务开发Day4-09-新增菜品_代码开发_接收页面提交的数据

接收图片文件

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

测试

添加一张图片，并回显图片
在这里插入图片描述

注意事项

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

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

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

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


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

代码开发

在DishController类中添加save方法

  • 代码逻辑：测试是否可以正常的接收前端传过来的json数据
  • 注意：因为前端传来的是json数据，所以我们需要在参数前添加*@RequestBody*注解
  • 具体代码如下：
@PostMapping
    public R<String> save(@RequestBody DishDto dishDto){
        log.info("接收的dishDto数据：{}",dishDto.toString());
        return null;
    }

测试

debug方式启动项目，在标记的行处添加断点，用于查看数据
在这里插入图片描述

在添加菜品页面输入数据，点击保存
在这里插入图片描述

来到断点处，查看到数据准确无误的提交到服务端
在这里插入图片描述

业务开发Day4-10-新增菜品_代码开发_保存数据到菜品表和菜品口味表

分析

  • 在保存数据到菜品表和菜品口味表的过程中，我们需要对保存到菜品口味表的数据做相应的处理
  • 取出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
在这里插入图片描述

业务开发Day4-12-菜品信息分页查询_需求分析

需求分析

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

图片和菜品分类比较特殊

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

业务开发Day4-13-菜品信息分页查询_代码开发1

代码开发-梳理交互过程

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

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

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

代码

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

    @GetMapping("/page")
    public R<Page> page(int page, int pageSize, String name){

        //构造分页构造器对象
        Page<Dish> pageInfo = new Page<>();
        //条件构造器
        LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
        //添加条件
        queryWrapper.like(name != null,Dish::getName,name);
        queryWrapper.orderByDesc(Dish::getUpdateTime);
        //执行分页查询
        dishService.page(pageInfo,queryWrapper);

        return R.success(pageInfo);
    }

测试

  • 为什么只有宫保鸡丁有图片的展示效果，因为这是在刚刚添加菜品的时候添加的数据
  • 保证了在服务端存在对应图片名的信息，而其他是菜品是直接从sql文件导入，服务端不一定有对应的图片名
  • 为什么菜品分类中没有数据？
  • 因为服务端传给前端的菜品分类数据不满足前端的要求，所以在页面中不能回显菜品分类数据
    在这里插入图片描述

业务开发Day4-14-菜品信息分页查询_代码开发2

分析

在前端页面发现菜品分类对应的prop属性名为categoryName
在这里插入图片描述

但我们在响应的数据当中并没有发现categoryName字段
在这里插入图片描述

  • 页面需要什么数据，服务端就应该返还什么样的数据，所以Dish对象不满足该页面要求
  • 在之前我们创建了DishDto类，发现类中的属性名正好和前端的属性名对应
    在这里插入图片描述

代码

修改DishController中的page方法

 	@GetMapping("/page")
    public R<Page> page(int page, int pageSize, String name){

        //构造分页构造器对象
        Page<Dish> pageInfo = new Page<>();
        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");

        //获取原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);
            String categoryName = category.getName();
            dishDto.setCategoryName(categoryName);
            return dishDto;
        }).collect(Collectors.toList());

        dishDtoPage.setRecords(list);

        return R.success(dishDtoPage);
    }

业务开发Day4-15-菜品信息分页查询_功能测试

功能测试

前提

我们需要在分页方法中添加判空条件，若查询的数据为空，经过判断后跳过部分代码，就不会爆空指针异常
在这里插入图片描述

启动项目，点击菜品管理，可以看见页面展现的菜品分类信息
在这里插入图片描述

业务开发Day4-16-修改菜品_需求分析&梳理交互过程

需求分析

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

代码开发-梳理交互过程

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

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

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

业务开发Day4-17-修改菜品_代码开发_根据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);
    }

业务开发Day4-18-修改菜品_代码开发_测试数据回显

测试数据回显

在DishController的get方法中加入断点
在这里插入图片描述

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

页面回显成功
在这里插入图片描述

业务开发Day4-19-修改菜品_代码开发_修改菜品信息和口味信息

分析前端页面发送的请求

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

  • 请求的方式：put
    在这里插入图片描述

  • 发送到服务端的数据为json数据
    在这里插入图片描述

代码

在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("新增菜品成功");
    }

业务开发Day4-20-修改菜品_功能测试

功能测试

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

  • 要修改菜品的初始值
    在这里插入图片描述

  • 点击修改，输入想要修改的信息，点击保存
    在这里插入图片描述

  • 跳转到菜品管理界面，修改菜品信息成功
    在这里插入图片描述

# java # html5 # spring boot # 后端 # 前端框架
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云开发者桌面全新发布CodeArts IDE for Python

avatar 华为云开发者联盟
cover

Sermant在异地多活场景下的实践

avatar 华为云开发者联盟
cover

理论+实践，带你了解分布式训练

avatar 华为云开发者联盟