别再写jsp了,Thymeleaf它不香吗?

news2024/11/16 7:37:33

  1. 啥是 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>

     <!-- thymeleaf -->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
     </dependency>
     <!-- web -->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
     </dependency>
     <!-- lombok -->
     <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <optional>true</optional>
     </dependency>
     <!-- test -->
     <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作用:绑定事件。例如:删除

  1. 小案例场景:用户登录成功之后,展示用户信息和用户列表。


    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>删除

<script>

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

</script>
</body>
</html>
完成代码:链接: https://pan.baidu.com/s/16Rpp...
提取码: ccfn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/98451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

webpack实现自动代码编译

前置 使用webpack构建开发的代码&#xff0c;为了运行需要有两个操作&#xff1a; 操作一&#xff1a;npm run build&#xff0c;编译相关的代码。操作二&#xff1a;通过live server或者直接通过浏览器&#xff0c;打开index.html代码&#xff0c;查看效果。为了完成自动编译&…

《图解TCP/IP》阅读笔记(第五章 5.7、5.8)—— IP隧道与其他IP相关技术

5.7 IP隧道 IP隧道技术顾名思义&#xff0c;是用于在两片网络区域间直接建立通信的通路&#xff0c;而绕过此间的其他网络的一种技术&#xff0c;如下图所示&#xff1a; 网络A与网络B使用IPv6技术&#xff0c;使用IP隧道技术&#xff0c;便可以绕过网络C。 那么其工作原理是…

机器学习 波士顿房价预测 Boston Housing

目录 一&#xff1a;前言 二&#xff1a;模型预测(KNN算法) 三&#xff1a;回归模型预测比对 一&#xff1a;前言 波士顿房价是机器学习中很常用的一个解决回归问题的数据集 数据统计于1978年&#xff0c;包括506个房价样本&#xff0c;每个样本包括波士顿不同郊区房屋的13种…

SQL - MySQL回表

一、回表概念&#xff1b;现象 回表&#xff0c;顾名思义就是回到表中&#xff0c;也就是先通过普通索引&#xff08;我们自己建的索引不管是单列索引还是联合索引&#xff0c;都称为普通索引&#xff09;扫描出数据所在的行&#xff0c;再通过行主键ID 取出索引中未包含的数据…

[附源码]计算机毕业设计Python创新创业管理系统(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

Trie(Trie字符串统计)【实质就是二维数组 表示 链表】【二维数组的第一行就是 头结点】

欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09; 文章字体风格&#xff1a; 红色文字表示&#xff1a;重难点✔ 蓝色文字表示&#xff1a…

探索MapReduce

文章目录一&#xff0c;案例分析&#xff08;一&#xff09;TopN分析法介绍&#xff08;二&#xff09;案例需求二&#xff0c;案例实施&#xff08;一&#xff09;准备数据文件&#xff08;1&#xff09;启动hadoop服务&#xff08;2&#xff09;在虚拟机上创建文本文件&#…

ArcGIS中的OBJECTID、FID 和 OID 的区别!不要傻傻分不清

喜欢就关注我们吧 时常有很多我朋友分不清OBJECTID、FID 和 OID有什么区别&#xff0c;不懂得怎么应用和管理&#xff0c;今天我们来说个明白。 ArcGIS Desktop 产品要求独立表和属性表均具有 ObjectID字段&#xff0c;该字段包含唯一的长整型用于标识每个记录。 此 ID 由 Esri…

第二证券|元宇宙发展规划出炉,3只元宇宙概念股估值创年内新低

本月以来&#xff0c;北上资金加仓23只元国际概念股。 12月15日晚间&#xff0c;浙江省发改委等5部门联合印发《浙江省元国际工业开展举动计划&#xff08;2023—2025年&#xff09;》&#xff08;以下简称《计划》&#xff09;。《计划》中说到&#xff0c;到2025年&#xff0…

查找外文文献必备网站

查找下载外文文献不仅先要找到文献数据库资源&#xff0c;并且还需要有数据库的文献下载权限&#xff0c;如果你没有文献数据库使用权限就用下面这个方法。 文献党下载器&#xff08;wxdown.org&#xff09;有资源有权限&#xff0c;覆盖全科。下面举几个例子&#xff0c;用文…

脑电图分类任务中深度神经网络模型的数据增强:综述2021

Data Augmentation for Deep Neural Networks Model in EEG Classification Task: A Review 脑电图&#xff08;EEG&#xff09;的分类是测量神经活动节奏振荡的关键方法&#xff0c;是脑机接口系统&#xff08;BCI&#xff09;的核心技术之一。然而&#xff0c;从非线性和非平…

RNA-seq 详细教程:似然比检验(13)

学习内容 应用似然比检验 (LRT) 进行假设检验将 LRT 生成的结果与使用 Wald 检验获得的结果进行比较从 LRT 显著基因列表中识别共享表达谱似然比检验 在评估超过两个水平的表达变化时&#xff0c;DESeq2 还提供似然比检验作为替代方法。被确定为重要的基因是那些在不同因子水平…

Vue基础6

Vue基础6收集表单数据过滤器局部过滤器全局过滤器内置指令v-textv-html使用安全性cookie工作原理v-html不安全案例v-cloak指令v-once指令v-pre指令自定义指令函数式对象式自定义命名组合式全局自定义指令自定义指令总结&#xff1a;收集表单数据 <!DOCTYPE html> <ht…

VMware、linux虚拟机设置网络实现虚拟机与主机网络互通

需要配置三个方面才可以&#xff0c;即&#xff1a;WMware网络配置、windows主机网络配置、虚拟机网络配置。 首先&#xff0c;确认VMware虚拟机设置中配置的网络连接方式为&#xff1a;NAT模式 可以在VMware上方的菜单中找到&#xff1a;虚拟机---->设置&#xff0c;然后…

HC-SR04超声波测距模块介绍

超声波简介 超声波是由机械振动产生的, 可在不同介质中以不同的速度传播, 具有定向性好、能量集中、传输过程中衰减较小、反射能力较强等优点。超声波传感器可广泛应用于非接触式检测方法,它不受光线、被测物颜色等影响, 对恶劣的工作环境具有一定的适应能力, 因此在水文液位测…

毕业设计 - 基于JSP_Servlet校园二手交易平台设计于实现【源码+论文】

文章目录前言一、项目设计1. 模块设计2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 java web 设计项目: 基于JSP/Servlet校园二手交易平台设计于实现 一、项目设计 1. 模块设计 系统完成的主要功能有&#xff1a;用户设置功能、发布信息功能、信息管理功能…

Android中AP和BP概念

AP和BP 大多数的手机都含有两个处理器。操作系统、用户界面和应用程序都在Application Processor(AP)上执行&#xff0c;AP一般采用ARM芯片的CPU。而手机射频通讯控制软件&#xff0c;则运行在另一个分开的CPU上&#xff0c;这个CPU称为Baseband Processor(BP)。 把射频功能放…

《API安全技术与实战》 读书笔记 API的前生今世和API安全的演进

文章目录一、API的前生今世&#xff08;1&#xff09;4中API表现形式&#xff08;2&#xff09;基于技术形式的类型划分的API二、API安全的演进&#xff08;1&#xff09;什么是API安全&#xff08;2&#xff09;常见的API安全漏洞类型一、API的前生今世 &#xff08;1&#x…

Nacos系列——Nacos概述(2.x版本)1-1

Nacos系列——Nacos概述&#xff08;2.x版本&#xff09;1-1前言Nacos概述&#xff08;2.x版本&#xff09;文档地址关键特性服务发现和服务健康监测动态配置服务动态 DNS 服务服务及其元数据管理Nacos地图核心概念地域可用区接入点命名空间配置配置管理配置项配置集配置集 ID配…

[阶段4 企业开发进阶] 7. 微服务

文章目录1 微服务1.1 微服务概念1.2 SpringCloud1.3 工程搭建1.4 支付模块构建cloud-provider-payment-80011 微服务 1.1 微服务概念 概念 Microservice architectures are the ‘new normal’. Building small, self-contained, ready to run applications can bring great f…