Web 开发中的前后端分离：以 Vite + Spring Boot 为例

前端

2023-10-21 18:35:07

对于当今的 Web 开发人员来说，前后端分离已成为一种常见的架构模式。它将前端和后端组件分离开来，从而提高开发效率和应用程序的整体质量。在这篇文章中，我们将深入探讨前后端分离，重点关注使用 Vite 和 Spring Boot 的实践。

前后端分离的优势

增强代码复用： 前端和后端代码库是独立的，允许开发人员针对特定平台和技术进行优化。
提高开发效率： 并行开发前端和后端功能，加快应用程序开发过程。
更好的可维护性： 清晰的代码组织和模块化结构使应用程序更易于维护和扩展。
提升可扩展性： 前后端组件可以独立扩展，满足不断变化的需求。

使用 Vite + Spring Boot 实现前后端分离

Vite 是一个轻量级的构建工具，用于快速开发现代 Web 应用程序。Spring Boot 是一个流行的 Java 框架，用于简化后端开发。将这两者结合使用，我们可以构建健壮的前后端分离应用程序。

后端实现

使用 Spring Boot 创建后端 API：

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

    @GetMapping("/data")
    public ResponseEntity<List<Data>> getData() {
        // 获取数据并返回
    }

    // 其他后端 API 方法
}

前端实现

使用 Vite 构建前端应用程序：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

请求处理

为了在前端应用程序中发送 HTTP 请求到后端 API，我们可以使用 Axios：

import axios from 'axios'

async function getData() {
    const response = await axios.get('/api/data')
    return response.data
}

解决跨域问题

当后端和前端在不同的域名或端口上运行时，跨域请求将被浏览器阻止。为了解决这个问题，需要在后端启用 CORS 支持。

// Spring Boot 配置
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("GET", "POST", "PUT", "DELETE");
        config.setMaxAge(3600L);
        return new CorsFilter(new UrlBasedCorsConfigurationSource(new PathPatternParser()), config);
    }
}