父组件向子组件传递数据时，子组件不正确的接收

<!-- 父组件-->
<!-- 这个是表格内某一行的编辑按钮-->
<el-button size="mini" @click="handleEdit(props.row)">编辑</el-button>

<!-- 这个是子组件的弹窗-->
<!-- 我想实现的效果是，在父组件内某一书籍点击修改后，打开弹窗，书籍信息回显在弹窗.如下图-->
<edit-dialog :send="sendInfo" @reupdate="reupdatefu" ref="getValue"></edit-dialog>

export default {
    data() {
        tableData: [], // 这个数据是用于接收AJAX请求获取的对应页所有书籍
        sendInfo: {}   // 这个数据是用于传递父子组件通信
        },
    // 修改书籍信息
    handleEdit (row) {
      this.sendInfo = {   // 将表格这一行的数据传递给弹窗
        tableDataItem: row  // 这里有个隐患，下面会提到
      }
      this.$nextTick (() => {        
      // 这里需要延迟回调，大概原因是vue更新DOM是异步的，
      // 上面数据传递赋值后，DOM还未更新，只有这样获取到DOM更新后的弹窗
        this.$refs.getValue.getValue()
      })
    },
}

<!-- 子组件-->

export default {
  methods: {
    getValue() {
      this.dialogFormVisible = true
      const data = this.send?.tableDataItem
      // 在这里我犯了很离谱的错误
      // this.from = data 
      // 是不是看起来没什么错误，如果你发现了证明你基础很扎实
      // 这样直接赋值会导致，在子组件直接操纵父组件对应行的对象
      // 原因是，在上面父组件传递的数据本身就是表格某一行的对象，
      // 如果直接赋值，就相当于将地址交给了form
      // 至于为什么我会这么写纯粹是一开始想偷懒，当然还有其他更好的方法避免这种事情发送
      this.form = {
        workId: data?.workId,
        workImg: data?.workImg,
        workName: data?.workName,
        workAuthor: data?.workAuthor,
        workAuthorImg: data?.workAuthorImg,
        workType: data?.workType || '',
        workChannel: data?.workChannel || '',
        workStatus: data?.workStatus || '',
        workUpdateChapter: data?.workUpdateChapter,
        workTotalWordCount: data?.workTotalWordCount,
        workTotalRecommend: data?.workTotalRecommend,
        workUpdateTime: data?.workUpdateTime,
        workIntroduce: data?.workIntroduce
      }
    }
  }
}

前端单个与批量操作时的数据不统一，后端接收异常

众所周知，写代码能偷懒就偷懒，准确的说应该是要简洁，增强复用性。所以在删除书籍章节时，我选择批量与当个操作共用一个接口。（当然增删改查都可以，看具体需求）这只是一个小问题，但开发过程中往往都是小问题出现错误，所以一定要注意。

<!-- 这表格内某一行的删除按钮-->
<!-- 一开始我并没有中括号，这样会导致单个操作时的数据类型是字符串，批量操作是字符串数组
<el-button size="mini" type="danger" @click="handleDelete([scope.row.workItemId])">删除</el-button>


export default {
  methods: {
    // 得到勾选数据,实现删除
    deleteSelection() {
      let arr = []
      // 这个是多选框所选中的行，取出可以唯一标识这一行的值用于删除
      this.$refs.multipleTable.selection.forEach(element => {
        // console.log(element.workItemId)
        arr= [...arr,element.workItemId]
      });
      // 调用删除逻辑
      // 大家应该都知道这里是个数组，如下图
      this.handleDelete(arr)
    },
    // 章节删除
    async handleDelete(row) {
      console.log(row)
      await axios({
        url: '/api/DeleteBookItem',
        method: 'DELETE',
        data: row
          })
    },
  }
}

// 我的后端是这样接收的
@DeleteMapping("DeleteBookItem")
public Result deleteBookItem(@RequestBody String[] workItemId){
    bookItemService.deleteBookItem(workItemId);
    return Result.succeed();
 }

接收POST请求的数据

POST请求体默认是“application/json;charset=utf-8”
请求体的数据会以JSON字符串的格式的形式传递给后端

{
    "name": "zhangsan",
    "age": 18,
    "phone": [110,120,119]
}

// 可以使用Beaan对象获取
@PostMapping("/getJson")
public String getJson(@RequestBody User str){
  
// 也可以通过双列集合获取
@PostMapping("/getJson2")
public String getJson2(@RequestBody Map str){}

'Content-Type: application/x-www-form-urlencoded' 请求体中的数据会以普通表单形式（键值对）发送到后端

name: "zhangsan",
age: 18

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: url,
    data: Qs.stringify(
                       "name": "zhangsan",
                        "age": 18)

// 后端就当它是GET请求里的params参数，一接一个准

'Content-Type: multipart/form-data' 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件

const formData = new FormData();
formData.append('file', file);

axios({
    url: '/upload'
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: formData
})

// 二进制格式上传嘎嘎快

初步完善小说管理系统困难总结

父组件向子组件传递数据时，子组件不正确的接收

前端单个与批量操作时的数据不统一，后端接收异常

接收POST请求的数据