Spring Boot Web 入门

news2025/2/11 9:09:38

Spring Boot Web 是 Spring Boot 框架的一个重要模块，它简化了基于 Spring 的 Web 应用程序的开发过程。以下是一个 Spring Boot Web 项目的入门指南，涵盖了项目创建、代码编写、运行等关键步骤。

1. 项目创建

使用 Spring Initializr

使用 IDE 创建

2. 项目结构分析

3. 编写简单的 Web 控制器

4. 配置应用属性（可选）

5. 运行项目

6. 测试应用

7. 处理表单数据和视图渲染（进阶）

处理表单数据

视图渲染

Spring Boot Web 是 Spring Boot 框架的一个重要模块，它简化了基于 Spring 的 Web 应用程序的开发过程。以下是一个 Spring Boot Web 项目的入门指南，涵盖了项目创建、代码编写、运行等关键步骤。

1. 项目创建

使用 Spring Initializr

Spring Initializr 是一个基于 Web 的工具，可帮助你快速生成 Spring Boot 项目骨架。

访问 Spring Initializr。
在该页面进行如下配置：
- Project：选择 Maven Project（如果习惯使用 Gradle 也可选择 Gradle）。
- Language：选择 Java。
- Spring Boot：选择合适的版本，通常建议选择最新的稳定版本。
- Group：填写项目的组织名，例如 com.example。
- Artifact：填写项目的名称，例如 spring - boot - web - demo。
- Dependencies：在搜索框中输入 Spring Web，然后选择该依赖添加到项目中。
点击 Generate 按钮下载生成的项目压缩包。
将下载的压缩包解压到本地目录，并用你喜欢的 IDE（如 IntelliJ IDEA 或 Eclipse）打开项目。

使用 IDE 创建

IntelliJ IDEA：
1. 打开 IntelliJ IDEA，选择 File -> New -> Project。
2. 在左侧选择 Spring Initializr，配置项目的 SDK、Group、Artifact 等信息。
3. 在 Dependencies 中搜索并添加 Spring Web 依赖。
4. 点击 Next 和 Finish 完成项目创建。

2. 项目结构分析

创建好的 Spring Boot Web 项目具有以下典型结构：

plaintext

spring-boot-web-demo
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── springbootwebdemo
│   │   │               ├── SpringBootWebDemoApplication.java
│   │   ├── resources
│   │   │   ├── application.properties
│   │   │   ├── static
│   │   │   ├── templates
│   ├── test
│       │   ├── java
│       │       └── com
│       │           └── example
│       │               └── springbootwebdemo
│       │                   ├── SpringBootWebDemoApplicationTests.java
├── pom.xml

SpringBootWebDemoApplication.java：这是项目的启动类，包含 main 方法，用于启动 Spring Boot 应用。
application.properties：用于配置应用的属性，如服务器端口、数据库连接信息等。
static 目录：用于存放静态资源，如 HTML、CSS、JavaScript 文件等。
templates 目录：用于存放模板文件，如 Thymeleaf 模板。
pom.xml：Maven 项目的配置文件，包含项目的依赖信息。

3. 编写简单的 Web 控制器

在 src/main/java 目录下的主包（如 com.example.springbootwebdemo）中创建一个控制器类。以下是一个简单的示例：

java

package com.example.springbootwebdemo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot Web!";
    }
}

@RestController：这是一个组合注解，相当于 @Controller 和 @ResponseBody 的组合，用于标记该类是一个 RESTful 风格的控制器，返回的数据会直接作为 HTTP 响应体。
@GetMapping("/hello")：表示该方法处理 HTTP GET 请求，请求路径为 /hello。

4. 配置应用属性（可选）

如果你想修改服务器的默认端口，可以在 application.properties（在src/main/resources 目录） 文件中添加以下配置：

properties

server.port=8081

上述配置将服务器的端口修改为 8081。

5. 运行项目

运行 SpringBootWebDemoApplication 类中的 main 方法来启动 Spring Boot 应用。启动成功后，控制台会输出类似以下信息：

plaintext

Started SpringBootWebDemoApplication in X.XXX seconds (JVM running for X.XXX)

6. 测试应用

打开浏览器或使用工具（如 Postman）访问 http://localhost:8080/hello（如果修改了端口则使用相应的端口），你将看到页面显示 Hello, Spring Boot Web!。

7. 处理表单数据和视图渲染（进阶）

处理表单数据

可以创建一个控制器方法来处理表单提交的数据。以下是一个简单的示例：

java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm() {
        return "form";
    }

    @PostMapping("/form")
    public String processForm(@RequestParam("name") String name, Model model) {
        model.addAttribute("message", "Hello, " + name + "!");
        return "result";
    }
}

视图渲染

使用 Thymeleaf 模板引擎进行视图渲染。首先，在 pom.xml 中添加 Thymeleaf 依赖：

xml

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

然后在 src/main/resources/templates 目录下创建 form.html 和 result.html 模板文件：

form.html

html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Example</title>
</head>
<body>
    <form action="#" th:action="@{/form}" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

result.html

html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Result</title>
</head>
<body>
    <p th:text="${message}"></p>
</body>
</html>

现在访问 http://localhost:8080/form，