Java&Vue 借助json传递数据

Urf_read

已于 2024-04-24 09:04:57 修改

阅读量805

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前后端&数据库交互通信文章标签： java vue.js json

于 2024-04-20 10:35:20 首次发布

本文链接：https://blog.csdn.net/m0_69886881/article/details/137992803

前后端&数据库交互通信专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用Vue.js中的axios库从前端发送JSON数据到SpringBoot后端API，并展示了如何在后端使用SpringMVC处理这些请求，包括接收和处理JSON对象。

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

由前端向后端发送一个json键值对

<template>
  <div>
    <button @click="sendRequest">发送请求</button>
  </div>
</template>

<script setup>
import axios from 'axios';

const sendRequest = () => {
  const jsonData = {
    key1: 'value1',
    key2: 'value2',
  };

  const jsonString = JSON.stringify(jsonData);

  axios.post('http://localhost:8080/test', jsonString, {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    console.log('成功发送请求', response);
    // 处理后端返回的响应
  })
  .catch(error => {
    console.error('发送请求失败', error);
    // 处理请求失败情况
  });
};
</script>

package com.example.myjson;

import org.springframework.web.bind.annotation.*;

@CrossOrigin
@RestController
public class JSONController {

    @PostMapping("/test")
    public String handleJSONRequest(@RequestBody String jsonString) {
        // 这里可以对接收到的JSON字符串进行处理
        System.out.println("接收到的JSON字符串：" + jsonString);

        // 返回一个简单的响应
        return "成功接收到JSON请求";
    }
}

发送一个由前端json包装过的类对象

<template>
  <div>
    <button @click="sendTaskInfo">发送TaskInfo</button>
  </div>
</template>

<script setup>
import axios from 'axios';

const sendTaskInfo = () => {
  // 创建 TaskInfo 对象
  const taskInfo = {
    id: 1,
    task: '完成项目任务',
    startTime: new Date(),
    endTime: new Date(),
    elapsedTime: 3600, // 假设任务耗时为3600秒
  };

  // 将 TaskInfo 对象转换为 JSON 字符串
  const jsonTaskInfo = JSON.stringify(taskInfo);

  // 发送 POST 请求到后端
  axios.post('http://localhost:8080/test', jsonTaskInfo, {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    console.log('成功发送 TaskInfo', response);
    // 处理后端返回的响应
  })
  .catch(error => {
    console.error('发送 TaskInfo 失败', error);
    // 处理请求失败情况
  });
};
</script>

public class TaskInfo {
    private int id;
    private String task;
    private Date startTime;
    private Date endTime;
    private long elapsedTime;
}

@PostMapping("/test")
    public ResponseEntity<String> handleJSONRequest(@RequestBody TaskInfo taskInfoJson) {
        // 这里 taskInfoJson 就是前端发送过来的 JSON 转换后的 TaskInfo 对象
        System.out.println("接收到的 TaskInfo 对象：" + taskInfoJson);

        // 在这里可以对 TaskInfo 对象进行进一步处理
        // ...

        // 返回一个简单的响应
        return new ResponseEntity<>("成功接收到 TaskInfo 对象", HttpStatus.OK);
    }