瑞吉外卖项目基于spring Boot+mybatis-plus开发超详细笔记，有源码链接_未来很长，别只看眼前

irpas 02-07 1307

本项目是基于自学b站中黑马程序员的瑞吉外卖项目:视频链接：

黑马程序员Java项目实战《瑞吉外卖》，轻松掌握springboot + mybatis plus开发核心技术的真java实战项目_哔哩哔哩_bilibilihttps://·/video/BV13a411q753?spm_id_from=333.337.search-card.all.click这篇博客是记录自己学习该项目的markdown笔记；并且自己把视频中一些没实现的功能给实现了；本人技术可能不到位，笔记仅供参考学习使用；

本人自己把视频中老师没讲的一些功能给实现了，比如，后台按条件查询客户订单，用户个人查询自己的订单，菜品，套餐的启售，停售，购物车中菜品或者是套餐数量减少，后台套餐的修改。代码不一定规范，但是功能是没问题的！！！

项目中的资料下载链接：（从黑马公众号获取到的最初状态的源码，后面自己补充了一些课程没讲的功能，功能的实现代码在我博客的笔记中有）

链接：https://pan.baidu.com/s/1cdHI5cDjyHKZ4_0GmIevnQ? 提取码：668a

一、项目背景介绍?

二、软件开发整体介绍

三、开发环境的搭建

①数据库环境的搭建

②maven项目搭建

③导入前端文件

四、后台登陆功能开发

①需求分析：

②代码开发：

实体类和mapper的开发

service

封装返回的结果类

controller

③功能测试：

五、后台系统退出功能

六、员工管理模块

完善登陆功能

新增员工

全局异常捕获

员工信息分页查询

启用/禁用员工账号

使用自定义消息转换器

编辑员工信息

七、菜品分类管理

公共字段填充(这里有重点)

新增分类

菜品类的分页

删除分类（这里有注意点）

修改分类

八、菜品管理的业务功能

文件的上传和下载（重点）

新增菜品（业务的实现是重点）

接收页面提交的数据（涉及两张表）

菜品信息分页查询(功能完善里面的代码要熟悉,有集合泛型的转换，对象copy)

修改菜品(回显和保存修改都是两张表)

菜品信息的回显：

保存修改：(重点)

需要自己单独实现的功能

九、套餐管理

添加菜品数据回显

保存添加套餐（理解里面的关系有点困难）

套餐信息分页查询

删除套餐

需要自己单独实现的功能

套餐管理的启售，停售

套餐管理的修改

后台订单展示和查询

手机端开发

一、项目背景介绍?

技术选型：

二、软件开发整体介绍

三、开发环境的搭建 ①数据库环境的搭建

1.创建数据库：

2.导入表结构，直接运行外部SQL文件；

数据表的说明：

序号表名说明1employee员工表2category菜品和套餐分类表3dish菜品表4setmeal套餐表5setmeal_dish套餐菜品关系表6dish_flavor菜品口味关系表7user用表(c端)8address_book地址薄表9shopping_cart购物车表10orders订单表11orders_detail订单明细表

②maven项目搭建

?1.创建一个maven项目

注意:创建maven项目后，一定要检查项目的编码，maven仓库的配置，jdk的配置等；

?2.导入pom文件

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://·piler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <scope>compile</scope> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.2</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.20</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.76</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.6</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.23</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.6.6</version> </plugin> </plugins> </build> </project>

?3.创建application.yml文件：

server: port: 8080 spring: application: # 应用的名称，选择性配置 name: reggie_take_out datasource: druid: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true username: root password: root mybatis-plus: configuration: #在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射 map-underscore-to-camel-case: true # 把SQL的查询的过程输出到控制台 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: ASSIGN_ID

?3.创建Boot程序入口

package com.itheima.reggie; import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * @author LJM * @create 2022/4/14 */ @Slf4j @SpringBootApplication @ServletComponentScan public class ReggieApplication { public static void main(String[] args) { SpringApplication.run(ReggieApplication.class,args); log.info("项目启动成功..."); } }

4.运行Boot程序，看是否成功；

③导入前端文件

注意前端文件的位置，在Boot项目中，前台默认就只能访问 resource目录下的static和template文件夹下的文件；所以如果要使用这种方式，直接创建一个static目录就行，然后把这些前端资源放在这个static目录下就行；

如果你不想把前端文件放在这两个默认的文件夹下，那么就可以自己定义mvc的支持，这里我们使用的就是这方式；（多学习一种定义的方法，以后自定义映射的时候可以使用）

package com.itheima.reggie.config; import lombok.extern.slf4j.Slf4j; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; /** * @author LJM * @create 2022/4/14 */ @Slf4j @Configuration public class WebMvcConfig extends WebMvcConfigurationSupport { /** * 设置资源映射 * @param registry * 前面表示的是浏览器访问的请求 * 后面表示的是要把请求映射到哪里去 */ @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { log.info("开始进行静态资源映射"); registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/"); registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/"); } }

记得在启动程序加上@ServletComponentScan这个注解，否则这个配置类不会生效；

四、后台登陆功能开发 ①需求分析：

需求分析是通过产品原型来进行的，这个是项目经理负责的；

②代码开发：

前端页面访问地址：http://localhost:8080/backend/page/login/login.html

?查看登陆请求信息：点击登录会发送登录请求：http://localhost:8080/employee/login

我们去后端进行代码开发相关的接口就行；

创建相关的包：

实体类和mapper的开发

在entity导入实体类employee类；

使用mybatis-plus提供的自动生成mapper:

package com.itheima.reggie.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.itheima.reggie.entity.Employee; import org.apache.ibatis.annotations.Mapper; @Mapper public interface EmployeeMapper extends BaseMapper<Employee> { }

?使用快捷键 Ctrl + f3 就可以看见mybatis-plus 帮我们定义的mapper接口：

service package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.Employee; public interface EmployeeService extends IService<Employee> { } package com.itheima.reggie.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.itheima.reggie.entity.Employee; import com.itheima.reggie.mapper.EmployeeMapper; import org.springframework.stereotype.Service; /** * @author LJM * @create 2022/4/15 */ @Service //这两个泛型一个是实体类对应的mapper,一个是实体类 public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService { }

查看帮我们实现的方法：

封装返回的结果类

创建一个新的包，common，用来存放共同使用的类，把这个返回结果类放入这个公共包；

package com.itheima.reggie.common; import lombok.Data; import java.util.HashMap; import java.util.Map; /** * 通用返回结果类，服务端响应的数据最终都会封装成此对象 * @param <T> */ @Data public class R<T> { private Integer code; //编码：1成功，0和其它数字为失败 private String msg; //错误信息 private T data; //数据 private Map map = new HashMap(); //动态数据 public static <T> R<T> success(T object) { R<T> r = new R<T>(); r.data = object; r.code = 1; return r; } public static <T> R<T> error(String msg) { R r = new R(); r.msg = msg; r.code = 0; return r; } public R<T> add(String key, Object value) { this.map.put(key, value); return this; } }

controller

登陆的具体流程图：在平板上，记得传过来。

先处理业务逻辑，然后再编码！！！

1、将页面提交的密码password进行md5加密处理 2、根据页面提交的用户名username查询数据库 3、如果没有查询到则返回登录失败结果 4、密码比对，如果不一致则返回登录失败结果 5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果 6、登录成功，将员工id存入Session并返回登录成功结果 package com.itheima.reggie.controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.itheima.reggie.common.R; import com.itheima.reggie.entity.Employee; import com.itheima.reggie.service.EmployeeService; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.util.DigestUtils; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import java.nio.charset.StandardCharsets; /** * @author LJM * @create 2022/4/15 */ @RestController @Slf4j @RequestMapping("/employee") public class EmployeeController { @Autowired private EmployeeService employeeService; @PostMapping("/login") //使用restful风格开发 public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){//接收前端的json数据,这个json数据是在请求体中的 //这里为什么还有接收一个request对象的数据? //登陆成功后，我们需要从请求中获取员工的id，并且把这个id存到session中，这样我们想要获取登陆对象的时候就可以随时获取 //1、将页面提交的密码password进行md5加密处理 String password = employee.getPassword();//从前端用户登录拿到的用户密码 password = DigestUtils.md5DigestAsHex(password.getBytes());//对用户密码进行加密 //2、根据页面提交的用户名username查询数据库 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(Employee::getUsername,employee.getUsername()); //在设计数据库的时候我们对username使用了唯一索引,所以这里可以使用getOne方法 Employee emp = employeeService.getOne(queryWrapper);//这里的切入Wrapper是什么？ //3、如果没有查询到则返回登录失败结果 if (emp == null ){ return R.error("用户不存在"); } //4、密码比对，如果不一致则返回登录失败结果 if (!emp.getPassword().equals(password)){ //emp.getPassword()用户存在后从数据库查询到的密码(加密状态的) password是前端用户自己输入的密码(已经加密处理) return R.error("密码不正确"); } //5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果 if (emp.getStatus() == 0){ return R.error("账号已禁用"); } //6、登录成功，将员工id存入Session并返回登录成功结果 request.getSession().setAttribute("employee",emp.getId()); //把从数据库中查询到的用户返回出去 return R.success(emp); } } ③功能测试：

使用debug的形式启动项目，然后在浏览器访问:http://localhost:8080/backend/page/login/login.html

然后打开浏览器的f12,查看具体的请求情况：

在后台查看debug的状态：

?运行成功后：（这个密码是123456），数据存在了浏览器中：这个代码是吧返回的数据保持在浏览器中：

localStorage.setItem('userInfo',JSON.stringify(res.data))

在浏览器我们可以看见，key为userInfo，value为我们返回的数据；

五、后台系统退出功能

点击退出按钮，发送退出的请求：http://localhost:8080/employee/logout

?后端代码处理：

①在controller中创建对应的处理方法来接受前端的请求，请求方式为post；

②清理session中的用户id

③返回结果（前端页面会进行跳转到登录页面）

前端代码，也要把浏览器中的数据给清除；

/** * 退出功能 * ①在controller中创建对应的处理方法来接受前端的请求，请求方式为post； * ②清理session中的用户id * ③返回结果（前端页面会进行跳转到登录页面） * @return */ @PostMapping("/logout") public R<String> logout(HttpServletRequest request){ //清理session中的用户id request.getSession().removeAttribute("employee"); return R.success("退出成功"); }

功能测试：先登陆，然后退出即可；看浏览器中的数据是否会被清除；

六、员工管理模块完善登陆功能

问题分析：前面的登陆存在一个问题，如果用户不进行登陆，直接访问系统的首页，照样可以正常访问，这种设计是不合理的，我们希望看到的效果是只有完成了登陆后才可以访问系统中的页面，如果没有登陆则跳转到登陆页面；

那么如何实现？

答案就是使用过滤器或者是拦截器，在拦截器或者是过滤器中判断用户是否已经完成了登陆，如果没有登陆则跳转到登陆页面；

代码实现：这里使用的是过滤器；

①创建自定义过滤器LongCheckFilter

package com.itheima.reggie.filter; import lombok.extern.slf4j.Slf4j; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @author LJM * @create 2022/4/15 * 检查用户是否已经完成登陆 * filterName过滤器名字 * urlPatterns拦截的请求，这里是拦截所有的请求 * */ @WebFilter(filterName = "LongCheckFilter",urlPatterns = "/*") @Slf4j public class LongCheckFilter implements Filter { @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; log.info("拦截到的请求:{}",request.getRequestURL()); //对请求进行放行 filterChain.doFilter(request,response); } }

②在启动类加上注解@ServletComponentScan

然后先测试一下过滤器能不能生效，具体的逻辑等下再书写；发送请求，看后台能不能打印拦截的信息：

?③完善过滤器的处理逻辑

?具体逻辑的代码实现：

package com.itheima.reggie.filter; import com.alibaba.fastjson.JSON; import com.itheima.reggie.common.R; import lombok.extern.slf4j.Slf4j; import org.springframework.util.AntPathMatcher; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @author LJM * @create 2022/4/15 * 检查用户是否已经完成登陆 * filterName过滤器名字 * urlPatterns拦截的请求，这里是拦截所有的请求 * */ @WebFilter(filterName = "LongCheckFilter",urlPatterns = "/*") @Slf4j public class LongCheckFilter implements Filter { //路径匹配器，支持通配符 public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher(); @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { //对请求和响应进行强转,我们需要的是带http的 HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; //1、获取本次请求的URI String requestURL = request.getRequestURI(); //定义不需要处理的请求路径比如静态资源(静态页面我们不需要拦截,因为此时的静态页面是没有数据的) String[] urls = new String[]{ "/employee/login", "/employee/logout", "/backend/**", "/front/**" }; //做调试用的 //log.info("拦截到请求：{}",requestURL); //2、判断本次请求是否需要处理 boolean check = check(urls, requestURL); //3、如果不需要处理，则直接放行 if(check){ //log.info("本次请求{}不需要处理",requestURL); filterChain.doFilter(request,response); return; } //4、判断登录状态，如果已登录，则直接放行 if(request.getSession().getAttribute("employee") != null){ //log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("employee")); filterChain.doFilter(request,response); return; } //log.info("用户未登录"); //5、如果未登录则返回未登录结果，通过输出流方式向客户端页面响应数据,具体响应什么数据，看前端的需求，然后前端会根据登陆状态做页面跳转 response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN"))); return; } /** * 路径匹配，检查本次请求是否需要放行 * @param urls * @param requestURI * @return */ public boolean check(String[] urls,String requestURI){ for (String url : urls) { //把浏览器发过来的请求和我们定义的不拦截的url做比较，匹配则放行 boolean match = PATH_MATCHER.match(url, requestURI); if(match){ return true; } } return false; } }

功能测试: 发起几个请求看看后台的输出，和能不能访问到资源里面的数据，和能不能跳转，注意，上面的后台日志代码已经被注释，需要在后台看到日志的话，需要把注释去掉；

新增员工

数据模型：

新增员工，其实就是将我们的新增页面录入的员工数据插入到employee表；注意：employee表中对username字段加入了唯一的约束，因为username是员工的登陆账号，必须是唯一的！

employee表中的status字段默认设置为1，表示员工状态可以正常登陆； ?

?代码开发：

梳理一下代码执行的流程：

/** * 新增员工 * @param employee * @return */ @PostMapping()//因为请求就是 /employee 在类上已经写了，所以咱俩不用再写了 public R<String> save(HttpServletRequest request,@RequestBody Employee employee){ //对新增的员工设置初始化密码123456,需要进行md5加密处理，后续员工可以直接修改密码 employee.setPassword(DigestUtils.md5DigestAsHex("123456".getBytes())); employee.setCreateTime(LocalDateTime.now()); employee.setUpdateTime(LocalDateTime.now()); //获得当前登录用户的id Long empId = (Long) request.getSession().getAttribute("employee"); employee.setCreateUser(empId); //创建人的id,就是当前用户的id（在进行添加操作的id） employee.setUpdateUser(empId);//最后的更新人是谁 //mybatis提供的新增方法 employeeService.save(employee); return R.success("新增员工成功"); }

?功能测试：登陆之后，点击添加，然后确认，然后去数据库看一下新增数据成功没，新增成功，那就表示代码可以执行；注意：但是因为我们把username设置为唯一索引，所以下次再新增用户的时候，就会出现异常，这个异常是MySQL数据库抛出来的；

解决bug:

全局异常捕获

这个全局异常捕获写在common包下；

package com.itheima.reggie.common; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import java.sql.SQLIntegrityConstraintViolationException; /** * @author LJM * @create 2022/4/15 * 全局异常处理 */ @ControllerAdvice(annotations = {RestController.class, Controller.class}) //表示拦截哪些类型的controller注解 @ResponseBody @Slf4j public class GlobalExceptionHandler { /** * 处理SQLIntegrityConstraintViolationException异常的方法 * @return */ @ExceptionHandler(SQLIntegrityConstraintViolationException.class) public R<String> exceptionHandle(SQLIntegrityConstraintViolationException exception){ log.error(exception.getMessage()); //报错记得打日志 if (exception.getMessage().contains("Duplicate entry")){ //获取已经存在的用户名，这里是从报错的异常信息中获取的 String[] split = exception.getMessage().split(" "); String msg = split[2] + "这个用户名已经存在"; return R.error(msg); } return R.error("未知错误"); } }

功能测试：登陆后，添加一个一个已经存在账号名，看前端页面提示的是什么信息，以及看后台是否输出了报错日志；

员工信息分页查询

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

?流程分析：

?Java代码：

//配置mybatis-plus的分页插件 package com.itheima.reggie.config; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; /** * @author LJM * @create 2022/4/15 * 配置mybatis-plus提供的分页插件拦截器 */ @Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor(){ MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return mybatisPlusInterceptor; } } /** * 员工信息分页 * @param page 当前页数 * @param pageSize 当前页最多存放数据条数,就是这一页查几条数据 * @param name 根据name查询员工的信息 * @return */ @GetMapping("/page") public R<Page> page(int page,int pageSize,String name){ //这里之所以是返回page对象(mybatis-plus的page对象)，是因为前端需要这些分页的数据(比如当前页，总页数) //在编写前先测试一下前端传过来的分页数据有没有被我们接受到 //log.info("page = {},pageSize = {},name = {}" ,page,pageSize,name); //构造分页构造器就是page对象 Page pageInfo = new Page(page,pageSize); //构造条件构造器就是动态的封装前端传过来的过滤条件记得加泛型 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper(); //根据条件查询注意这里的条件是不为空 queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name); //添加一个排序条件 queryWrapper.orderByDesc(Employee::getUpdateTime); //执行查询这里不用封装了mybatis-plus帮我们做好了 employeeService.page(pageInfo,queryWrapper); return R.success(pageInfo); }

功能测试：分页的三个时机，①用户登录成功时，分页查询一次 ②用户使用条件查询的时候分页一次 ③跳转页面的时候分页查询一次

启用/禁用员工账号

需求分析：

在员工管理列表页面中，可以对某个员工账号进行启用或者是禁用操作。账号禁用的员工不能登陆系统，启用后的员工可以正常登陆；

需要注意的是：只有管理员(admin用户)才可以对其他普通用户进行启用操作，禁用操作，所以普通用户登录系统后启用，禁用按钮不显示；

并且如果某个员工账号的状态为正常，则按钮显示为’‘禁用’，如果员工账号状态为已禁用，则按钮显示为“启用”。

普通员工登录系统后，启用，禁用按钮不显示；

代码开发：

注意:这里修改状态码要反着来，因为正常的用户你只能把它设置为禁用；已经禁用的账号你只能把它设置为正常

流程分析：

注意：启用，禁用的员工账号，本质上就是一个更新操作，也就是对status状态字段进行修改操作；

在controller中创建update方法，此方法是一个通用的修改员工信息的方法,因为status也是employee中的一个属性而已；这里使用了动态SQL的功能，根据具体的数据修改对应的字段信息；

/** * 根据id修改员工信息 * @param employee * @return */ @PutMapping public R<String> update(HttpServletRequest request,@RequestBody Employee employee){ log.info(employee.toString()); Long empId = (Long)request.getSession().getAttribute("employee"); employee.setUpdateTime(LocalDateTime.now()); employee.setUpdateUser(empId); employeeService.updateById(employee); return R.success("员工信息修改成功"); }

功能测试：测试的时候我们发现出现了问题，就是我们修改员工的状态，提示信息显示修改成功，但是我们去数据库查验证的时候，发现员工的状态码压根就没有变化，这是为什么呢？

仔细观察id后，我们会发现后台的SQL语句使用的id和数据库中的id是不一样的！

原因是：mybatis-plus对id使用了雪花算法，所以存入数据库中的id是19为长度，但是前端的js只能保证数据的前16位的数据的精度，对我们id后面三位数据进行了四舍五入，所以就出现了精度丢失；就会出现前度传过来的id和数据里面的id不匹配，就没办法正确的修改到我们想要的数据；

当然另一种解决bug的方法是:关闭mybatis-plus的雪花算法来处理ID，我们使用自增ID的策略来往数据库添加id就行；

使用自定义消息转换器

?代码bug修复：

思路：既然js对long型的数据会进行精度丢失，那么我们就对数据进行转型，我们可以在服务端（Java端）给页面响应json格式的数据时进行处理，将long型的数据统一转换为string字符串；

代码实现步骤：

?步骤一：自定义消息转换类

package com.itheima.reggie.common; import com.fasterxml.jackson.databind.DeserializationFeature; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.module.SimpleModule; import com.fasterxml.jackson.databind.ser.std.ToStringSerializer; import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer; import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer; import com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer; import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer; import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer; import com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer; import java.math.BigInteger; import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.time.format.DateTimeFormatter; import static com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES; /** * 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象 * 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象] * 从Java对象生成JSON的过程称为 [序列化Java对象到JSON] */ public class JacksonObjectMapper extends ObjectMapper { public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd"; public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss"; public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss"; public JacksonObjectMapper() { super(); //收到未知属性时不报异常 this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false); //反序列化时，属性不存在的兼容处理 this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES); SimpleModule simpleModule = new SimpleModule() .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT))) .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT))) .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT))) .addSerializer(BigInteger.class, ToStringSerializer.instance) .addSerializer(Long.class, ToStringSerializer.instance) .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT))) .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT))) .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT))); //注册功能模块例如，可以添加自定义序列化器和反序列化器 this.registerModule(simpleModule); } }

步骤二：在前面的webMvcConfig 配置类中扩展spring mvc 的消息转换器，在此消息转换器中使用spring提供的对象转换器进行Java对象到json数据的转换；

/** * 扩展mvc框架的消息转换器 * @param converters */ @Override protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) { //log.info("扩展消息转换器..."); //创建消息转换器对象 MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter(); //设置对象转换器，底层使用Jackson将Java对象转为json messageConverter.setObjectMapper(new JacksonObjectMapper()); //将上面的消息转换器对象追加到mvc框架的转换器集合中 //转换器是有优先级顺序的，这里我们把自己定义的消息转换器设置为第一优先级，所以会优先使用我们的转换器来进行相关数据进行转换，如果我们的转换器没有匹配到相应的数据来转换，那么就会去寻找第二个优先级的转换器，以此类推 converters.add(0,messageConverter); }

然后启动程序，使用f12查看服务器响应到浏览器的用户id是不是变成了字符串，和数据库中是否相对应；

发现对应，即消息转换器配置成功；

然后再去测试启用与禁用员工账号这个功能，发现操作更新成功，并且数据库修改成功；

编辑员工信息

?需求分析：

?数据回显后端代码：其实主要逻辑在前端。。。。。

/** * 根据前端传过来的员工id查询数据库进行数据会显给前端 * @param id * @return */ @GetMapping("/{id}") public R<Employee> getById(@PathVariable Long id){ Employee employee = employeeService.getById(id); if (employee != null){ return R.success(employee) ; } return R.error("没有查询到该员工信息"); }

修改回显数据后，点击保存，会发送一个update的请求给后端，前面我们已经写了这个update的controller，所以只需要在前端跳转发请求就行；这样就实现了方法的复用，减少了代码两；

功能测试：自己测试编辑，看能不能数据回显，可不可以修改成功，修改后数据库的数据有没有跟着变化；

七、菜品分类管理公共字段填充(这里有重点)

?问题分析：

把相关的注解加在需要mybatis-plus自动帮我们填充的字段上面 @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;

?然后设置一个处理类：在此类中为公共字段赋值，需要实现接口；

package com.itheima.reggie.common; import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import lombok.extern.slf4j.Slf4j; import org.apache.ibatis.reflection.MetaObject; import java.time.LocalDateTime; /** * @author LJM * @create 2022/4/16 * 自定义元数据对象处理器 */ @Slf4j @Component //注意:这个要记得交给spring容器管理，不然这个功能就没发用。。。。 //那么怎么确定你要添加的功能是不是要交给容器管理呢？就是你直接写了一个工具类或者是功能类，需要对数据库的数据或者是数据库数据的结果产生影响的时候，你明明写了这样一个类，但是功能却没有生效，那么这个时候就要首先考虑是不是容器没有托管这个类 public class MyMetaObjecthandler implements MetaObjectHandler { /** * 插入操作，自动填充 * @param metaObject */ @Override public void insertFill(MetaObject metaObject) { metaObject.setValue("createTime", LocalDateTime.now()); metaObject.setValue("updateTime",LocalDateTime.now()); metaObject.setValue("createUser", new Long(1)); //这里的id是不能直接获取的，所以这里先写死，后面教你怎么动态获取员工id metaObject.setValue("updateUser",new Long(1)); } /** * 更新操作，自动填充 * @param metaObject */ @Override public void updateFill(MetaObject metaObject) { metaObject.setValue("updateTime",LocalDateTime.now()); metaObject.setValue("updateUser",new Long(1)); } }

功能完善：

然后为了动态的获取员工的id,这里我们使用了threadLocal这个局部变量来获取和存储员工id;

创建一个工具类来设置和获取threadLocal中的员工id, 注意：要先把数据设置进threadLocal中，才能获取到

package com.itheima.reggie.common; /** * @author LJM * @create 2022/4/16 * 基于ThreadLocal封装工具类，用户保存和获取当前登录用户id */ public class BaseContext { //用来存储用户id private static ThreadLocal<Long> threadLocal = new ThreadLocal<>(); /** * 设置值 * @param id */ public static void setCurrentId(Long id){ threadLocal.set(id); } /** * 获取值 * @return */ public static Long getCurrentId(){ return threadLocal.get(); } }

在前面我们写的LongCheckFilter这个过滤器中，把这个地方的代码加上添加和保存id的代码

//4、判断登录状态，如果已登录，则直接放行 if(request.getSession().getAttribute("employee") != null){ //log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("employee")); //把用户id存储到本地的threadLocal Long emId = (Long) request.getSession().getAttribute("employee"); BaseContext.setCurrentId(emId); filterChain.doFilter(request,response); return; } 把处理器中的静态id改为动态获取： metaObject.setValue("createUser", BaseContext.getCurrentId()); metaObject.setValue("updateUser",BaseContext.getCurrentId());

?这里的ID之所以全为1，是因为操作添加员工这个功能的管理员为admin，它的id就是1；

新增分类

需求分析：

数据模型：

从资料去复制实体Category类到entity包；

数据库中的表结构：

创建mapper:

package com.itheima.reggie.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.itheima.reggie.entity.Category; import org.apache.ibatis.annotations.Mapper; @Mapper public interface CategoryMapper extends BaseMapper<Category> { }

?创建service：

package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.Category; /** * @author LJM * @create 2022/4/16 */ public interface CategoryService extends IService<Category> { } package com.itheima.reggie.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.itheima.reggie.entity.Category; import com.itheima.reggie.mapper.CategoryMapper; import com.itheima.reggie.service.CategoryService; import org.springframework.stereotype.Service; /** * @author LJM * @create 2022/4/16 */ @Service public class CategoryServiceImpl extends ServiceImpl<CategoryMapper, Category> implements CategoryService { }

编写controller：

?我们发现新增菜品分类的请求地址是:http://localhost:8080/category

提交的数据格式为：

{name: "湘菜", type: "1", sort: "1"} /** * 新增套餐分类 * @param category * @return */ @PostMapping public R<String> save(@RequestBody Category category){ log.info("{category}" ,category); categoryService.save(category); return R.success("新增分类成功"); }

功能测试：登录后，点击添加新增菜品分类，看是否成功，数据库的数据是否变化；

菜品类的分页

?代码开发：

/** * 分页查询 * @param page * @param pageSize * @return */ @GetMapping("/page") public R<Page> page(int page,int pageSize){ //创建一个分页构造器 Page<Category> categoryPage = new Page<>(page,pageSize); //创建一个条件构造器用来排序用的注意这个条件构造器一定要使用泛型，否则使用条件查询这个方法的时候会报错 LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper(); //添加排序条件，根据sort字段进行排序 queryWrapper.orderByAsc(Category::getSort); categoryService.page(categoryPage,queryWrapper); return R.success(categoryPage); }

功能测试：

删除分类（这里有注意点）

?需求分析：

代码实现：注意这里的删除功能是不完整的，因为可能需要删除的数据是与其他表关联的，所以删除之前要先判断该条数据是否与其他表中的数据关联；

/** * 根据id来删除分类的数据 * @param id * @return */ @DeleteMapping() public R<String> delete(@RequestParam("ids") Long ids){ //注意这里前端传过来的数据是ids categoryService.removeById(ids); return R.success("分类信息删除成功"); }

?功能完善：

创建对应的mapper:

package com.itheima.reggie.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.itheima.reggie.entity.Dish; import org.apache.ibatis.annotations.Mapper; /** * @author LJM * @create 2022/4/16 */ @Mapper public interface DishMapper extends BaseMapper<Dish> { } package com.itheima.reggie.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.itheima.reggie.entity.Setmeal; import org.apache.ibatis.annotations.Mapper; /** * @author LJM * @create 2022/4/16 */ @Mapper public interface SetmealMapper extends BaseMapper<Setmeal> { }

创建service：

package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.Dish; /** * @author LJM * @create 2022/4/16 */ public interface DishService extends IService<Dish> { } package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.Setmeal; public interface SetmealService extends IService<Setmeal> { } package com.itheima.reggie.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.itheima.reggie.entity.Dish; import com.itheima.reggie.mapper.DishMapper; import com.itheima.reggie.service.DishService; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Service; /** * @author LJM * @create 2022/4/16 */ @Service @Slf4j public class DishServiceImpl extends ServiceImpl<DishMapper, Dish> implements DishService { } package com.itheima.reggie.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.itheima.reggie.entity.Setmeal; import com.itheima.reggie.mapper.SetmealMapper; import com.itheima.reggie.service.SetmealService; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Service; /** * @author LJM * @create 2022/4/16 */ @Service @Slf4j public class SetmealServiceImpl extends ServiceImpl<SetmealMapper, Setmeal> implements SetmealService { }

添加自定义的service方法：(就是我们需要的业务mybatis没有提供，所以就需要自己另外在service创建新的方法，并且在相关的业务中实现)

//在CategoryService中定义自己需要的方法，直接写就行 void remove(Long id); 在CategoryService实现类中重写该方法：自定义异常类，因为这里需要抛异常了： package com.itheima.reggie.common; /** * 自定义业务异常类 */ public class CustomException extends RuntimeException { public CustomException(String message){ super(message); } } //然后在外面前面写的GlobalExceptionHandler全局异常捕获器中添加该异常，这样就可以把相关的异常信息显示给前端操作的人员看见 /** * 处理自定义的异常，为了让前端展示我们的异常信息，这里需要把异常进行全局捕获，然后返回给前端 * @param exception * @return */ @ExceptionHandler(CustomException.class) public R<String> exceptionHandle(CustomException exception){ log.error(exception.getMessage()); //报错记得打日志 //这里拿到的message是业务类抛出的异常信息，我们把它显示到前端 return R.error(exception.getMessage()); } /** * 根据id删除分类，删除之前需要进行判断是否有关联数据 * @param id */ @Override public void remove(Long id) { LambdaQueryWrapper<Dish> dishLambdaQueryWrapper = new LambdaQueryWrapper<>(); //添加查询条件 dishLambdaQueryWrapper.eq(Dish::getCategoryId,id); //注意:这里使用count方法的时候一定要传入条件查询的对象，否则计数会出现问题，计算出来的是全部的数据的条数 int count = dishService.count(dishLambdaQueryWrapper); //查询当前分类是否关联了菜品，如果已经管理，直接抛出一个业务异常 if (count > 0){ //已经关联了菜品，抛出一个业务异常 throw new CustomException("当前分类项关联了菜品,不能删除"); } //查询当前分类是否关联了套餐，如果已经管理，直接抛出一个业务异常 LambdaQueryWrapper<Setmeal> setmealLambdaQueryWrapper = new LambdaQueryWrapper<>(); setmealLambdaQueryWrapper.eq(Setmeal::getCategoryId,id); //注意:这里使用count方法的时候一定要传入条件查询的对象，否则计数会出现问题，计算出来的是全部的数据的条数 int setmealCount = setmealService.count(setmealLambdaQueryWrapper); if (setmealCount > 0){ //已经关联了套餐，抛出一个业务异常 throw new CustomException("当前分类项关联了套餐,不能删除"); } //正常删除 super.removeById(id); }

然后在controller调用刚刚实现的方法就行：把之前的remove方法给删除就行，重新调用我们自己实现的方法；

/** * 根据id来删除分类的数据 * @param id * @return */ @DeleteMapping public R<String> delete(@RequestParam("ids") Long id){ //注意这里前端传过来的数据是ids categoryService.remove(id); return R.success("分类信息删除成功"); }

测试：自己添加测试数据测试就行；记得一定要测试一下删除有相关联的数据，看会不会删除和在前端提示异常信息；

修改分类

这里的编辑的数据回显，前端已经帮我们做好了，所以我们就不需要去数据库查询了，这样可以减少对数据库的操作；

/** * 根据id修改分类 * @param category * @return */ @PutMapping public R<String> update(@RequestBody Category category){ categoryService.updateById(category); return R.success("修改分类信息成功"); }

记得在对应的实体类加上公共字段的值设置：前面我们配置了这个，所以这里只需要加注解就行；

//创建时间 @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; 八、菜品管理的业务功能文件的上传和下载（重点）

整体介绍：

?文件下载：

后端具体代码的实现：

yml配置文件：配置上传图片的存储位置；

reggie: path: E:\reggie\ package com.itheima.reggie.controller; import com.itheima.reggie.common.R; 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.ServletOutputStream; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.util.UUID; /** * @author LJM * @create 2022/4/16 * 文件上传和下载 */ @RestController @RequestMapping("/common") public class CommonController { @Value("${reggie.path}") private String basePath; /** * 文件的上传 * @param file * @return */ @PostMapping("/upload") public R<String> upload(MultipartFile file){ //这个file是一个临时文件，需要转存到指定位置，否则本次请求完成后临时文件会删除 //拿到文件的原始名 String originalFilename = file.getOriginalFilename(); //拿到文件的后缀名比如 .png .jpg 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 R.success(fileName); } @GetMapping("/download") public void download(String name, HttpServletResponse response){ try { //输入流，通过输入流读取文件内容这里的name是前台用户需要下载的文件的文件名 //new File(basePath + name) 是为了从存储图片的地方获取用户需要的图片对象 FileInputStream fileInputStream = new FileInputStream(new File(basePath + name)); //输出流，通过输出流将文件写回浏览器 ServletOutputStream outputStream = response.getOutputStream(); //设置写回去的文件类型 response.setContentType("image/jpeg"); //定义缓存区，准备读写文件 int len = 0 ; byte[] buff = new byte[1024]; while ((len = fileInputStream.read(buff)) != -1){ outputStream.write(buff,0,len); outputStream.flush(); } //关流 outputStream.close(); fileInputStream.close(); }catch (Exception e){ e.printStackTrace(); } } }

注意：这里上传的文件的文件名要和这个地方的一样，接收文件的参数的名不能随便定义，要和下面的name的值一致；

新增菜品（业务的实现是重点）

?需求分析：

数据模型：

代码开发：

?创建相关的mapper和service层：

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> { } package com.itheima.reggie.service; import com.baomidou.mybatisplus.extension.service.IService; import com.itheima.reggie.entity.DishFlavor; public interface DishFlavorService extends IService<DishFlavor> { } 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; /** * @author LJM * @create 2022/4/16 */ @Service public class DishFlavorServiceImpl extends ServiceImpl<DishFlavorMapper, DishFlavor> implements DishFlavorService { }

编写controller：

?先获取和返回菜品分类列表; 前端主要的代码;

// 获取菜品分类列表 const getCategoryList = (params) => { return $axios({ url: '/category/list', method: 'get', params }) } if (res.code === 1) { this.dishList = res.data //这里就相当于把所有的category对象的数据赋值给dishList } 这是菜品分类和数据双向绑定的前端代码: 我们返回的是一个集合， </el-form-item> <el-form-item label="菜品分类:" prop="categoryId" > <el-select v-model="ruleForm.categoryId" placeholder="请选择菜品分类" > <el-option v-for="(item,index) in dishList" :key="index" :label="item.name" :value="item.id" /> </el-select> </el-form-item>

在CategoryController书写查询代码，不过这里的返回值和参数接收值可能和自己想的有点不一样。。。这个的返回值和参数值值得多思考一下；这里之所以返回list集合，是因为这个要展示的数据是引用类型的数据集，集合可以存放任意类型的数据；

/** * 根据条件查询分类数据 * @param category * @return */ @GetMapping("/list") //这个接口接收到参数其实就是一个前端传过来的type,这里之所以使用Category这个类来接受前端的数据，是为了以后方便 //因为这个Category类里面包含了type这个数据,返回的数据多了，你自己用啥取啥就行 private R<List<Category>> list(Category category){ //条件构造器 LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper(); //添加查询条件 queryWrapper.eq(category.getType() != null,Category::getType,category.getType()); //添加排序条件使用两个排序条件,如果sort相同的情况下就使用更新时间进行排序 queryWrapper.orderByAsc(Category::getSort).orderByDesc(Category::getUpdateTime); List<Category> list = categoryService.list(queryWrapper); return R.success(list); }

测试的返回数据:

接收页面提交的数据（涉及两张表）

点击保存按钮的时候，把前端的json数据提交到后台，后台接收数据，对数据进行处理；要与两张表打交道，一个是dish一个是dish_flavor表；

先用前端页面向后端发一次请求，看看前端具体的请求是什么，我们好写controller；然后再看前端提交携带的参数是什么，我们好选择用什么类型的数据来接收！！！

看下图：这是前端传过来的具体参数，我们需要什么参数类型来接收这些数据就大概知道了；因为这里传过来的参数比较复杂，所以这里有两种方式进行封装，第一：创建与这些数据对应的实体类（dto），第二使用map来接收；

这里我们选择使用第一种方式；

?前端关键代码：

<el-button type="primary" @click="submitForm('ruleForm')" > 保存 </el-button> let params = {...this.ruleForm} // params.flavors = this.dishFlavors params.status = this.ruleForm ? 1 : 0 params.price *= 100 //存到数据库的时候是以分为单位，所以这里x100 params.categoryId = this.ruleForm.categoryId params.flavors = this.dishFlavors.map(obj => ({ ...obj, value: JSON.stringify(obj.value) })) if (this.actionType == 'add') { delete params.id addDish(params).then(res => { if (res.code === 1) { this.$message.success('菜品添加成功！') if (!st) { this.goBack() } else { .... // 新增接口 const addDish = (params) => { return $axios({ url: '/dish', method: 'post', data: { ...params } }) }

后端代码：

在DishService中新增一个方法：

//新增菜品,同时插入菜品对应的口味数据,需要同时操作两张表:dish dish_flavor void saveWithFlavor(DishDto dishDto);