Java、 Vue 前后端数据封装传递具体实现方法，如何将JavaScript对象转换为具体的实体类对象 - 若依框架模板、字符串数组[1,2,... ] 的后端转化 String[]

心已赠人 2024-03-17 13:33 6阅读 0赞

## 一、前端 ##

就笔者目前来看，前端无论是使用怎么的方法封装数据的，最好是使用 formData 类型的对象存储数据，而且内部所有的key 键对应的值，最好是字符串类型的，将 JavaScript 对象的数据转变为字符串格式，即 Json 字符串格式，前端方法有 `JSON.stringify()`，`可以将 JavaScript 对象的数据转变为字符串格式`， JavaScript 对象一般为花括号。

JavaScript 对象例子：

obj = {
        
    	name: '测试名称',
    	sex: '男',
    	age: 23
    }

### 1、前端具体实现模板例子如下： ###

以 `Vue` 项目为例：

`Test.js` 文件（api 接口文件）

// 文章新增或修改路由
    import request from '@/utils/request'
    
    export function testapi(data) {
        
      
      
      return request({
        
        url: '/test/accept_data',
        method: 'post',
        data: data
      })
    }

--------------------

`Test.Vue` （组件）

Tips： 个人建议

有一点要注意如果出现 字符串数组或数字数组类型的类型，Java后端可以用 `String[]` 或 `Integer[]` 进行转换

<template>
    省略内容
    ...
    
    </template>
    <script>
    import {
        testapi } from "@/api/test";  // 导入 api 接口 Test.js
    
    export default {
        
    省略内容
    ...
    
      methods: {
        
      
      testsubmit(){
        
    	let data = {
        
    		name: '测试名称',
    		sex: '男',
    		age: 23
    		choice: [1,2,3,4,5,6]
    	}
    	let formData = new FormData()
    	formData.append('formdata', JSON.stringify([data]))
    	// api 接口调用
    	testapi(formData).then(response=>{
        
    	console.log("------------ result: ", response)
    	})
    	}
    	}
    }
    </script>

--------------------

## 二、Java 后端 ##

`TestEntity.java`:

public class TestEntity{
        
    
        private String name;
        private String sex;
        private String age;
        private String[] choice;
    }

`Java`：

import com.alibaba.fastjson2.JSON;
    import java.util.List;
    import com.ruoyi.common.core.domain.AjaxResult;
    
    @RestController
    @RequestMapping("/test")
    public class TestController
    {
        
    
     @PostMapping("/accept_data")
     public AjaxResult uploadData(@RequestParam("formdata") String formdata) throws Exception
        {
        
        	try{
        
        	    List<TestEntity> to_Obj_1 = JSON.parseArray(formdata, TestEntity.class);
        	    
        	    TestEntity to_Obj_2  = JSON.parseObject(formdata, TestEntity .class);
    
        	    
        	    AjaxResult ajax = AjaxResult.success();
        	    ajax.put("result", success);
        	    return ajax;
        	}
    		catch (Exception e)
            {
        
                return AjaxResult.error(e.getMessage());
            }
    	}
    }

--------------------

## 参考链接 ##

[1. Java - 对象数组 Object 字符串数组 A互转，实现 Json 格式存储][1. Java - _ Object _ A_ Json]

[1. Java - _ Object _ A_ Json]: https://blog.csdn.net/qq_42701659/article/details/130563185