Spring Boot 与 Vue.js 前后端分离中的数据交互机制

在现代 Web 开发中，Spring Boot 和 Vue.js 的结合已经成为主流技术栈之一。这种前后端分离的架构广泛应用于论坛、商城系统等复杂应用场景。本文旨在深入探讨 Spring Boot 和 Vue.js 之间的数据传递方式及其背后的设计哲学，为研究者提供系统性理解。

一、model.addAttribute() 在 Spring MVC 中的角色与局限

model.addAttribute() 是 Spring MVC 提供的用于服务器端模板渲染的数据绑定方法。通过该方法，开发者可以将数据模型注入到模板引擎（如 Thymeleaf、JSP）中，实现动态页面渲染。

示例代码

@Controller
public class SalesController {

    @GetMapping("/sales")
    public String showSales(Model model) {
        List<CategorySales> salesByCategory = List.of(
            new CategorySales("Electronics", 15000),
            new CategorySales("Books", 8000),
            new CategorySales("Clothing", 5000)
        );
        model.addAttribute("salesByCategory", salesByCategory);
        return "sales-view";
    }
}

此代码通过 model.addAttribute() 将销售数据传递给模板引擎（如 Thymeleaf）：

<ul>
    <li th:each="category : ${salesByCategory}">
        <span th:text="${category.name}">Category Name</span>: 
        <span th:text="${category.sales}">Sales</span>
    </li>
</ul>

限制

尽管这种方式适用于传统的服务器端渲染，但在基于前后端分离的开发模式中，其局限性逐渐显现：

模板与业务逻辑耦合过紧，难以支持多端（如移动端）应用。

前端需要依赖服务器生成的 HTML，缺乏灵活性。

二、前后端分离中的 Spring Boot RESTful API 设计

在前后端分离的架构中，后端的职责从页面渲染转向数据服务，Spring Boot 通常通过 RESTful API 提供 JSON 数据。

API 示例

以下代码展示了一个通过 @RestController 提供 RESTful API 的实现：

@RestController
@RequestMapping("/api")
public class SalesController {

    @GetMapping("/salesByCategory")
    public List<CategorySales> getSalesByCategory() {
        return List.of(
            new CategorySales("Electronics", 15000),
            new CategorySales("Books", 8000),
            new CategorySales("Clothing", 5000)
        );
    }
}

调用 /api/salesByCategory 接口将返回如下 JSON 数据：

[
    { "name": "Electronics", "sales": 15000 },
    { "name": "Books", "sales": 8000 },
    { "name": "Clothing", "sales": 5000 }
]

这种数据接口方式解耦了前后端，后端专注于数据处理，前端则通过 API 获取数据并动态渲染页面。

三、Vue.js 前端如何消费 Spring Boot 提供的 API

数据获取示例

Vue.js 前端通常通过 Axios 或 Fetch 调用后端的 RESTful API，以下是一个基于 Vue.js 的示例代码：

<template>
  <div>
    <ul>
      <li v-for="category in salesByCategory" :key="category.name">
        {{ category.name }}: {{ category.sales }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      salesByCategory: []
    };
  },
  created() {
    axios.get('/api/salesByCategory')
      .then(response => {
        this.salesByCategory = response.data;
      })
      .catch(error => {
        console.error("Error fetching sales data:", error);
      });
  }
};
</script>

设计哲学与优势

解耦性

Vue.js 专注于前端视图层逻辑，而 Spring Boot 专注于数据服务，二者职责分明。

RESTful API 使得前后端可以独立开发与测试。

可扩展性

后端服务可以同时支持多个客户端（如 Web 应用、移动应用）。

维护性

JSON 数据格式通用，标准化的接口设计降低了后期维护成本。

研究启示与总结

在前后端分离架构中，充分利用 Spring Boot 提供高效的数据接口与 Vue.js 的动态渲染能力，是现代 Web 开发的重要模式。以下是一些建议：

后端应以 RESTful API 为核心设计思想，只提供数据服务，不再参与页面渲染。

前端通过框架（如 Vue.js）消费 API，并根据需要实现动态数据绑定。

前后端分离的模式使得系统具有更高的灵活性、可扩展性与易维护性。

通过这种分布式架构设计，前后端团队能够独立开展工作，同时确保最终系统的高效运行与易用性。

作者：WanderInk

链接：https://juejin.cn

+友情链接