福州市网站建设_网站建设公司_页面权重_seo优化
2026/1/11 4:42:46 网站建设 项目流程
目录
  • 学习目标
  • 前言
  • Thymeleaf 模板JSON 数据
      • 步骤 1: 创建 Spring Boot 项目
        • 使用 Spring Initializr 创建项目
        • 使用 IDE 创建项目
      • 步骤 2: 添加依赖
      • 步骤 3: 创建 Controller
      • 步骤 4: 新建index页面
      • 步骤 5: 运行应用程序
  • 表单提交
      • 步骤 1: 添加 Thymeleaf 依赖
        • 在 Maven 中添加依赖
      • 步骤2:创建实体类
      • 步骤 3: 创建 Controller 处理表单请求
      • 步骤 3: 创建 Thymeleaf 模板文件
        • `login.html`
        • `result.html`
      • 步骤 4: 运行应用程序
  • Spring Boot 处理JSON 数据的过程
      • 1.创建实体类
      • 2.创建视图页面
      • 3.控制器
      • 4.运行
  • 总结

学习目标

Spring Boot 的 Web 的开发

  • Thymeleaf 模板JSON 数据

前言

前端开发,也称为客户端开发,专注于用户界面和用户体验。后端开发,或服务器端开发,处理服务器、应用程序和数据库的逻辑。Web开发可以分为两大主要领域:前端开发和后端开发


Thymeleaf 模板JSON 数据

Thymeleaf 是一个的Java模板引擎,具备生成多种文本格式的能力,包括HTML、XML、JavaScript、CSS以及简单的纯文本。

创建一个基于 Thymeleaf 模板的 Spring Boot Web 应用程序相对简单。

步骤 1: 创建 Spring Boot 项目

首先,你需要创建一个新的 Spring Boot 项目。你可以通过 Spring Initializr 网站来创建,或者使用 IDE 如 IntelliJ IDEA 或 Eclipse。

使用 Spring Initializr 创建项目
  1. 访问 Spring Initializr。
  2. 选择项目元数据:
    • Project:Maven Project 或 Gradle Project
    • Language:Java
    • Packaging:Jar
    • Java:选择你安装的 Java 版本
  3. 添加依赖项:
    • Spring Web
    • Thymeleaf
  4. 选择默认的其他选项,点击生成按钮下载项目。

    我尝试更换Java版本,在IDEA中使用JDK1.8时一切正常,但当我切换到JDK17时遇到了错误。

为了解决这个问题,我选择了一个曲线救国的方法:回退版本。

我将父类依赖从3.3.4降低到了2.6.4。(避免报错,在我的电脑)

使用 IDE 创建项目

如果你使用的是支持 Spring Boot 的 IDE,可以在 IDE 中新建一个 Spring Boot 项目,并添加上述依赖。

步骤 2: 添加依赖

如果你使用的是 Maven,确保在pom.xml文件中添加以下依赖:

<dependencies> <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> </dependencies>
步骤 3: 创建 Controller

接下来,创建一个简单的控制器来处理 HTTP 请求:

package com.bushuo.demo01.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestThymeleafController { @RequestMapping("/index") public String test(){ //返回src/main/resources/templates/index.html return "index"; } }
步骤 4: 新建index页面

src/main/resources/templates目录下创建一个名为index.html的文件,并添加以下内容:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 >Welcome to Spring Boot!</h1> </body> </html>
步骤 5: 运行应用程序

现在,你可以运行你的 Spring Boot 应用了。在终端或命令提示符中,导航到项目的根目录并执行以下命令:

mvn spring-boot:run

或者在 IDE 中直接运行主类(通常包含@SpringBootApplication注解)。

表单提交

在 Spring Boot 应用程序中使用 Thymeleaf 实现表单提交及数据绑定的过程主要包括以下几个步骤:

  1. 添加 Thymeleaf 依赖
  2. 创建 Controller 处理表单请求
  3. 创建 Thymeleaf 模板文件
  4. 运行应用程序
步骤 1: 添加 Thymeleaf 依赖

确保项目已经包含了 Thymeleaf 依赖。如果你还没有添加,请参考之前的指导在pom.xml中添加相应的依赖。

在 Maven 中添加依赖
<dependencies> <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> </dependencies>
步骤2:创建实体类

在src/main/java 目录下,创建model包,创建实体类loginBean

package com.bushuo.demo01.model; public class LoginBean { String name; String role; public LoginBean() { } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getRole() { return role; } public void setRole(String role) { this.role = role; } }
步骤 3: 创建 Controller 处理表单请求

创建一个控制器来处理表单,并实现数据绑定。

步骤 3: 创建 Thymeleaf 模板文件

在src/main/resources/templates 目录下
创建两个 Thymeleaf 模板文件:一个用于显示表单 (login.html),另一个用于展示提交后的结果 (result.html)。

login.html

result.html

这个模板用于展示表单提交的结果,并提供一个返回按钮让用户回到表单页面。
在application.yml,

spring: thymeleaf: encoding: UTF-8 #开发时关闭缓存(模板只加载一次),不然没法看到实时页面需要重构或重启 cache: false prefix: classpath:/templates/ #(默认) suffix: .html
步骤 4: 运行应用程序

运行你的 Spring Boot 应用程序,打开浏览器并访问http://localhost:8080/toLogin,你应该能看到表单页面。填写用户名和电子邮件地址并提交表单后,你会看到结果页面,并且可以通过返回按钮回到表单页面。

Spring Boot 处理JSON 数据的过程

1.创建实体类

在com.bushuo.demo01包中,创建一个实体类来表示要处理的 JSON 数据。例如,创建一个 Person 类:

2.创建视图页面

在src/main/resources/templates 目录下,创建视图页面input.html.

3.控制器

4.运行


总结

通过这些步骤,可以在 Spring Boot 应用程序中使用 Thymeleaf 创建一个简单的表单,并处理表单提交的数据。可以根据实际需求进一步扩展这个示例,例如添加更多的表单字段、进行更复杂的表单验证、使用数据库存储数据等。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询