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

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

前端(Vue 3)

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

1. 安装 Vue CLI

bash 复制代码
npm install -g @vue/cli

2. 创建 Vue 项目

bash 复制代码
vue create frontend

在交互式提示中,选择默认的 Vue 3 预设。

3. 修改 App.vue

frontend/src 目录下,修改 App.vue 文件:

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. 运行前端项目

bash 复制代码
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

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

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 应用

在项目根目录下运行:

bash 复制代码
./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!"。

相关推荐
snow@li3 分钟前
d3.js:学习积累
开发语言·前端·javascript
vincention4 分钟前
JavaScript 中 this 指向完全指南
前端
qyresearch_15 分钟前
射频前端MMIC:5G时代的技术引擎与市场机遇
前端·5g
天蓝色的鱼鱼19 分钟前
Next.js 渲染模式全解析:如何正确选择客户端与服务端渲染
前端·react.js·next.js
一枚前端小能手26 分钟前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官26 分钟前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_11231 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
thginWalker36 分钟前
使用Spring Boot构建Web服务层
spring boot
yannick_liu42 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
摇滚侠44 分钟前
Spring Boot 3零基础教程,Spring Boot 特性介绍,笔记02
java·spring boot·笔记