如何使用 Spring Boot 与 Vue 构建 web 应用

文
章
目
录

• 为什么选择 Vue + Spring Boot？
• Vue.js 的优势
• Spring Boot 的优势
• 项目搭建
• 前端：Vue.js
• 后端：Spring Boot
• 前后端关联
• 总结

随着前端框架和后端技术的不断发展，Vue 与 Spring Boot 的组合已成为构建响应式和可伸缩 Web 应用的流行选择。在这篇博客中，我们将探讨如何使用 Vue 作为前端框架，结合 Spring Boot 来构建一个完整的全栈应用。

为什么选择 Vue + Spring Boot？

Vue.js 的优势

1. 渐进式框架：您可以逐步引入 Vue，而不需要一次性重构整个项目。
2. 双向数据绑定：在开发复杂的用户界面时，Vue 提供了强大的数据绑定特性。
3. 组件化开发：有助于代码重用和维护。

Spring Boot 的优势

1. 快速启动：Spring Boot 提供了一套简化的配置，能够快速启动一个 Spring 应用。
2. 微服务架构：支持微服务架构的开发，适合现代分布式系统。
3. 庞大的生态系统：拥有丰富的插件和社区支持。

项目搭建

前端：Vue.js

1）环境准备：确保安装了 Node.js 和 npm。

2）创建项目：

npm install -g @vue/cli
vue create vue-springboot-demo

3）项目结构：熟悉 Vue 项目结构，理解 components、views、和 router 的作用。

后端：Spring Boot

1. 环境准备：确保安装了 JDK 8+ 和 Maven。
2. 创建项目： 可以使用 Spring Initializr 来快速生成项目模板：
   • 访问 start.spring.io，选择 Java、Maven、Spring Boot 版本，或者在idea中直接创建。
   • 添加依赖：Spring Web、Spring Data JPA、H2 数据库等。
3. 项目结构：了解基本的 Spring Boot 项目结构，如 controller、service、repository。

前后端关联

1）API 定义：在 Spring Boot 中定义 API 接口，使用 @RestController 注解。

@RestController
@RequestMapping(\"/api\")
public class DemoController {
    @GetMapping(\"/greeting\")
    public String greeting() {
        return \"Hello from Spring Boot!\";
    }
}

2）前端调用：在 Vue 中使用 axios 或 fetch 进行 API 调用。

import axios from \'axios\';

export default {
    data() {
        return {
            message: \'\'
        };
    },
    mounted() {
        axios.get(\'/api/greeting\')
            .then(response => {
                this.message = response.data;
            })
            .catch(error => {
                console.error(\"There was an error!\", error);
            });
    }
};

3）跨域配置：在 Spring Boot 中配置 CORS 以允许跨域请求。

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping(\"/api/**\").allowedOrigins(\"http://localhost:8080\");
            }
        };
    }
}

总结

通过结合使用 Vue 和 Spring Boot，我们能够快速构建出一个现代化的 Web 应用。Vue 负责用户界面的动态交互，而 Spring Boot 提供了稳健的后端服务。本篇博客仅仅是一个简单的入门示例，后续可以通过引入 Vuex、Router、Spring Security 等进一步增强应用的功能和安全性。

以上就是如何使用 Spring Boot 与 Vue 构建 web 应用的全部实现步骤，希望对你有帮助！