前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序

前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序

前端（Vue 3）

首先，创建一个 Vue 3 项目。

1. 安装 Vue CLI

npminstall-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

：

packagecom.example.demo;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RestController;@RestControllerpublicclassHelloController{@GetMapping("/api/hello")publicMessagehello(){returnnewMessage("Hello, World!");}publicstaticclassMessage{privateString message;publicMessage(String message){this.message = message;}publicStringgetMessage(){return message;}publicvoidsetMessage(String message){this.message = message;}}}

3. 创建 CORS 配置类

在项目的

src/main/java/com/example/demo

目录下，创建一个配置类

CorsConfig.java

：

packagecom.example.demo;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;@ConfigurationpublicclassCorsConfig{@BeanpublicWebMvcConfigurercorsConfigurer(){returnnewWebMvcConfigurer(){@OverridepublicvoidaddCorsMappings(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
│   └── ...

验证

1. 启动前端和后端应用：- 前端：npm run serve- 后端：./mvnw spring-boot:run
2. 访问 Vue 应用：在浏览器中打开 http://localhost:8081，查看是否显示 “Hello, World!”。