前端使用 Vue 3,后端使用 Spring Boot 构建 Hello World 程序
前端(Vue 3)
首先,创建一个 Vue 3 项目。
1. 安装 Vue CLI
npm install -g @vue/cli
2. 创建 Vue 项目
vue create frontend
在交互式提示中,选择默认的 Vue 3 预设。
3. 修改 App.vue
 
在 frontend/src 目录下,修改 App.vue 文件:
<template><div id="app"><h1>{{ message }}</h1><p v-if="error">{{ error }}</p></div>
</template><script>
export default {data() {return {message: "Loading...",error: null};},created() {fetch("http://localhost:8080/api/hello").then(response => {if (!response.ok) {throw new Error(\`HTTP error! status: \${response.status}\`);}return response.json();}).then(data => {this.message = data.message;}).catch(error => {this.error = error.toString();});}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
4. 运行前端项目
cd frontend
npm run serve
后端(Spring Boot)
接下来,创建一个 Spring Boot 项目。
1. 使用 Spring Initializr 创建项目
可以通过 Spring Initializr 创建项目,选择以下配置:
- Project: Maven
- Language: Java
- Spring Boot:
- Dependencies: Spring Web
下载项目并解压缩,或者通过命令行工具生成项目。
2. 创建 Spring Boot 项目结构
在项目的 src/main/java/com/example/demo 目录下,创建一个控制器类 HelloController.java:
package com.example.demo;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class HelloController {@GetMapping("/api/hello")public Message hello() {return new Message("Hello, World!");}public static class Message {private String message;public Message(String message) {this.message = message;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}}
}
3. 创建 CORS 配置类
在项目的 src/main/java/com/example/demo 目录下,创建一个配置类 CorsConfig.java:
package com.example.demo;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://localhost:8081").allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD").allowCredentials(true);}};}
}
4. 运行 Spring Boot 应用
在项目根目录下运行:
./mvnw spring-boot:run
整合前后端
确保 Vue 应用和 Spring Boot 应用同时运行。前端 Vue 应用将在 http://localhost:8081 上运行,后端 Spring Boot 应用将在 http://localhost:8080 上运行。
前端应用将通过 fetch 请求从后端获取数据,并显示在页面上。
项目结构
确保项目结构如下:
project-directory/
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   └── App.vue
│   ├── package.json
│   └── ...
│
├── backend/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/demo/
│   │   │   │   └── HelloController.java
│   │   │   │   └── CorsConfig.java
│   │   │   └── resources/
│   │   ├── test/
│   │   └── ...
│   ├── mvnw
│   ├── mvnw.cmd
│   ├── pom.xml
│   └── ...
验证
-  启动前端和后端应用: - 前端:npm run serve
- 后端:./mvnw spring-boot:run
 
- 前端:
-  访问 Vue 应用:在浏览器中打开 http://localhost:8081,查看是否显示 “Hello, World!”。