关于后端:别再写jsp了Thymeleaf它不香吗

6次阅读

共计 4028 个字符，预计需要花费 11 分钟才能阅读完成。

啥是 Thymeleaf 在学 Thymeleaf 之前咱们先看一下应用 jsp 开发遇到的次要问题：jsp 的痛点 1. 页面蕴含大量 java 代码，代码太凌乱 <%@ page contentType=”text/html;charset=UTF-8″ language=”java” %>
<html>
<head>
<title>jsp</title>
</head>
<body>
<%
```
String name = (String)request.getAttribute("name");
int age = (int)request.getAttribute("age");
```
%>
<p> 姓名：<%=name%></p>
<p> 年龄：<%=age%></p>
</body>
</html>
2.jsp 技术曾经是很多年前的老技术了，当初的支流框架都不举荐应用，根本被淘汰了。模板引擎技术尽管 jsp 根本被淘汰了，然而它的技术替代品如雨后春笋，层不出穷。模板引擎技术就是其中的代表。咱们都晓得传统的页⾯开发通常采⽤ HTML+ JS 技术，⽽当初⼤局部⽹站都采⽤标签化 + 模块化的设计。模板引擎技术就是依据这种⽅式，使⽤户界⾯与业务数据拆散⽽产⽣的。它能够⽣成特定格局的⽂档，⽤于⽹站的模板引擎就会⽣成⼀个规范的 HTML ⽂档在原有的 HTML 页⾯中来填充数据，最终达到渲染页⾯的⽬的。模板引擎技术说白了就是把数据和页⾯整合在⼀起的技术。Thymeleaf 简介 Thymeleaf 是一种能够代替 jsp 的模板引擎技术。它有如下长处：1. 与 SpringBoot 完满整合：SpringBoot 提供了 Thymeleaf 的默认配置，咱们能够像以前操作 jsp 一样来操作 Thymeleaf。2. 开箱即用：反对 JSTL 格局语法。3. 多方言反对：Thymeleaf 提供 spring 规范方言和一个与 SpringMVC 完满集成的可选模块，能够疾速的实现表单绑定、国际化等性能。2. 环境搭建这里咱们创立 springboot 我的项目。1. 引入依赖 <dependencies>
```
 
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 
 <dependency>
     <groupId>org.projectlombok</groupId>
     <artifactId>lombok</artifactId>
     <optional>true</optional>
 </dependency>
 
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-test</artifactId>
     <scope>test</scope>
 </dependency>
```
</dependencies>
2.Thymeleaf 配置 application.ymlserver:
port: 8081
servlet:
context-path: /thymeleaf-demo

spring:
thymeleaf:

# thymeleaf 配置
cache: false # 禁用缓存，批改完实时展现数据
prefix: classpath:/templates/ # 文件所在位置
suffix: .html # 后缀

web:

resources:
  static-locations: classpath:/static/ # 动态资源

在 springboot 的配置文件中，咱们配置了 thymeleaf 的默认前缀和后缀。还配置了动态资源的拜访门路。

3.html 文件引入 Thymeleaf 的命名空间 xmlns:th=”http://www.thymeleaf.org”

html 文件必须引入 thymeleaf 的命名空间能力应用相干语法。3. 罕用语法 1.th:text 作用：如果变量有值，则替换标签外面的默认值，否则展现标签的默认值。例如：@GetMapping(“hello”)
public String hello(Model model) {

model.addAttribute("msg", "黄沙百战穿金甲，不破楼兰终不还！");
return "hello";

}
<!DOCTYPE html>
<html lang=”en” xmlns:th=”http://www.thymeleaf.org”>
<head>

<meta charset="UTF-8">
<title>msg</title>

</head>
<body>
<p>————- 诗句赏析 ————-</p>
<p th:text=”${msg}”> 人生得意须尽欢，莫使金樽空对月。</p>
</body>
</html>
测试：

2.th:href 作用：用来指向文件的 url。例如：<link rel=”stylesheet” type=”text/css” th:href=”@{css/login.css}”/>

3.th:action 作用：用来配置 form 表单的申请门路 th:action=”@{/login}”
例如：<form th:action=”@{/login}” method=”post”>

 姓名：<input type="text" name="username"/>
明码：<input type="password" name="password"/>
<input type="submit" class="button" value="登录"/>

</form>
4.th:if 作用：条件判断，如果判断为真就显示数据或者执行相干操作。例如：<p th:if=”${username!=null && username!=”}”> 欢送你：<span th:text=”${username}”></span></p>
复制代码 5.th:src 作用：用来指向文件的 url。例如：<img th:src=”@{images/title.jpg}” >
复制代码 6.th:onclick 作用：绑定事件。例如：删除

小案例场景：用户登录胜利之后，展现用户信息和用户列表。
controller/ 进入登录界面 /
@GetMapping(“/toLogin”)
public String toLogin() {
return “login”;
}

@PostMapping(“/login”)
public String login(Model model, String username, String password) {

// 用户名
model.addAttribute("username", username);
// 用户列表信息
List<User> userList = Stream.of(new User(1, "张三", 18), new User(2, "李四", 19)
        , new User(3, "王五", 20)).collect(Collectors.toList());
model.addAttribute("userList", userList);
return "index";

}
login.html<!DOCTYPE html>
<html lang=”en” xmlns:th=”http://www.thymeleaf.org”>
<head>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" th:href="@{css/login.css}"/>
<title> 登录界面 </title>

</head>
<body>
<p class=”login_title”> 登录页面 </p>
<form th:action=”@{/login}” method=”post”>

 姓名：<input type="text" name="username"/>
明码：<input type="password" name="password"/>
<input type="submit" class="button" value="登录"/>

</form>
</body>
</html>
index.html<!DOCTYPE html>
<html lang=”en” xmlns:th=”http://www.thymeleaf.org”>
<head>

<meta charset="UTF-8">
<title> 用户列表 </title>

</head>
<body>
<p th:if=”${username!=null && username!=”}”> 欢送你：<span th:text=”${username}”></span></p>
<img th:src=”@{images/title.jpg}”>
<p>————- 用户列表 ————-</p>

ID	姓名	年龄	操作
<span th:text=”${user.id}”></span>	<span th:text=”${user.name}”></span>	<span th:text=”${user.age}”></span>	删除

function deleteUser(id) {console.log("id:" + id);
}

</script>
</body>
</html>
实现代码：链接: https://pan.baidu.com/s/16Rpp…
提取码: ccfn

正文完

后端

发表至：后端

2022-12-17

0

关于后端:如何提升QPSRT

关于后端:基于-DubboAdmin-实现根据请求条件路由

关于后端:含文档PPT源码等精品spring-bootMySQL婚纱影楼管理系统vue包远程安装配置

关于后端:FoxnicSQL-8-DAO-特性-数据查询

关于nginx:高可用系列文章之一-概述

关于后端:别再写jsp了Thymeleaf它不香吗

站内搜索