项目一：总结、大学最后的一门课设完毕，进行总结，出现了好多bug,技术链：vue-cli+element+springboot+springDataJPA+mysql

前言

bug1: vue 扩展运算符（…）

bug 描述:前端使用 扩展运算符
前端有扩展运算符 {…this.newUser} 后端 有 @RequestBody 出错
前端有扩展运算符 {…this.newUser} 后端 无@RequestBody 正确

注意2: 前端遍历

1、前端在表格中对后台返回来的数据遍历时，不在是普通的循环遍历了，因为是使用了element-UI，因此使用的是组件。
2、首先要说明一下，pojo 是在后台定义的封住类，后台往前台传过来的数据是json数据，这里的Key值与pojo的Javabean的字段名一定不相同。因为在进行遍历时，一定要先前台先进行打印，在前台打印出的key值，在放到页面进行遍历。
上图：

前台打印的数据一般开头为小写，所以在前台遍历时，以前台数据为准

bug2: 前端传后端 日期格式化

bug 描述: 前台使用的 element-ui组件，日期选择器，这个组件打出来的数据是这样的：
Tue Jul 30 2019 00:00:00 GMT+0800 (中国标准时间)
这样的数据传到后台肯定是会报错的。
找了很多资料，就算在前台格式化成 yyyy-MM-dd 这种类型，往后传时也是String类型的。所以 String转换成 Date类型只能在后端进行配置。
方法1：
@DateTimeFormat(pattern = “yyyy-MM-dd”)
这个注解：在后台 将string类型 按注解设置好的时间格式 转换成 Date 类型 进行传参。
方法2： 对组件进行设置属性（有问题），不可行

<el-date-picker
  v-model="value1"
  type="date"
  placeholder="选择日期">
</el-date-picker>

修改后

<el-date-picker
  v-model="value1"
 
  //将这个组件生成的时间  在前端 进行格式化 格式化成我们想要的数据模型
  value-format="yyyy-MM-dd " 
  type="date"
  placeholder="选择日期">
</el-date-picker>

这样仅改变了传到后端的字符串的格式，但是其本质还是字符串。
方法3：
我的后台项目使用SpringBoot搭建的，我在application.yml文件中添加如下配置：

# 配置数据源
spring:
  datasource:
    name: pet-hospital
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/pet_hospital?serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 1741248769
  # Vue前端传来的日期为String类型，下面的设置可以自动将其转换为Date类型，不需要手动转换
  mvc:
    date-format: yyyy-MM-dd HH:mm:ss
  # 以下设置可以将Date类型自动转换为如下格式的日期，指定Jackson格式化日期使用的时区，Jackson默认使用UTC
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

bug2: 后端传前端 日期格式化

bug 描述:
MySQL 数据库字段 类型 datetime，pojp类型是Date类型，传到前端的数据是
“2019-07-24T14:20:34.000+0000”
需要对它进行格式化，
找了很多博客，自己在这里总结几点方法吧。
方法1： 比较直接
直接在后台放注解 @JsonFormat(pattern = “yyyy-MM-dd”, timezone = “GMT+8”)
这个注解：后台的时间数据按 注解设置好的时间格式 直接返回到前台。

对应的注解是 @DateTimeFormat(pattern = “yyyy-MM-dd”)
这个注解：在后台 接收前台的时间格式时 按注解设置好的时间格式 进行接收。

方法2： 在前台进行格式化。使用vue过滤器

1. 在src 目录下，新建filters文件夹，继续新建filter.js文件。直接上代码：
   
2. 在main.js中注册过滤器。
   
3. 使用过滤器
   
4. 效果展示，中间那个值数据库没有放值。
   

bug3: @ResquestBody 注解 使用总结

bug 描述:

bug4: 在添加的表单中，清除原有数据

bug描述

解决方法1：
使用原始的 js 方法。进行操纵。

document.getElementById("el-form").reset();

解决方法2：这个方法 在我这儿 不好用。难受

<el-form 
	id="el-form" 
	ref="refname" 
	:model="newUser" 
	label-width="80px">
</el-form>

this.$refs['refname'].resetField()

bug5： 删除数据时，进行确认

this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request({
      url: `/staff/delete`,
      method: 'delete',
      params: { id: row.sectionNo }
    }).then(res => {
      this.$message('删除成功')
      this.getUserMessage()
    })
  }).catch(() => {
    return
  });
```