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

前端使用 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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public 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
│   └── ...

验证

1. 启动前端和后端应用：

   • 前端：npm run serve
   • 后端：./mvnw spring-boot:run

2. 访问 Vue 应用：在浏览器中打开 http://localhost:8081，查看是否显示 “Hello, World!”。