Vue+JavaSpingBoot笔记(1)

一、前后端通信参数问题

1.集合【字典】类型

Vue前端传递参数:

export default {
 methods: {
test(){
  // 将 filteredData 中的每一行值放入 newData 对象数组中 
  const newData = filteredData.map(item => ({
    key1: item.Value1,
    key2: item.Value2,
    key3: "测试"
  }));
  request({
    url: '/url/ag',
    method: 'post',
    data: newData
  }).then(res => {
    if (res.code == 200) {
      this.$modal.msgSuccess('成功！')
      this.getList()
     }
   })
  }
 }
}

java后端接收参数
    controller:

    @PostMapping("/ag") // 处理Post请求
    public ResultBean again(@RequestBody List> requestBody){
            service.方法(requestBody);
    }

  service:

 List> maplist 直接遍历使用

  2.字典+集合类型

Vue前端:

export default {
 methods: {
test(){
  // 字典数据
      const dictData = {
        To:   值1,
        Key1: 'A',
        Key2: 值2,
      };
  // 列表数据示例  
  const listData = [];
  request({
    url: '/url/ag',
    method: 'post',
    data: {  
      dictData: dictData,  
      listData: listData    
    }  
  }).then(res => {
    if (res.code == 200) {
      this.$modal.msgSuccess('成功！')
      this.getList()
     }
   })
  }
 }
}

java后端
    controller: 
   

@PostMapping("/ag") // 处理POST请求
    public ResultBean move(@RequestBody Map requestBody) {
            Map dictData = (Map) requestBody.get("dictData");
            List listData = (List) requestBody.get("listData");
            Sservice.方法(dictData,listData);
    }

service:

 Map map, List list 直接遍历使用