如何实现SpringBoot后端向Vue.js前端传输JSON数据？

一、后端（SpringBoot）实现步骤 #

• 读取服务器JSON文件：用SpringBoot默认集成的Jackson ObjectMapper，把服务器上的JSON文件解析成Java对象（比如Map或自定义实体类），方便后续筛选数据。
• 编写REST接口：创建GET接口，可接收前端传的筛选参数（比如指定字段、过滤条件），从解析后的全量数据里提取需要的部分，以JSON格式返回给前端。
• 处理跨域问题：如果前后端域名不同，在Controller类或方法上加@CrossOrigin注解，或者配置全局跨域规则，避免浏览器拦截请求。

后端示例代码 #

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@RestController
@CrossOrigin
public class JsonDataController {

    @GetMapping("/api/partial-data")
    public ResponseEntity<Map<String, Object>> getPartialData(@RequestParam(required = false) String targetField) {
        // 替换为服务器上JSON文件的实际路径
        File jsonFile = new File("/opt/data/user-data.json");
        ObjectMapper objectMapper = new ObjectMapper();
        Map<String, Object> partialData = new HashMap<>();

        try {
            Map<String, Object> fullData = objectMapper.readValue(jsonFile, new TypeReference<>() {});
            
            if (targetField != null && fullData.containsKey(targetField)) {
                // 根据前端参数返回指定字段
                partialData.put(targetField, fullData.get(targetField));
            } else {
                // 默认返回预设的部分字段
                partialData.put("basicInfo", fullData.get("basicInfo"));
                partialData.put("recentRecords", fullData.get("recentRecords"));
            }
            return ResponseEntity.ok(partialData);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }
}

二、前端（Vue.js）实现步骤 #

• 发起HTTP请求：用axios（先通过npm install axios安装）或浏览器原生fetch调用后端接口，可携带参数指定需要的数据。
• 绑定数据并渲染：把后端返回的部分数据存到Vue组件的data属性里，在模板中直接绑定渲染。
• 添加异常处理：捕获请求失败的情况，显示错误提示，提升用户体验。

前端示例代码 #

<template>
  <div class="data-container">
    <div v-if="loading">加载中...</div>
    <div v-if="error" class="error-text">{{ error }}</div>
    <div v-else>
      <h3>用户基础信息</h3>
      <p>姓名: {{ partialData.basicInfo?.name }}</p>
      <p>年龄: {{ partialData.basicInfo?.age }}</p>
      <h3>近期记录</h3>
      <ul>
        <li v-for="record in partialData.recentRecords" :key="record.id">{{ record.content }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      partialData: {},
      loading: false,
      error: ''
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        // 可通过params传递筛选参数，比如指定获取"basicInfo"字段
        const res = await axios.get('http://your-backend-ip:8080/api/partial-data', {
          params: { targetField: 'basicInfo' }
        });
        this.partialData = res.data;
      } catch (err) {
        this.error = '数据加载失败，请稍后重试';
        console.error(err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.error-text { color: #f5222d; }
</style>

三、优化建议 #

• 缓存数据：如果JSON文件更新频率低，后端用@Cacheable注解缓存解析后的全量数据，避免重复读取文件提升性能。
• 分段传输：若JSON数据量极大，可实现分页接口，前端分批次请求数据，减少单次传输压力。
• 数据校验：后端对返回的部分数据做格式校验，确保前端拿到的数据符合预期。

内容的提问来源于stack exchange，提问作者Mass Mak