详解Vue与Spring Boot前后端是怎么对接起来的

前言

很多刚学习前端（HTML/CSS/JS/Vue）或者后端（Java/Spring Boot）的朋友，都会遇到一个共通的困惑：

“我能写页面，也能写接口，但它们怎么连起来的？”

本篇文章就为你解锁介绍这个最基础的知识点，从前后端分离的思想入门，到Vue 使用 Axios 调用 Spring Boot 接口的案例，一步步带你搞定。

一、什么是前后端分离？

1. 传统开发模式：页面与接口混在一起

在早期的 Web 应用开发中，前端页面和后端逻辑常常紧密耦合在一起。例如，一个 Java Web 项目往往采用 JSP 页面 + Servlet 或 Spring MVC Controller 的模式。用户请求一个页面，服务器会在后端拼接 HTML 并将整页内容返回给浏览器。

这种模式的特点是：

• 页面渲染在服务端完成，前端只负责展示结果；
• 前端和后端代码耦合严重，一处改动往往需要同时修改后端 JSP 文件与 Controller 逻辑；
• 开发效率受限，前端无法独立开发或测试功能，后端压力较大；
• 不利于适配现代多端设备（PC、移动、App）。

2. 前后端分离模式：各司其职、职责清晰

随着前端技术的发展，特别是 Vue、React、Angular 等现代前端框架的流行，前后端分离逐渐成为主流架构模式。

前后端分离指的是：

前端和后端分为两个独立的项目，分别负责不同的职责，通过接口（API）进行通信。

前端职责：

• 使用 Vue / React / 原生 HTML+CSS+JS 等构建用户界面；
• 负责页面渲染、交互逻辑（如按钮点击、表单输入）；
• 通过 Ajax、Axios 等工具调用后端接口，动态获取或提交数据。

后端职责：

• 使用 Spring Boot / Node.js / Python 等语言框架处理业务逻辑；
• 与数据库交互，完成增删改查；
• 向前端提供标准的 HTTP 接口（通常返回 JSON 数据）。

通信方式：

• 通常采用 HTTP 协议 + JSON 数据格式；
• 前端通过调用 RESTful 接口（如 /api/user/list​）获取或操作数据；
• 也可以使用 WebSocket 实现实时通信。

3. 前后端分离的优点：

二、前后端工程结构与开发流程

在前后端分离的开发模式中，前后端分别作为两个独立项目进行开发和部署。下面是一个典型的工程结构：

📁 vue-front         # 前端项目，使用 Vue3 + Vite 开发，独立启动
📁 springboot-back   # 后端项目，使用 Spring Boot 开发，提供 RESTful 接口

2.1 开发流程简述：

• 后端先行：定义接口

  • 例如：GET /api/users/{id}​，返回指定用户的信息，数据格式为 JSON。

• 前端对接：使用 Axios 请求接口

  • 获取数据并渲染到页面中。

• 前后协作：依赖接口文档

  • 接口文档可以手动编写，也可以通过 Swagger 等工具自动生成，便于双方协作。

    ‍

在编写好了后端部分的程序后，我们通常提供一个后端接口 Spring Boot API，那么核心操作就是获取后端接口提供的数据然后渲染在前端

上，这一部分我们主要通过Axios来完成。

2.2 什么是axios?

Axios 是一个基于 Promise 的 HTTP 客户端，运行在浏览器和 Node.js 中，用于发送网络请求（比如 GET、POST 等），常用于前端项目中向后端接口获取或提交数据。

简单来说：

Vue/React 项目中，你想调用后端的接口？就用 Axios！

Axios 的优势

为什么不用原生 fetch​，而要用 Axios 呢？看看 Axios 的好处：

Axios 安装与基本用法

安装

npm install axios

导入使用

import axios from 'axios'

基础请求示例

1. GET 请求（获取数据）

axios.get('/api/users/1')
  .then(res => {
    console.log(res.data) // 拿到后端返回的数据
  })
  .catch(err => {
    console.error('请求失败', err)
  })

2. POST 请求（提交数据）

axios.post('/api/users', {
  name: '小红',
  email: 'hong@example.com'
})

3. PUT 请求（更新数据）

axios.put('/api/users/1', {
  name: '新名字'
})

4. DELETE 请求（删除数据）

axios.delete('/api/users/1')

但是注意，我们不推荐在组件中直接写 axios.get(...)​，而是在一个单独的文件中封装接口逻辑，便于统一维护、修改和复用。以一个用户接口为例子。

封装 Axios 请求（services/user.js）

// 📁 src/services/user.js
import axios from 'axios'

// 后端接口基础地址
const base = 'http://localhost:8080/api/users'

// 获取指定用户
export function getUser(id) {
  return axios.get(`${base}/${id}`)
}

注意：这里的 base​ 就是你提到的“后端接口地址”的来源！我们用字符串拼接的方式，把用户 ID 加到 URL 上，形成完整请求地址。

在组件中调用（UserInfo.vue）

<script setup>
import { ref, onMounted } from 'vue'
import { getUser } from '../services/user.js'

// 用 ref 创建响应式用户对象
const user = ref({})

// 页面加载时请求后端接口
onMounted(async () => {
  const res = await getUser(1) // 发起 HTTP 请求，参数 1 是用户 ID
  user.value = res.data // 响应结果赋值给 user
})
</script>

<template>
  <div v-if="user.name">
    <h2>用户名：{{ user.name }}</h2>
    <p>邮箱：{{ user.email }}</p>
  </div>
</template>

三. 额外的…

全局拦截器（加 Token）

在登录系统中，很多请求需要携带用户的身份凭证（Token）。你可以配置一个请求拦截器，自动给所有请求加上 Token：

// 在 main.js 或 http.js 中统一配置
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token') // 从本地获取 Token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

可选优化：使用 Vite 代理简化请求地址

你可能注意到请求地址写成 http://localhost:8080/...​ 很不优雅。如果你在 vite.config.js​ 中加了代理：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

那么在封装 Axios 时可以把 base 改为：

const base = '/api/users'

这样你写 axios.get('/api/users/1')​，其实内部就会代理成 http://localhost:8080/api/users/1​，前端代码更简洁，跨域问题也解决了。

总结

到此这篇关于详解Vue与Spring Boot前后端是怎么对接起来的文章就介绍到这了,更多相关Vue与SpringBoot前后端对接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论