vue提交List类型数据

最新推荐文章于 2024-10-22 09:49:36 发布

浔者

最新推荐文章于 2024-10-22 09:49:36 发布

阅读量6.4k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_38454165/article/details/106527658

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue前端应用中提交List类型的数据到后台。主要涉及在main.js中的配置，创建提交组件upList.vue，以及后台如何接收并处理这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考自https://blog.youkuaiyun.com/weixin_41601114/article/details/105118562

前端vue:

mian.js中添加

//设置put请求头，方便提交list类型数据等
axios.defaults.headers.put['Content-Type'] = "application/json";

提交组件，upList.vue

<template>
    <el-button type="primary" @click="putList">提交</el-button>
</template>
<script>

export default {
    name:'UpList',
    data(){
        return{
        // 数组数据
            jsonList : [
                {
                    paramCode:'abc' ,
                    paramValue:'abcValue'
                },
                {
                    paramCode:'abc1',
                    paramValue:'abcValue1'
                },
                {
                    paramCode:'abc2',
                    paramValue:'abcValue2'
                },
            ]
        }
    },
    methods:{
        putList(){
            // jsonList 就是前端普通的实体类集合数据
            this.$axios.put("/upList", this.jsonList)
                .then(response => {
                    const data = response.data;
                    
                    if (data.code === 200) {
                        alert("提交成功")
                        
                    }else{
                        console.log(data.msg)
                        return;
                    }
                   
                })
                .catch(failResponse => {})
        }
    }
    
}
</script>

list中数据对象：

package com.example.demo.entity;

import lombok.Data;

@Data
public class ListParam {
	
	private String paramCode;
	private String paramValue;
}

返回结果封装进对象Result.java

package com.example.demo.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/*
 * 同意响应结果封装
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
	//响应码
	private int code;
	//提示信息
	private String msg;
	//响应结果对象
	private Object obj;
	
	public Result(int code,String msg){
		this(code,msg,null);
	}
}

controller：

package com.example.demo.controller;

import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.ListParam;
import com.example.demo.entity.MyUser;
import com.example.demo.entity.Result;

@RestController
@ResponseBody
@CrossOrigin
@RequestMapping("/api")
public class UploadController {
	
	@PostMapping("/upload")
	public Result putong(@RequestBody MyUser myUser) {
		System.out.println(myUser);
		return new Result(200,"成功");
	}
	@PutMapping("/upList")
	public Result upList(@RequestBody List<ListParam> list) {
		System.out.println(list);
		return new Result(200,"成功");
	}
}

打印数据：