前言

很多剛學(xué)習(xí)前端（HTML/CSS/JS/Vue）或者后端（Java/Spring Boot）的朋友，都會(huì)遇到一個(gè)共通的困惑：

“我能寫(xiě)頁(yè)面，也能寫(xiě)接口，但它們?cè)趺催B起來(lái)的？”

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

一、什么是前后端分離？

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

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

這種模式的特點(diǎn)是：

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

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

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

前后端分離指的是：

前端和后端分為兩個(gè)獨(dú)立的項(xiàng)目，分別負(fù)責(zé)不同的職責(zé)，通過(guò)接口（API）進(jìn)行通信。

前端職責(zé)：

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

后端職責(zé)：

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

通信方式：

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

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

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

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

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

2.1 開(kāi)發(fā)流程簡(jiǎn)述：

• 后端先行：定義接口

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

• 前端對(duì)接：使用 Axios 請(qǐng)求接口

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

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

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

    ‍

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

上，這一部分我們主要通過(guò)Axios來(lái)完成。

2.2 什么是axios?

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

簡(jiǎn)單來(lái)說(shuō)：

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

Axios 的優(yōu)勢(shì)

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

Axios 安裝與基本用法

安裝

npm install axios

導(dǎo)入使用

import axios from 'axios'

基礎(chǔ)請(qǐng)求示例

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

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

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

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

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

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

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

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

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

封裝 Axios 請(qǐng)求（services/user.js）

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

// 后端接口基礎(chǔ)地址
const base = 'http://localhost:8080/api/users'

// 獲取指定用戶(hù)
export function getUser(id) {
  return axios.get(`${base}/${id}`)
}

注意：這里的 base? 就是你提到的“后端接口地址”的來(lái)源！我們用字符串拼接的方式，把用戶(hù) ID 加到 URL 上，形成完整請(qǐng)求地址。

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

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

// 用 ref 創(chuàng)建響應(yīng)式用戶(hù)對(duì)象
const user = ref({})

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

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

三. 額外的…

全局?jǐn)r截器（加 Token）

在登錄系統(tǒng)中，很多請(qǐng)求需要攜帶用戶(hù)的身份憑證（Token）。你可以配置一個(gè)請(qǐng)求攔截器，自動(dòng)給所有請(qǐng)求加上 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 代理簡(jiǎn)化請(qǐng)求地址

你可能注意到請(qǐng)求地址寫(xiě)成 http://localhost:8080/...? 很不優(yōu)雅。如果你在 vite.config.js? 中加了代理：

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

那么在封裝 Axios 時(shí)可以把 base 改為：

const base = '/api/users'

這樣你寫(xiě) axios.get('/api/users/1')?，其實(shí)內(nèi)部就會(huì)代理成 http://localhost:8080/api/users/1?，前端代碼更簡(jiǎn)潔，跨域問(wèn)題也解決了。

總結(jié)

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

最新評(píng)論