前言

很多剛學習前端（HTML/CSS/JS/Vue）或者后端（Java/Spring Boot）的朋友，都會遇到一個共通的困惑：

“我能寫頁面，也能寫接口，但它們怎么連起來的？”

本篇文章就為你解鎖介紹這個最基礎的知識點，從前后端分離的思想入門，到Vue 使用 Axios 調(diào)用 Spring Boot 接口的案例，一步步帶你搞定。

一、什么是前后端分離？

1. 傳統(tǒng)開發(fā)模式：頁面與接口混在一起

在早期的 Web 應用開發(fā)中，前端頁面和后端邏輯常常緊密耦合在一起。例如，一個 Java Web 項目往往采用 JSP 頁面 + Servlet 或 Spring MVC Controller 的模式。用戶請求一個頁面，服務器會在后端拼接 HTML 并將整頁內(nèi)容返回給瀏覽器。

這種模式的特點是：

• 頁面渲染在服務端完成，前端只負責展示結(jié)果；
• 前端和后端代碼耦合嚴重，一處改動往往需要同時修改后端 JSP 文件與 Controller 邏輯；
• 開發(fā)效率受限，前端無法獨立開發(fā)或測試功能，后端壓力較大；
• 不利于適配現(xiàn)代多端設備（PC、移動、App）。

2. 前后端分離模式：各司其職、職責清晰

隨著前端技術(shù)的發(fā)展，特別是 Vue、React、Angular 等現(xiàn)代前端框架的流行，前后端分離逐漸成為主流架構(gòu)模式。

前后端分離指的是：

前端和后端分為兩個獨立的項目，分別負責不同的職責，通過接口（API）進行通信。

前端職責：

• 使用 Vue / React / 原生 HTML+CSS+JS 等構(gòu)建用戶界面；
• 負責頁面渲染、交互邏輯（如按鈕點擊、表單輸入）；
• 通過 Ajax、Axios 等工具調(diào)用后端接口，動態(tài)獲取或提交數(shù)據(jù)。

后端職責：

• 使用 Spring Boot / Node.js / Python 等語言框架處理業(yè)務邏輯；
• 與數(shù)據(jù)庫交互，完成增刪改查；
• 向前端提供標準的 HTTP 接口（通常返回 JSON 數(shù)據(jù)）。

通信方式：

• 通常采用 HTTP 協(xié)議 + JSON 數(shù)據(jù)格式；
• 前端通過調(diào)用 RESTful 接口（如 /api/user/list?）獲取或操作數(shù)據(jù)；
• 也可以使用 WebSocket 實現(xiàn)實時通信。

3. 前后端分離的優(yōu)點：

二、前后端工程結(jié)構(gòu)與開發(fā)流程

在前后端分離的開發(fā)模式中，前后端分別作為兩個獨立項目進行開發(fā)和部署。下面是一個典型的工程結(jié)構(gòu)：

?? vue-front         # 前端項目，使用 Vue3 + Vite 開發(fā)，獨立啟動
?? springboot-back   # 后端項目，使用 Spring Boot 開發(fā)，提供 RESTful 接口

2.1 開發(fā)流程簡述：

• 后端先行：定義接口

  • 例如：GET /api/users/{id}?，返回指定用戶的信息，數(shù)據(jù)格式為 JSON。

• 前端對接：使用 Axios 請求接口

  • 獲取數(shù)據(jù)并渲染到頁面中。

• 前后協(xié)作：依賴接口文檔

  • 接口文檔可以手動編寫，也可以通過 Swagger 等工具自動生成，便于雙方協(xié)作。

    ‍

在編寫好了后端部分的程序后，我們通常提供一個后端接口 Spring Boot API，那么核心操作就是獲取后端接口提供的數(shù)據(jù)然后渲染在前端

上，這一部分我們主要通過Axios來完成。

2.2 什么是axios?

Axios 是一個基于 Promise 的 HTTP 客戶端，運行在瀏覽器和 Node.js 中，用于發(fā)送網(wǎng)絡請求（比如 GET、POST 等），常用于前端項目中向后端接口獲取或提交數(shù)據(jù)。

簡單來說：

Vue/React 項目中，你想調(diào)用后端的接口？就用 Axios！

Axios 的優(yōu)勢

為什么不用原生 fetch?，而要用 Axios 呢？看看 Axios 的好處：

Axios 安裝與基本用法

安裝

npm install axios

導入使用

import axios from 'axios'

基礎請求示例

1. GET 請求（獲取數(shù)據(jù)）

axios.get('/api/users/1')
  .then(res => {
    console.log(res.data) // 拿到后端返回的數(shù)據(jù)
  })
  .catch(err => {
    console.error('請求失敗', err)
  })

2. POST 請求（提交數(shù)據(jù)）

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

3. PUT 請求（更新數(shù)據(jù)）

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

4. DELETE 請求（刪除數(shù)據(jù)）

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

但是注意，我們不推薦在組件中直接寫 axios.get(...)?，而是在一個單獨的文件中封裝接口邏輯，便于統(tǒng)一維護、修改和復用。以一個用戶接口為例子。

封裝 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 上，形成完整請求地址。

在組件中調(diào)用（UserInfo.vue）

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

// 用 ref 創(chuàng)建響應式用戶對象
const user = ref({})

// 頁面加載時請求后端接口
onMounted(async () => {
  const res = await getUser(1) // 發(fā)起 HTTP 請求，參數(shù) 1 是用戶 ID
  user.value = res.data // 響應結(jié)果賦值給 user
})
</script>

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

三. 額外的…

全局攔截器（加 Token）

在登錄系統(tǒng)中，很多請求需要攜帶用戶的身份憑證（Token）。你可以配置一個請求攔截器，自動給所有請求加上 Token：

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

可選優(yōu)化：使用 Vite 代理簡化請求地址

你可能注意到請求地址寫成 http://localhost:8080/...? 很不優(yōu)雅。如果你在 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')?，其實內(nèi)部就會代理成 http://localhost:8080/api/users/1?，前端代碼更簡潔，跨域問題也解決了。

總結(jié)

到此這篇關于詳解Vue與Spring Boot前后端是怎么對接起來的文章就介紹到這了,更多相關Vue與SpringBoot前后端對接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！