返回

Java Web项目之IntelliJ IDEA创建SpringBoot3与Vue3分离项目教程

后端

使用 IntelliJ IDEA 创建 Spring Boot 3 和 Vue 3 分离 Java Web 项目

简介

今天，我们踏上使用 IntelliJ IDEA 创建 Spring Boot 3 和 Vue 3 分离 Java Web 项目的旅程。这个全面的教程将引导你完成从创建项目到运行它的每一步。准备好拥抱现代 Web 开发的强大组合了吗？

项目创建

首先，让我们创建一个新项目。在 IntelliJ IDEA 中，选择“File”→“New”→“Project”→“Java Enterprise”，然后选择“Spring Initializr”项目类型。为你的项目输入一个名称，然后选择“Spring Web”、“Spring Boot DevTools”和“Spring WebFlux”作为依赖项。

添加 Vue 3 依赖项

为了将 Vue 3 集成到我们的项目中，我们需要添加必要的依赖项。打开项目 pom.xml 文件并添加以下代码：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

创建控制器类

现在，让我们创建一个控制器类来处理请求。在 src/main/java 目录下创建一个新的 Java 类，例如：

@RestController
public class HomeController {
  @GetMapping("/")
  public String index() {
    return "index";
  }
}

创建模板文件

接下来，我们需要创建一个模板文件来渲染我们的 HTML。在 src/main/resources/templates 目录下创建一个新的 HTML 文件，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

运行项目

万事俱备，只欠运行。点击 IntelliJ IDEA 工具栏上的“Run”按钮，选择“Spring Boot: main”，即可启动项目。现在，访问 localhost:8080，你应该会看到“Hello, World!”的字样。

常见问题解答

1. 我在项目创建时遇到错误。该怎么办？

检查你的 Java 和 Maven 版本是否是最新的。如果问题仍然存在，请查看 Spring Initializr 文档。

2. 我的控制器方法没有被调用。为什么？

确保你的控制器类被标注为 @RestController，并且你的方法被标注为 @GetMapping("/").

3. 我的模板文件没有被渲染。是怎么回事？

检查你的 Spring Boot 配置是否正确，并且你的模板文件位于正确的目录中。

4. 我如何将 Vue 3 集成到我的项目中？

本教程不涵盖 Vue 3 的集成。请参阅 Vue 3 官方文档以获取更多信息。

5. 如何部署我的项目到生产环境？

Spring Boot 提供了多种部署选项。根据你的具体需求，查看 Spring Boot 文档以了解最佳方法。

结论

恭喜！你已经成功创建了一个 Spring Boot 3 和 Vue 3 分离的 Java Web 项目。现在，你可以开始开发自己的 Web 应用程序了。记住，学习和探索永远不要停止。祝你在 Web 开发之旅中一切顺利！