目录
- 学习目标
- 前言
- 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 创建项目
- 访问 Spring Initializr。
- 选择项目元数据:
- Project:Maven Project 或 Gradle Project
- Language:Java
- Packaging:Jar
- Java:选择你安装的 Java 版本
- 添加依赖项:
- Spring Web
- Thymeleaf
- 选择默认的其他选项,点击生成按钮下载项目。
我尝试更换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 实现表单提交及数据绑定的过程主要包括以下几个步骤:
- 添加 Thymeleaf 依赖
- 创建 Controller 处理表单请求
- 创建 Thymeleaf 模板文件
- 运行应用程序
步骤 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 创建一个简单的表单,并处理表单提交的数据。可以根据实际需求进一步扩展这个示例,例如添加更多的表单字段、进行更复杂的表单验证、使用数据库存储数据等。