Springboot3+Vue3技术示例代码

Springboot3+Vue3技术示例代码

在编写Spring Boot 3和Vue 3的技术示例代码时，我们需要明确一点，即目前（截至2023年）Spring Boot 3尚未正式发布，而Vue 3已经稳定并且被广泛使用。不过，我可以为你提供一个基于Spring Boot（假设为Spring Boot 2.x版本，因为3.x版本的具体细节尚未确定）和Vue 3的简单示例代码框架。

后端（Spring Boot 2.x）

pom.xml (Maven依赖管理)

xml
<!-- Spring Boot Starter Parent -->  
<parent>  
    <groupId>org.springframework.boot</groupId>  
    <artifactId>spring-boot-starter-parent</artifactId>  
    <version>2.7.0</version> <!-- 使用Spring Boot 2.7.0或其他可用版本 -->  
    <relativePath/> <!-- lookup parent from repository -->  
</parent>  
  
<!-- 添加Web和JPA依赖（如果使用数据库） -->  
<dependencies>  
    <dependency>  
        <groupId>org.springframework.boot</groupId>  
        <artifactId>spring-boot-starter-web</artifactId>  
    </dependency>  
    <!-- 其他依赖，例如JPA, Security等 -->  
</dependencies>

Controller (RESTful API)

java
package com.example.demo.controller;  
  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
@RestController  
public class GreetingController {  
  
    @GetMapping("/greeting")  
    public String greeting() {  
        return "Hello from Spring Boot!";  
    }  
}

Application (主启动类)

java
package com.example.demo;  
  
import org.springframework.boot.SpringApplication;  
import org.springframework.boot.autoconfigure.SpringBootApplication;  
  
@SpringBootApplication  
public class DemoApplication {  
  
    public static void main(String[] args) {  
        SpringApplication.run(DemoApplication.class, args);  
    }  
}

前端（Vue 3）package.json (npm依赖管理)

json
{  
  "name": "vue3-demo",  
  "version": "1.0.0",  
  "scripts": {  
    "serve": "vue-cli-service serve",  
    "build": "vue-cli-service build"  
  },  
  "dependencies": {  
    "vue": "^3.0.0",  
    "axios": "^0.21.1" // 用于发送HTTP请求  
  },  
  "devDependencies": {  
    "@vue/cli-plugin-babel": "~4.5.0",  
    "@vue/cli-service": "~4.5.0",  
    "@vue/compiler-sfc": "^3.0.0"  
  }  
}

App.vue (Vue组件示例)

vue
<template>  
  <div id="app">  
    <button @click="fetchGreeting">Get Greeting</button>  
    <p v-if="greeting">{{ greeting }}</p>  
  </div>  
</template>  
  
<script>  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      greeting: ''  
    };  
  },  
  methods: {  
    fetchGreeting() {  
      axios.get('http://localhost:8080/greeting') // 假设Spring Boot运行在localhost:8080  
        .then(response => {  
          this.greeting = response.data;  
        })  
        .catch(error => {  
          console.error(error);  
        });  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* CSS样式 */  
</style>

main.js (Vue入口文件)

javascript
import { createApp } from 'vue';  
import App from './App.vue';  
  
createApp(App).mount('#app');

这个示例展示了如何使用Spring Boot（这里假设为2.x版本）创建一个简单的RESTful API，并使用Vue 3发送HTTP请求来获取这个API的数据。请注意，你需要分别设置并运行Spring Boot和Vue项目，并确保它们可以在同一网络中相互通信。

当Spring Boot 3正式发布后，你可以根据新的版本和特性进行相应的更新和调整。由于Spring Boot 3的具体细节尚未确定，以上示例