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<Map<String,Object>> requestBody){
            service.方法(requestBody);
    }

  service:

 List<Map<String,Object>> 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<String, Object> requestBody) {
            Map<String, Object> dictData = (Map<String, Object>) requestBody.get("dictData");
            List<String> listData = (List<String>) requestBody.get("listData");
            Sservice.方法(dictData,listData);
    }

service:

 Map<String,Object> map, List<String> list 直接遍历使用