Thymeleaf页面静态化技术
Teymeleaf的使用
案例一：springboot搭建Thymeleaf
1、导入依赖
2、新建html页面模板
3、新建前端控制层Controller
4、新建启动类
1、导入依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.chawaner</groupId>
<artifactId>springboot-thymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<description>Thymeleaf案例操作</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.4.RELEASE</version>
</parent>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--thymeleaf配置-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
</project>
2、新建模板：demo1.html
<!DOCTYPE html>
<!--引入Thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf模板引擎</title>
</head>
<body>
<!--
需要在指定的Thymeleaf的标签内，使用Thymeleaf语法
th:text="" 输出文本内容
-->
<div th:text="${message}"></div>
</body>
</html>
3、新建前端控制器：TestController
/**
* @Author TeaBowl
* @Date 2020/12/15 17:03
* @Version 1.0
* Thymeleaf模板引擎
*/
@Controller
@RequestMapping(value = "/test")
public class TestController {
@GetMapping(value = "/hello")
public String hello(Model model){
model.addAttribute("message","hello Thymeleaf!");
return "demo1";
}
}
4、新建启动类：ThymeleafApplication
/**
* @Author TeaBowl
* @Date 2020/12/15 17:22
* @Version 1.0
*/
@SpringBootApplication
public class ThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(ThymeleafApplication.class,args);
}
}
5、测试
a.运行启动类ThymeleafApplication
b.打开浏览器：localhost：8080/test/hello
浏览器页面显示：hello Thymeleaf!
c.测试运行成功！
6、如何证明模板已经生效？
在浏览器显示页面上右键查看源码，
<!DOCTYPE html>
<!--引入Thymeleaf标签-->
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf模板引擎</title>
</head>
<body>
<!--
需要在指定的Thymeleaf的标签内，使用Thymeleaf语法
th:text="" 输出文本内容
-->
<div>hello Thymeleaf!</div>
</body>
</html>
7、关闭缓存
创建application.yml
spring:
thymeleaf:
cache: false #模板缓存
8、thymeleaf基本语法
- 输出文本内容
<div th:text="${message}"></div>
- th:action 指定表单提交的路径
<div>
<form id="login-form" th:action="@{/test/hello}">
<button>提交</button>
</form>
</div>
- th:each循环标签
首先，创建一个User类
/**
* @Author TeaBowl
* @Date 2020/12/16 15:55
* @Version 1.0
*/
@Data //省略setter&getter
@NoArgsConstructor //无参构造
@AllArgsConstructor //全参构造
public class User {
private Integer id;
private String name;
private String address;
}
然后，在前端控制器TestController中创建List集合，添加数据并存入到Model;
/**
* @Author TeaBowl
* @Date 2020/12/15 17:03
* @Version 1.0
* Thymeleaf模板引擎
*/
@Controller
@RequestMapping(value = "/test")
public class TestController {
@GetMapping(value = "/hello")
public String hello(Model model){
model.addAttribute("message","hello Thymeleaf!");
//创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
List<User> users = new ArrayList<>();
users.add(new User(1,"张三","深圳"));
users.add(new User(2,"李四","北京"));
users.add(new User(3,"王五","武汉"));
model.addAttribute("users",users);
return "demo1";
}
}
最后，从前端页面取数据
<div>
th:each循环标签
<table>
<tr>
<td>编号</td>
<td>ID</td>
<td>NAME</td>
<td>ADDRESS</td>
</tr>
<!--
循环
user,userSta:${users}
user接收users对象
userSta当前循环对象的状态
-->
<tr th:each="user,userSta:${users}">
<td th:text="${userSta.count}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.address}"></td>
</tr>
</table>
</div>
9、Map输出
首先，在TestController中定义一个Map对象
/**
* @Author TeaBowl
* @Date 2020/12/15 17:03
* @Version 1.0
* Thymeleaf模板引擎
*/
@Controller
@RequestMapping(value = "/test")
public class TestController {
@GetMapping(value = "/hello")
public String hello(Model model){
model.addAttribute("message","hello Thymeleaf!");
//创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
List<User> users = new ArrayList<>();
users.add(new User(1,"张三","深圳"));
users.add(new User(2,"李四","北京"));
users.add(new User(3,"王五","武汉"));
model.addAttribute("users",users);
//Map定义，存入Model
Map<String,Object> dataMap = new HashMap<String,Object>();
dataMap.put("No","123");
dataMap.put("address","深圳");
model.addAttribute("dataMap",dataMap);
return "demo1";
}
}
然后，从前端页面取数据
<div>
读取Map的两种方式<br>
1、知道Map的Key,直接根据Key获取数据<br>
3、不知道Map的Key,使用循环的方式获取Key,然后获取数<br>
<h3>方式一</h3>
<div>
获取Key=No的值:<span th:text="${dataMap.No}"></span><br>
获取Key=Address的值:<span th:text="${dataMap.Address}"></span>
</div>
<h3>方式二</h3>
<div th:each="m:${dataMap}">
<span th:text="${m.key}"></span>:<span th:text="${m.value}"></span>
</div>
</div>
10、Data日期输出
首先，在后台创建日期
/**
* @Author TeaBowl
* @Date 2020/12/15 17:03
* @Version 1.0
* Thymeleaf模板引擎
*/
@Controller
@RequestMapping(value = "/test")
public class TestController {
@GetMapping(value = "/hello")
public String hello(Model model){
model.addAttribute("message","hello Thymeleaf!");
//创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
List<User> users = new ArrayList<>();
users.add(new User(1,"张三","深圳"));
users.add(new User(2,"李四","北京"));
users.add(new User(3,"王五","武汉"));
model.addAttribute("users",users);
//Map定义，存入Model
Map<String,Object> dataMap = new HashMap<String,Object>();
dataMap.put("No","123");
dataMap.put("Address","深圳");
model.addAttribute("dataMap",dataMap);
//创建日期，存入Model
model.addAttribute("Now",new Date());
return "demo1";
}
}
然后，从前端页面取数据
<div>
Data数据获取
format参数：对象，输出格式
<div>
<span th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></span>
</div>
</div>
11、if条件
首先，在后台写数据，存入Model
//if条件，存入Model
model.addAttribute("age",22);
然后，在前端页面写条件判断
<div>
if条件判断,unless表示条件不成立时
<div>
<span th:if="${age>=18}">成年人</span>
<span th:unless="${age<18}">成年人</span>
</div>
</div>
12、th:fragment 定义一个模块
新建一个模块：footer.html
<!DOCTYPE html>
<html lang="en">
<!--引入Thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>当作一个模块</title>
</head>
<body>
<!--定义一个模块,命名为copy-->
<div id="C" th:fragment="copy">
关于我们<br>
</div>
</body>
</html>
然后，把定义好的模块引入到前端页面
<div>
引入模块footer<br>
th:include="footer::copy"引入footer页面里的copy
<div>
<div id="A" th:include="footer::copy"></div>
</div>
</div>
Thymeleaf页面静态化技术的更多相关文章
- php页面静态化技术；学习笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 页面静态化技术Freemarker技术的介绍及使用实例.
一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...
- java秒杀系列（2）- 页面静态化技术
前言 通过代码片段分别介绍服务端渲染.客户端渲染.对象缓存三种方式的写法. 代码片段仅供参考,具体实现需要根据业务场景自行适配,但思想都是一样. 一.服务端渲染方式 1.接口返回html页面的设置 @ ...
- 高性能Java Web 页面静态化技术(原创)
package com.yancms.util; import java.io.*; import org.apache.commons.httpclient.*; import org.apache ...
- 高性能Java Web 页面静态化技术
package com.yancms.util; import java.io.*; import org.apache.commons.httpclient.*; import org.apache ...
- Freemarker页面静态化技术，activemq监听页面变动
初步理解: 架构优化: 静态页面的访问速度优于从缓存获取数据的动态页面的访问速度: Freemarker: 导包 模板:hello.ftl <!DOCTYPE html> <html ...
- Freemarker 页面静态化技术使用入门案例
在访问 新闻.活动.商品 详情页面时, 路径可以是 xx[id].html, 服务器端根据请求 id, 动态生成 html 网页,下次访问数据时,无需再查询数据,直接将 html 静态页面返回.这样一 ...
- Django框架开发web网站的网页优化—页面静态化
网站优化-页面静态化 1)概念 提前将页面所用到的数据从数据库查询出来,然后生成一个静态页面,之后用户来访问的时候,直接返回静态页面. 举例:首页静态化:获取首页用到的数据表中的数据,生成静态首页in ...
- 大型网站提速关键技术(页面静态化,memcached,MySql优化)(三)
页面静态化的技术实现有两种方式 使用PHP自己的缓存机制 先说明一下OB缓存的机制. ob1.php 代码:说明的ob的各个用法->项目中 ☞ 如何打开ob缓存 ① 配置php.ini ...
随机推荐
- Html：行级元素和块级元素标签列表
块级元素 div p h1-h6 form ul ol dl dt dd li table tr td th hr blockquote address table menu pre HTML5: h ...
- ios多线程开发基础
多线程编程:下载数据时,开辟子线程,减少阻塞时间,和主线程并发运行,提升用户体验 1.Thread 1>新建Thread对象,带一selector方法,调用start方法,开启子线程 2> ...
- Java异常情况
从网上了解了这些Java异常,遇到过一些,大部分还没遇到: 1. SQLException:操作数据库异常类. 2. ClassCastException:数据类型转换异常. 3. NumberFor ...
- lxml的使用（节点与xpath爬取数据）
lxml安装 lxml是python下功能很丰富的XML和HTML解析库,性能非常的好,是对libxml3和libxlst的封装.在Windows下载这个库直接使用 pip install lxml ...
- nacos Connection refused (Connection refused)
记录一次"异常bug",具体信息如下.主要是记录一下处理过程,可能口水话比较多,如果想看结果,直接往后拉即可. 最后一行 起初,运维同事找到我,跟我说程序出问题了,系统升级,一直连 ...
- 在Java web项目中防止用户注销后使用浏览器中的“后退”按钮返回注销前页面
一背景 公司安全整改, 要求:系统中对于关键业务操作应确保使用浏览器"后退"功能无法回到上一步操作界面. 提供:凭证提供所有被检查系统关键业务操作后回退视频,视频显示关键业务操作后 ...
- wait()、notify()、notifyAll()（三）
有新理解持续更新 轮询 线程本身是操作系统中独立的个体,但是线程与线程之间不是独立的个体,因为它们彼此之间要相互通信和协作. 想像一个场景,A线程做int型变量i的累加操作,B线程等待i到了10000 ...
- Intouch/ifix语音报警系统制作(3-利用自定义过程和函数，重构先前版本)
在语音模块嵌入了半年左右的时间,经过实际使用发现,代码冗余,重复太多,维护较难,新增也不易,故而对整个框架进行整理,实现简单添加,维护容易的目的. 1.代码优化 1.1构建自定义过程 name 参数代 ...
- <题解>[IOI2019]景点划分
题目传送门(luogu) 题目传送门(loj) 这个题对我来说可以算是超出了我的能力范围 被学长拿来教我做构造,构造题真简单,构造题真是人,构造题真能手切... 首先对于本题,必须要知道dfs树这东西 ...
- root密码找回
1,启动系统时,按上下键,选择第一项,按e. 2,编辑kernel中,将rhgb quiet 替换作init=/bin/sh.回车确认修改 3,根据提示按b键继续启动. 4,进入bash窗口并有管理员 ...