springboot3.1+vue3+jdk17的前后端项目例子

创建一个使用Spring Boot 3.1、Vue 3和JDK 17的前后端分离的项目需要一些步骤。以下是一个简单的例子，展示了如何开始这样一个项目。

后端：Spring Boot 3.1 + JDK 17

1. 环境准备：
   • 安装JDK 17。
   • 安装Maven或Gradle（用于项目构建和管理依赖）。
2. 创建Spring Boot项目：
   • 可以使用Spring Initializr（https://start.spring.io/）来生成一个基本的Spring Boot项目结构。
   • 选择Spring Boot版本为3.1，Java版本为17，并添加Web依赖。
3. 项目结构：
   • src/main/java: Java源代码。
   • src/main/resources: 配置文件和静态资源。
   • pom.xml或build.gradle: 项目依赖和构建配置。
4. 示例代码：
   • src/main/java/com/example/demo/DemoApplication.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);
         }
     }
     

   • src/main/java/com/example/demo/controller/HelloController.java：

     package com.example.demo.controller;
     import org.springframework.web.bind.annotation.GetMapping;
     import org.springframework.web.bind.annotation.RestController;
     @RestController
     public class HelloController {
         @GetMapping("/api/hello")
         public String hello() {
             return "Hello, World!";
         }
     }
     

5. 构建和运行：
   • 在项目根目录下运行mvn spring-boot:run（对于Maven项目）或./gradlew bootRun（对于Gradle项目）。

前端：Vue 3

1. 环境准备：
   • 安装Node.js和npm。
   • 安装Vue CLI（npm install -g @vue/cli）。
2. 创建Vue项目：
   • 运行vue create frontend来创建一个新的Vue项目。
3. 项目结构：
   • src: Vue源代码。
   • public: 静态资源。
   • package.json: 项目依赖和脚本。
4. 示例代码：
   • src/App.vue：

     <template>
       <div id="app">
         <img alt="Vue logo" src="./assets/logo.png">
         <HelloWorld msg="Welcome to Your Vue.js App"/>
       </div>
     </template>
     <script>
     import HelloWorld from './components/HelloWorld.vue'
     export default {
       name: 'App',
       components: {
         HelloWorld
       }
     }
     </script>
     

   • src/components/HelloWorld.vue：

     <template>
       <div class="hello">
         <h1>{{ msg }}</h1>
         <p>
           For a guide and recipes on how to configure / customize this project,<br>
           check out the
           <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
         </p>
       </div>
     </template>
     <script>
     export default {
       name: 'HelloWorld',
       props: {
         msg: String
       }
     }
     </script>
     

5. 构建和运行：
   • 在项目根目录下运行npm run serve。

注意事项

• 确保前端和后端分别运行在不同的端口上，例如后端运行在8080端口，前端运行在8081端口。
• 前端发起的API请求应该指向后端的正确URL和端口。
• 如果后端服务需要提供跨域支持，可以添加相应的Spring Boot配置。
  这个例子仅仅是一个起点，实际项目开发中需要考虑更多的细节，如API设计、安全性、状态管理、前端路由等。随着项目的进展，你可能还需要添加数据库、认证授权、日志记录等其他功能。