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

黑马程序员Java项目实战《瑞吉外卖》，轻松掌握springboot + mybatis plus开发核心技术的真java实战项目_哔哩哔哩_bilibilihttps://www.bilibili.com/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文件；

数据表的说明：

序号 表名 说明
1 employee 员工表
2 category 菜品和套餐分类表
3 dish 菜品表
4 setmeal 套餐表
5 setmeal_dish 套餐菜品关系表
6 dish_flavor 菜品口味关系表
7 user 用表(c端)
8 address_book 地址薄表
9 shopping_cart 购物车表
10 orders 订单表
11 orders_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://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.6</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.itheima</groupId><artifactId>reggie_take_out</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.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_outdatasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=trueusername: rootpassword: root
mybatis-plus:configuration:#在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射map-underscore-to-camel-case: true# 把SQL的查询的过程输出到控制台log-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-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* 前面表示的是浏览器访问的请求* 后面表示的是要把请求映射到哪里去*/@Overrideprotected 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 {@Autowiredprivate 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中的用户idrequest.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 {@Overridepublic 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();@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {//对请求和响应进行强转,我们需要的是带http的HttpServletRequest request = (HttpServletRequest) servletRequest;HttpServletResponse response = (HttpServletResponse) servletResponse;//1、获取本次请求的URIString 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());//获得当前登录用户的idLong 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 {@Beanpublic 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*/@PutMappingpublic 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*/@Overrideprotected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {//log.info("扩展消息转换器...");//创建消息转换器对象MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();//设置对象转换器，底层使用Jackson将Java对象转为jsonmessageConverter.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*/@Overridepublic void insertFill(MetaObject metaObject) {metaObject.setValue("createTime", LocalDateTime.now());metaObject.setValue("updateTime",LocalDateTime.now());metaObject.setValue("createUser", new Long(1));  //这里的id是不能直接获取的，所以这里先写死，后面教你怎么动态获取员工idmetaObject.setValue("updateUser",new Long(1));}/*** 更新操作，自动填充* @param metaObject*/@Overridepublic 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 {//用来存储用户idprivate 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存储到本地的threadLocalLong 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*/@PostMappingpublic 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){ //注意这里前端传过来的数据是idscategoryService.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*/@Overridepublic 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*/@DeleteMappingpublic R<String> delete(@RequestParam("ids") Long id){ //注意这里前端传过来的数据是idscategoryService.remove(id);return R.success("分类信息删除成功");}

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

修改分类

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

    /*** 根据id修改分类* @param category* @return*/@PutMappingpublic 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  .jpgString 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-itemlabel="菜品分类:"prop="categoryId"><el-selectv-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来接收；

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

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;  //后面要用的
}

前端关键代码：

<el-buttontype="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.idaddDish(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);

相关的实现：

@Autowired
private DishFlavorService dishFlavorService;
/*** 新增菜品同时保存对应的口味数据* @param dishDto*/
@Override
@Transactional //涉及到对多张表的数据进行操作,需要加事务，需要事务生效,需要在启动类加上事务注解生效
public void saveWithFlavor(DishDto dishDto) {//保存菜品的基本信息到菜品表dish中this.save(dishDto);Long dishId = dishDto.getId();//为了把dishId  set进flavors表中//拿到菜品口味List<DishFlavor> flavors = dishDto.getFlavors();//这里对集合进行赋值 可以使用循环或者是stream流flavors = flavors.stream().map((item) ->{//拿到的这个item就是这个DishFlavor集合item.setDishId(dishId);return item; //记得把数据返回去}).collect(Collectors.toList()); //把返回的集合搜集起来,用来被接收//把菜品口味的数据到口味表 dish_flavor  注意dish_flavor只是封装了name value 并没有封装dishId(从前端传过来的数据发现的,然而数据库又需要这个数据)dishFlavorService.saveBatch(dishDto.getFlavors()); //这个方法是批量保存
}

在启动类开启事务： 加上这个注解就行 @EnableTransactionManagement

controller 层的代码：

package com.itheima.reggie.controller;import com.itheima.reggie.common.R;
import com.itheima.reggie.dto.DishDto;
import com.itheima.reggie.service.DishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
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;/*** @author LJM* @create 2022/4/16*/
@RestController
@RequestMapping("/dish")
@Slf4j
public class DishController {@Autowiredprivate DishService dishService;/*** 新增菜品* @param dishDto* @return*/@PostMappingpublic R<String> save(@RequestBody DishDto dishDto){ //前端提交的是json数据的话，我们在后端就要使用这个注解来接收参数，否则接收到的数据全是nulldishService.saveWithFlavor(dishDto);return R.success("新增菜品成功");}
}

功能测试：记得功能测试！

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

需求分析：

图片下载的请求前面已经写好了，前端也写好了相关的请求，所以第二步的图片下载和展示就不需要我们管了；

代码编写：

controller层的代码:不过这里是有bug的，后面会改善；

/*** 菜品信息分页查询* @param page* @param pageSize* @param name* @return*/
@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){//构造一个分页构造器对象Page<Dish> dishPage = new Page<>(page,pageSize);//构造一个条件构造器LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();//添加过滤条件 注意判断是否为空  使用对name的模糊查询queryWrapper.like(name != null,Dish::getName,name);//添加排序条件  根据更新时间降序排queryWrapper.orderByDesc(Dish::getUpdateTime);//去数据库处理分页 和 查询dishService.page(dishPage,queryWrapper);//因为上面处理的数据没有分类的id,这样直接返回R.success(dishPage)虽然不会报错，但是前端展示的时候这个菜品分类这一数据就为空return R.success(dishPage);
}

功能完善：引入了DishDto

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; //后面用的
}
/*** 菜品信息分页查询* @param page* @param pageSize* @param name* @return*/@GetMapping("/page")public R<Page> page(int page,int pageSize,String name){//构造一个分页构造器对象Page<Dish> dishPage = new Page<>(page,pageSize);Page<DishDto> dishDtoPage = new Page<>(page,pageSize);//上面对dish泛型的数据已经赋值了，这里对DishDto我们可以把之前的数据拷贝过来进行赋值//构造一个条件构造器LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();//添加过滤条件 注意判断是否为空  使用对name的模糊查询queryWrapper.like(name != null,Dish::getName,name);//添加排序条件  根据更新时间降序排queryWrapper.orderByDesc(Dish::getUpdateTime);//去数据库处理分页 和 查询dishService.page(dishPage,queryWrapper);//获取到dish的所有数据 records属性是分页插件中表示分页中所有的数据的一个集合List<Dish> records = dishPage.getRecords();List<DishDto> list = records.stream().map((item) ->{//对实体类DishDto进行categoryName的设值DishDto dishDto = new DishDto();//这里的item相当于Dish  对dishDto进行除categoryName属性的拷贝BeanUtils.copyProperties(item,dishDto);//获取分类的idLong categoryId = item.getCategoryId();//通过分类id获取分类对象Category category = categoryService.getById(categoryId);if ( category != null){//设置实体类DishDto的categoryName属性值String categoryName = category.getName();dishDto.setCategoryName(categoryName);}return dishDto;}).collect(Collectors.toList());//对象拷贝  使用框架自带的工具类，第三个参数是不拷贝到属性BeanUtils.copyProperties(dishPage,dishDtoPage,"records");dishDtoPage.setRecords(list);//因为上面处理的数据没有分类的id,这样直接返回R.success(dishPage)虽然不会报错，但是前端展示的时候这个菜品分类这一数据就为空//所以进行了上面的一系列操作return R.success(dishDtoPage);}

records的值： protected List<T> records;

功能测试：

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

需求分析：

代码开发：

第一次交互的后端代码已经完成了；菜品分类的信息前面做新增菜品的时候就已经完成了，这里前端发一个相关接口的请求就行；

第三次交互，图片的下载前面也已经写了，所以前端直接发生请求就行；

菜品信息的回显：

在service添加自己要实现的方法：

//根据id来查询菜品信息和对应的口味信息
DishDto getByIdWithFlavor(Long id);

方法的 实现：

 @Autowiredprivate DishFlavorService dishFlavorService;
/*** 根据id来查询菜品信息和对应的口味信息* @param id* @return*/
@Override
public DishDto getByIdWithFlavor(Long id) {//查询菜品的基本信息  从dish表查询Dish dish = this.getById(id);//查询当前菜品对应的口味信息,从dish_flavor查询  条件查询LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(DishFlavor::getDishId,dish.getId());List<DishFlavor> flavors = dishFlavorService.list(queryWrapper);//然后把查询出来的flavors数据set进行 DishDto对象DishDto dishDto = new DishDto();//把dish表中的基本信息copy到dishDto对象，因为才创建的dishDto里面的属性全是空BeanUtils.copyProperties(dish,dishDto);dishDto.setFlavors(flavors);return dishDto;
}

controller 层的编写：

/*** 根据id来查询菜品信息和对应的口味信息* @param id* @return*/
@GetMapping("/{id}")
public R<DishDto> get(@PathVariable Long id){  //这里返回什么数据是要看前端需要什么数据,不能直接想当然的就返回Dish对象DishDto dishDto = dishService.getByIdWithFlavor(id);return R.success(dishDto);
}

保存修改：(重点)

保存修改设计两张表的数据的修改：

DishService中添加自己实现的方法：

//更新菜品信息同时还更新对应的口味信息
void updateWithFlavor(DishDto dishDto);

相关的实现：

   @Override@Transactionalpublic void updateWithFlavor(DishDto dishDto) {//更新dish表的基本信息  因为这里的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();//下面这段流的代码我注释,然后测试，发现一次是报dishId没有默认值(先测)，两次可以得到结果(后测，重新编译过，清除缓存过),相隔半个小时//因为这里拿到的flavorsz只有name和value(这是在设计数据封装的问题),不过debug测试的时候发现有时候可以拿到全部数据,有时候又不可以...  所以还是加上吧。。。。。flavors = flavors.stream().map((item) -> {item.setDishId(dishDto.getId());return item;}).collect(Collectors.toList());dishFlavorService.saveBatch(flavors);}

小插曲：

stream流没有被注释的时候，dishDto里面所有的属性都可以获取的；

注释掉的话：debug发现传进来的dishDto中的dishId为null以及id全为null；那么是不是意味着前面的使用id查询的语句也执行失败？

需要自己单独实现的功能

见我的另一篇博客：(8条消息) 瑞吉外卖项目剩余功能补充_未来很长，别只看眼前的博客-CSDN博客

九、套餐管理

需求分析:

数据模型：

 

代码开发：

准备工作：

创建mapper：

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

创建service：

package com.itheima.reggie.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.SetmealDish;/*** @author LJM* @create 2022/4/17*/
public interface SetmealDishService extends IService<SetmealDish> {
}
package com.itheima.reggie.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.SetmealDish;
import com.itheima.reggie.mapper.SetmealDishMapper;
import com.itheima.reggie.service.SetmealDishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;/*** @author LJM* @create 2022/4/17*/
@Service
@Slf4j
public class SetmealDishServiceImpl extends ServiceImpl<SetmealDishMapper, SetmealDish> implements SetmealDishService {
}

添加菜品数据回显

controller层代码：

第一个交互前面写了；分类管理通过type的值来控制在前端展示的是 菜品分类(type=1) 或者是 套餐分类（type=2）

第二个交互前面也写了，在categorycontroller里面的list方法；

第四和第五前面也写了；

第三个交互：前端请求的地址；

在DishController书写代码：

    /*** 根据条件查询对应的菜品数据* @param dish* @return*/@GetMapping("/list")public R<List<Dish>> list(Dish dish){ //会自动映射的//这里可以传categoryId,但是为了代码通用性更强,这里直接使用dish类来接受（因为dish里面是有categoryId的）,以后传dish的其他属性这里也可以使用//构造查询条件LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(dish.getCategoryId() != null ,Dish::getCategoryId,dish.getCategoryId());//添加条件，查询状态为1（起售状态）的菜品queryWrapper.eq(Dish::getStatus,1);//添加排序条件queryWrapper.orderByAsc(Dish::getSort).orderByDesc(Dish::getUpdateTime);List<Dish> list = dishService.list(queryWrapper);return R.success(list);}

控制台输出的sql语句：

SELECT id,name,category_id,price,code,image,description,status,sort,create_time,update_time,create_user,update_user,is_deleted FROM dish WHERE (category_id = ? AND status = ?) ORDER BY sort ASC,update_time DESC

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

实现要求：点击保存按钮，发送ajax请求,将套餐相关的数据以json形式提交到服务端；

前端提交请求：

前端携带的参数：重要

根据前端传过来的数据我们可以在后端确定我们需要在后端使用什么来接受前端的参数；

编写controller：上面的dishList，我们数据库并不需要这个数据，所以接收数据的实体类没有dishList这个属性也没有关系，前端传过来的数据都是自动映射到接收数据的实体类的属性上的，没有对应起来就不会映射。

涉及两张表的操作：套餐表和菜品表；

    /*** 新增套餐* 涉及两张表的操作：套餐表和菜品表；* @param setmealDto* @return*/@PostMappingpublic R<String> save(@RequestBody SetmealDto setmealDto){setmealService.saveWithDish(setmealDto);return R.success("新增套餐成功");}

SetmealService中添加自定义的方法：

/*** 新增套餐，同时需要保存套餐和菜品的关联关系* @param setmealDto*/
void saveWithDish(SetmealDto setmealDto);
@Autowired
SetmealDishService setmealDishService;/*** 新增套餐，同时需要保存套餐和菜品的关联关系* @param setmealDto*/
@Transactional
@Override
public void saveWithDish(SetmealDto setmealDto) {//保存套餐的基本信息，操作setmeal,执行insertthis.save(setmealDto);log.info(setmealDto.toString()); //查看一下这个套餐的基本信息是什么//保存套餐和菜品的关联信息，操作setmeal_dish ,执行insert操作List<SetmealDish> setmealDishes = setmealDto.getSetmealDishes();//注意上面拿到的setmealDishes是没有setmeanlId这个的值的，通过debug可以发现setmealDishes.stream().map((item)->{item.setSetmealId(setmealDto.getId());return item; //这里返回的就是集合的泛型}).collect(Collectors.toList());setmealDishService.saveBatch(setmealDishes); //批量保存
}

功能测试，自己测试；

套餐信息分页查询

需求分析：

代码开发：

前端发起的请求以及携带的参数：

查询分页：

controller层代码编写：

/*** 套餐分页查询* @param page* @param pageSize* @param name* @return*/
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name){//分页构造器对象Page<Setmeal> pageInfo = new Page<>(page,pageSize);//构造条件查询对象LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();//添加查询条件，根据name进行like模糊查询queryWrapper.like(name != null,Setmeal::getName,name);//添加排序条件，根据更新时间降序排列queryWrapper.orderByDesc(Setmeal::getUpdateTime);setmealService.page(pageInfo,queryWrapper);/*** 注意如果这里直接返回R.success(pageInfo)，* 虽然不会报错但是分页的数据的套餐分类的名字是显示不了的；* 因为这个分页的泛型是Setmeal,Setmeal只封装了f分类的Id categoryId，没有分类的名称 name* 所以又需要进行name的获取和设值*/return R.success(pageInfo);
}

bug修复：

/*** 套餐分页查询* @param page* @param pageSize* @param name* @return*/
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name){//分页构造器对象Page<Setmeal> pageInfo = new Page<>(page,pageSize);Page<SetmealDto> dtoPage = new Page<>(page,pageSize);//构造条件查询对象LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();//添加查询条件，根据name进行like模糊查询queryWrapper.like(name != null,Setmeal::getName,name);//添加排序条件，根据更新时间降序排列queryWrapper.orderByDesc(Setmeal::getUpdateTime);setmealService.page(pageInfo,queryWrapper);//对象的拷贝  注意这里要把分页数据的全集合records给忽略掉BeanUtils.copyProperties(pageInfo,dtoPage,"records");List<Setmeal> records = pageInfo.getRecords();//对records对象进行处理然后封装好赋值给listList<SetmealDto> list = records.stream().map((item)->{SetmealDto setmealDto = new SetmealDto();//对setmealDto进行除categoryName的属性进行拷贝(因为item里面没有categoryName)BeanUtils.copyProperties(item,setmealDto);//获取分类id  通过分类id获取分类对象  然后再通过分类对象获取分类名Long categoryId = item.getCategoryId();//根据分类id获取分类对象  判断是否为nullCategory category = categoryService.getById(categoryId);if (category != null){String categoryName = category.getName();setmealDto.setCategoryName(categoryName);}return setmealDto;}).collect(Collectors.toList());dtoPage.setRecords(list);return R.success(dtoPage);
}

删除套餐

代码开发：

单个套餐删除前端发的请求和携带的参数：

套餐批量删除前端发的请求和携带的参数：

controller层开发

在SetmealService中添加自定义的方法：

/*** 删除套餐，同时需要删除套餐和菜品的关联数据* @param ids*/
void removeWithDish(List<Long> ids);

实现该方法：

/*** 删除套餐，同时需要删除套餐和菜品的关联数据* @param ids*/
@Override
@Transactional
public void removeWithDish(List<Long> ids) {//sql语句应该是这样的:select count(*) setmeal where id in () and status = 1;//查询套餐的状态，看是否可以删除LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper();queryWrapper.in(Setmeal::getId,ids);queryWrapper.eq(Setmeal::getStatus,1);int count = this.count(queryWrapper);//如果不能删除，抛出一个业务异常if (count > 0){throw new CustomException("套餐正在售卖中,不能删除");}//如果可以删除，先删除套餐表中的数据--setmeal this.removeByIds(ids);//删除关系表中的数据--setmeal_dish//delete from setmeal_dish where setmeal_id in (1,2,3)LambdaQueryWrapper<SetmealDish> lambdaQueryWrapper = new LambdaQueryWrapper();lambdaQueryWrapper.in(SetmealDish::getSetmealId,ids);setmealDishService.remove(lambdaQueryWrapper);
}

功能测试；

需要自己单独实现的功能

下面功能的具体代码在我的另一篇博客：(8条消息) 瑞吉外卖项目剩余功能补充_未来很长，别只看眼前的博客-CSDN博客

套餐管理的启售，停售

套餐管理的修改

后台订单展示和查询

移动端开发

见另一篇博客：瑞吉外卖移动端开发 笔记 基于springBoot+mybatis-plus_未来很长，别只看眼前的博客-CSDN博客

瑞吉外卖项目 基于spring Boot+mybatis-plus开发 超详细笔记，有源码链接相关推荐

  1. springboot毕设项目基于Spring Boot的智慧天气管理系统84z99（java+VUE+Mybatis+Maven+Mysql）

    springboot毕设项目基于Spring Boot的智慧天气管理系统84z99(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8. ...

  2. 黑马瑞吉外卖项目开发笔记

    目录 软件开发整体介绍 开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型展示 技术选型 功能架构 角色 开发环境搭建 数据库环境搭建 Maven环境搭建 1.直接创建maven项目( ...

  3. 瑞吉外卖项目笔记+踩坑1——基础功能

     导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城 目录 1 ...

  4. 瑞吉外卖项目剩余功能补充

    目录 菜品启售和停售 菜品批量启售和批量停售 菜品的批量删除 菜品删除逻辑优化 套餐管理的启售,停售 套餐管理的修改 后台按条件查看和展示客户订单 手机端减少购物车中的菜品或者套餐数量(前端展示有一点 ...

  5. 瑞吉外卖项目——瑞吉外卖

    软件开发整体介绍 软件开发流程 需求分析:产品原型.需求规格说明书 设计:产品文档.UI界面设计.概要设计.详细设计.数据库设计 编码:项目代码.单元测试 测试:测试用例.测试报告 上线运维:软件环境 ...

  6. 【SpringBoot项目实战+思维导图】瑞吉外卖①(项目介绍、开发环境搭建、后台登陆/退出功能开发)

    文章目录 软件开发整体介绍 软件开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型 技术选型 功能架构 角色 开发环境搭建 数据库环境搭建 创建数据库 数据库表导入 数据库表介绍 Ma ...

  7. 瑞吉外卖项目详细分析笔记及所有功能补充代码

    目录 项目刨析简介 技术栈 项目介绍 项目源码 一.架构搭建 1.初始化项目结构 2.数据库表结构设计 3.项目基本配置信息添加 公共字段的自动填充 全局异常处理类 返回结果封装的实体类 二.管理端业 ...

  8. 瑞吉外卖项目（一）软件开发流程设计及环境搭建

    第一章 软件开发整体介绍 软件开发流程 软件开发流程 需求分析:产品原型.需求规格说明书 设计:产品文档,ui界面设计,概要设计,详细设计,数据库设计 编码:项目代码,单元测试 测试:测试用例,测试报 ...

  9. 瑞吉外卖项目day01

    一.软件开发整体介绍 1.1 软件开发流程 需求分析:产品原型.需求规格说明书 设计:产品文档.UI界面设计.概要设计.详细设计.数据库设计 编码:项目代码,是单元测试 上线运维:软件环境安装.配置 ...

最新文章

  1. ORA-07445导致实例崩溃的解决【The solution of instance crush by ORA-07445】
  2. cookie的相关知识
  3. tensorflow1中如何设置GPU的使用
  4. iOS MMDrawerController源码解读(一)
  5. JBI与SCA的区别
  6. 行、重复-SAP HANA 集合操作 UNION/Union all/INTERSECT/EXCEPT (SAP HANA Set Operations)-by小雨...
  7. call和apply；this；闭包
  8. js将数字转成大写中文
  9. PHP7.1安装memcaehd扩展
  10. EasyRecovery如何恢复javascript文件
  11. 编码基本功：给刚刚学习编程的朋友的建议
  12. tcs标准编写软件_tcs2010下载-tcs2010(中国标准编写模板) 免费版 - 河东下载站
  13. wpf制作旋转小方块
  14. QT报错： ‘C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\BIN\\x86_amd64\\link.exe‘ failed
  15. 计算机处理器i3 i5,realme Book笔记本高清渲染图曝光 配置上搭载11代酷睿i3/i5处理器...
  16. dds文件怎么在linux查看,OpenDDS学习笔记（4）：OpenDDS在Linux环境编译
  17. 历年计算机基础试题和答案,自学考试00018计算机应用基础历年试题与答案
  18. 管理之黄金圈理论：让自己更值钱的5个能力
  19. 【Optimizaition/x86】Intel CPU的CPUID指令获取的C实现
  20. softer nms论文阅读Bounding Box Regression with Uncertainty for Accurate Object Detection

热门文章

  1. 面试常问问题: 剖析ArrayList源码还不会? 看这篇就够啦 !
  2. 128 黙齎 李貴 曷若親征
  3. uniapp中登录注册页面以视频为背景
  4. HP DeskJet 2131 喷墨一体打印机打印设置教程
  5. boot版本是什么 cent os_Cent OS 7系统目录结构
  6. vue2 卸载 uninstall vue-meta 报错 up to date, audited 1389 packages in 10s 96 packages are looking for
  7. 微信网址遮罩引导法升级版，微信自动跳转默认浏览器打开HTML
  8. 爱奇艺密码加密js分析
  9. Spark项目实战:购物网站评价标签生成(非常详细的Spark算子操作)
  10. 每天温习一个JS方法之Array.flat方法 第六天