前后端交流

hqxstudying2025-08-04 13:43

Spring Boot（后端）与 Vue（前端）的交流主要通过 HTTP 协议 实现，具体来说是后端提供 RESTful API 接口，前端通过 Axios 等工具发送请求并处理响应。以下是详细的实现方式和配置步骤：

一、核心通信方式

  1. 后端（Spring Boot） ：
    提供 API 接口（GET/POST/PUT/DELETE 等），返回 JSON 格式的数据。
  2. 前端（Vue） ：
    使用 Axios 发送 HTTP 请求调用后端接口，接收 JSON 数据后渲染到页面。
  3. 跨域处理 ：
    由于前后端通常运行在不同端口（如后端 8080，前端 8081），需解决跨域问题（CORS）。

二、后端（Spring Boot）配置

1. 引入 Web 依赖

在 pom.xml 中添加 Spring Web 依赖，用于开发 API 接口：

复制代码 
<dependencies>
    <!-- Spring Web 依赖（提供 RESTful API 支持） -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 可选：Lombok 简化实体类代码 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>
2. 解决跨域问题

Spring Boot 中通过 @CrossOrigin 注解 或 全局 CORS 配置 允许前端跨域请求。

方式一：全局配置（推荐）

创建配置类，允许所有域名 / 方法的跨域请求：

复制代码 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        // 1. 配置跨域信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*"); // 允许所有域名（生产环境需指定具体域名）
        config.setAllowCredentials(true); // 允许携带 Cookie
        config.addAllowedMethod("*"); // 允许所有 HTTP 方法（GET/POST 等）
        config.addAllowedHeader("*"); // 允许所有请求头

        // 2. 配置路径映射（所有接口都允许跨域）
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    }
}

方式二：局部注解（针对单个接口 / 控制器）

在控制器或方法上添加 @CrossOrigin：

复制代码 
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:8081") // 允许前端 8081 端口访问
public class UserController {
    // ...
}
3. 开发 API 接口

创建控制器类，提供数据接口（返回 JSON 格式）：

复制代码 
import lombok.Data;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api/users")
public class UserController {

    // 模拟用户数据
    private static final List<User> users = new ArrayList<>();
    static {
        users.add(new User(1L, "张三", 20));
        users.add(new User(2L, "李四", 22));
    }

    // GET 请求：查询所有用户
    @GetMapping
    public List<User> getUsers() {
        return users;
    }

    // GET 请求：根据 ID 查询用户
    @GetMapping("/{id}")
    public User getUserUserById(@PathVariable Long id) {
        return users.stream()
                .filter(user -> user.getId().equals(id))
                .findFirst()
                .orElseThrow(() -> new RuntimeException("用户不存在"));
    }

    // POST 请求：新增用户
    @PostMapping
    public User addUser(@RequestBody User user) {
        users.add(user);
        return user;
    }

    // 实体类（使用 Lombok 的 @Data 简化 getter/setter）
    @Data
    public static class User {
        private Long id;
        private String name;
        private Integer age;

        public User(Long id, String name, Integer age) {
            this.id = id;
            this.name = name;
            this.age = age;
        }
    }
}

三、前端（Vue）配置

1. 安装 Axios

Axios 是 Vue 中常用的 HTTP 客户端，用于发送请求：

复制代码 
# 创建 Vue 项目（若未创建）
vue create vue-demo

# 进入项目目录，安装 Axios
cd vue-demo
npm install axios --save
2. 配置 Axios 全局实例

在 src/utils/request.js 中创建 Axios 实例，统一配置基础路径和拦截器：

复制代码 
import axios from 'axios';

// 创建 Axios 实例
const request = axios.create({
  baseURL: 'http://localhost:8080', // 后端接口基础路径
  timeout: 5000 // 超时时间
});

// 请求拦截器（可选，如添加 token）
request.interceptors.request.use(
  config => {
    // 可在此请求头添加 token（如身份认证）
    // config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器（可选，统一处理错误）
request.interceptors.response.use(
  response => {
    return response.data; // 直接返回响应体中的 data
  },
  error => {
    console.error('请求失败：', error);
    return Promise.reject(error);
  }
);

export default request;
3. 调用后端接口

在 Vue 组件中使用配置好的 Axios 实例调用后端 API：

示例组件（src/views/UserView.vue）：

复制代码 
<template>
  <div class="user-container">
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.name }} ({{ user.age }}岁)
      </li>
    </ul>

    <h3>新增用户</h3>
    <input v-model="newUser.name" placeholder="姓名" />
    <input v-model="newUser.age" type="number" placeholder="年龄" />
    <button @click="addUser">添加</button>
  </div>
</template>

<script>
import request from '@/utils/request'; // 导入 Axios 实例

export default {
  data() {
    return {
      users: [],
      newUser: { name: '', age: 0 }
    };
  },
  created() {
    // 页面加载时查询所有用户
    this.getUsers();
  },
  methods: {
    // 调用后端 GET 接口
    async getUsers() {
      try {
        this.users = await request.get('/api/users');
      } catch (error) {
        alert('查询失败');
      }
    },

    // 调用后端 POST 接口
    async addUser() {
      try {
        const newUser = {
          id: Date.now(), // 简单生成唯一 ID
          name: this.newUser.name,
          age: this.newUser.age
        };
        await request.post('/api/users', newUser);
        this.getUsers(); // 新增后刷新列表
        this.newUser = { name: '', age: 0 }; // 清空输入
      } catch (error) {
        alert('新增失败');
      }
    }
  }
};
</script>
4. 配置 Vue 路由（可选）

若需要多页面跳转，在 src/router/index.js 中配置路由：

复制代码 
import { createRouter, createWebHistory } from 'vue-router';
import UserView from '../views/UserView.vue';

const routes = [
  {
    path: '/users',
    name: 'User',
    component: UserView
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

四、运行与测试

  1. 启动后端 ：运行 Spring Boot 主类，默认端口 8080。
  2. 启动前端 ：执行 npm run serve，默认端口 8080（若冲突可在 vue.config.js 中修改）。
  3. 访问测试 ：打开 http://localhost:8081/users，即可看到前端页面通过 API 获取并展示后端数据，点击 "添加" 按钮可新增用户。

五、进阶场景

  1. 身份认证 ：

    后端通过 JWT 生成 token，前端登录后存储 token 到 localStorage，每次请求通过 Axios 拦截器添加到请求头（Authorization: Bearer token）。

  2. WebSocket 实时通信 ：

    对于即时聊天、实时数据更新等场景，可使用 WebSocket（Spring Boot 集成 WebSocket，Vue 用 vue-native-websocket 插件）。

  3. 接口文档 ：

    后端集成 Swagger（SpringDoc）自动生成 API 文档，方便前后端协作：

    复制代码 
    <dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
    <version>2.1.0</version>
</dependency>

    访问 http://localhost:8080/swagger-ui.html 查看接口文档。

通过以上步骤，Spring Boot 与 Vue 可实现高效通信，后端专注于数据处理和业务逻辑，前端专注于用户界面和交互，实现前后端分离架构。

相关推荐
invicinble3 小时前
springboot的核心实现机制原理
java·spring boot·后端
人道领域3 小时前
SSM框架从入门到入土（AOP面向切面编程）
java·开发语言
全栈老石3 小时前
Python 异步生存手册：给被 JS async/await 宠坏的全栈工程师
后端·python
大模型玩家七七3 小时前
梯度累积真的省显存吗？它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
space62123273 小时前
在SpringBoot项目中集成MongoDB
spring boot·后端·mongodb
CodeToGym4 小时前
【Java 办公自动化】Apache POI 入门：手把手教你实现 Excel 导入与导出
java·apache·excel
凡人叶枫4 小时前
C++中智能指针详解（Linux实战版）| 彻底解决内存泄漏，新手也能吃透
java·linux·c语言·开发语言·c++·嵌入式开发
Tony Bai4 小时前
再见，丑陋的 container/heap！Go 泛型堆 heap/v2 提案解析
开发语言·后端·golang
JMchen1234 小时前
Android后台服务与网络保活：WorkManager的实战应用
android·java·网络·kotlin·php·android-studio
阔皮大师4 小时前
INote轻量文本编辑器
java·javascript·python·c#
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Linux下V2Ray安装配置指南06UV安装并设置国内源07Claude Code Skills 实用使用手册08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09使用 1panel面板 部署 php网站10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南