当前位置:网站首页>Creation and use of thymeleaf template
Creation and use of thymeleaf template
2022-07-05 14:58:00 【fengyehongWorld】
Reference material :
One . Preparation
backstage application.yml
The configuration file
# Custom configuration information
search:
# At most 300 Data
max-count: 300
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
// Mark this class as a profile class , And took an alias
@Configuration("configInfo")
public class ConfigInfo {
// Be sure to set it to public, It can't be private, otherwise thymeleaf cannot access
@Value("${search.max-count}")
public String searchCount;
}
The front desk commonModule.js
modular js file , All functions are exported through the module method
const personUtils = {
getName() {
console.log(' His name is Jia Feitian ');
},
getAge() {
console.log(' Age is 20 year ');
}
};
const sendMail = () => {
console.log(' Send E-mail ');
};
export {
personUtils,
sendMail
};
test1.js
Test page js file , Modules are used in this file js Put it in window Module functions on and background configuration information
$(function() {
// Call template html Binding in window Method on object
window.personUtils.getName();
setTimeout(() => {
// searchCount From the common template js in
console.log(searchCount);
}, 200);
});
Two . Template file
1.
If each page in the project needs to be introduced separately js and css Words , Bad maintenance
So by creating common head, Batch import .2.
Each page introduces head after , On the original page head It will fail , Will be in the template head overwrite . But in addition to introducing commonalities in some pages head Beyond our needs , You also need customization that will not be overwritten by the template head.3.
Precisely because2.
The needs of , That's why head(id,links,scripts,styles,title), coordination?: _
To ensure thatlinks,scripts
When it's worth it , Content and templates that introduce each page separately head The contents in are cited together , When there is no value, no operation is performed .
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<!-- Common head -->
<head th:fragment="head(id,links,scripts,styles,title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- plug-in unit js-->
<script type="text/javascript" th:src="@{/js/public/jquery-3.6.0.min.js}"></script>
<!-- common js-->
<script type="text/javascript" th:src="@{/js/common/common.js}"></script>
<!-- Common module js -->
<script type="module" th:inline="javascript"> // From the custom module js The functions in are put into window In the object import {
personUtils, sendMail } from /*[[@{/js/common/commonModule.js}]]*/ ''; window.personUtils = personUtils; window.sendMail = sendMail; </script>
<!-- Background common data -->
<script th:inline="javascript" type="text/javascript"> // Information in the background configuration file const searchCount = [[${
@configInfo.searchCount}]]; </script>
<!-- Page referencing template , Custom introduced js 「 ?: _ 」 Said when scripts When it doesn't exist , Do not perform the replacement operation -->
<th:block th:replace="${scripts} ?: _" />
<!-- Pages js, adopt id The variable realizes that each picture introduces its own js file -->
<script type="text/javascript" th:src="@{
'/js/business/' + ${id} + '.js'}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/common/common.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/public/jquery-ui.min.css}" />
<!-- Page referencing template , Custom introduced css -->
<th:block th:replace="${styles} ?: _" />
<!-- Pages css, adopt id The variable realizes that each picture introduces its own css file -->
<link rel="stylesheet" type="text/css" th:href="@{
'/css/business/' + ${id} + '.css'}" />
<!-- Page referencing template , stay header Written on css -->
<th:block th:replace="${links} ?: _" />
<link rel="icon" th:href="@{/img/logo.ico}" />
<title th:replace="${title} ?: _"> Title in template </title>
</head>
<body>
<div th:fragment="Admin_Content">
<!-- When the clip is used , Pages that use fragments will be right [[*{name}]] To analyze -->
Hello! , Honorable Administrator , Your name [[*{name}]]
</div>
<footer th:fragment="footer_fragment">
Copyright Test system footer
</footer>
</body>
</html>
3、 ... and . page
Page one
1.
links = ~{::link} Medium links As a template head Variable name in , ~{::link} It refers to the current page head Medium link label , If the current page has head Does not exist in the link Label words , just so so **links = ~{}** To express .2.
You can decide whether fragments in the template should be introduced according to the permissions of the currently logged in user
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head( id = 'test1' ,links = ~{::link} ,scripts = ~{::script} ,styles = ~{::style} ,title = ~{::title} )">
<!-- This page completely uses the header, There is no customized content -->
</head>
<body>
<div id="container" th:object="${entity}">
<!-- When isAdmin by true When , Instead of When isAdmin by false When : _ To say nothing , therefore div The original content in the will be preserved : ~{} Means to replace with an empty fragment , So the whole div Will be emptied -->
<div th:replace="*{isAdmin} ? ~{layout/layout :: Admin_Content} : _">
Hello , Ordinary users , Your name is [[*{name}]]
</div>
<hr>
<th:block th:replace="*{isAdmin} ? ~{layout/layout :: Admin_Content} : ~{}">
<div> Hello , Ordinary users , Your name is [[*{name}]]</div>
</th:block>
<hr>
</div>
<!-- Introduce the footer in the template -->
<div th:replace="layout/layout :: footer_fragment"></div>
</body>
</html>
Open the page 1 When ,head Part of the effect
When using administrator login , Administrator fragment is used
🥰JS The result of function execution in
Page 2
1.
On page head Added in Customize title , Therefore, common in the template is not used title.2.
On page head Added in style label , Finally added style The label reflects html Of head Ministry .3.
There is no extra css and js The file import , So you can use null perhaps ~{} To occupy the parameter .
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head( id = 'test2' ,links = null ,scripts = ~{} ,styles = ~{::style} ,title = ~{::title} )">
<!-- stay header Add style style -->
<style> div {
color: red; } </style>
<!-- Do not use the title in the template , Use a custom title -->
<title>test2 Title of the page </title>
</head>
<body>
<div>
I am a test2 Content in the page
</div>
</body>
</html>
边栏推荐
- 浅谈Dataset和Dataloader在加载数据时如何调用到__getitem__()函数
- Microframe technology won the "cloud tripod Award" at the global Cloud Computing Conference!
- 想问下大家伙,有无是从腾讯云MYSQL同步到其他地方的呀?腾讯云MySQL存到COS上的binlog
- 市值蒸发超百亿美元,“全球IoT云平台第一股”赴港求生
- C language -- structure and function
- R 熵权法计算权重及综合得分
- 想进阿里必须啃透的12道MySQL面试题
- Run faster with go: use golang to serve machine learning
- 危机重重下的企业发展,数字化转型到底是不是企业未来救星
- Is the securities account given by the head teacher of qiniu school safe? Can I open an account?
猜你喜欢
Implement a blog system -- using template engine technology
有一个强大又好看的,赛过Typora,阿里开发的语雀编辑器
729. 我的日程安排表 I :「模拟」&「线段树(动态开点)」&「分块 + 位运算(分桶)」
你童年的快乐,都是被它承包了
IPv6与IPv4的区别 网信办等三部推进IPv6规模部署
Select sort and bubble sort
【NVMe2.0b 14-9】NVMe SR-IOV
qt creater断点调试程序详解
How to paste the contents copied by the computer into mobaxterm? How to copy and paste
美团优选管理层变动:老将刘薇调岗,前阿里高管加盟
随机推荐
【leetcode周赛总结】LeetCode第 81 场双周赛(6.25)
Mongdb learning notes
Is it OK to open the securities account on the excavation finance? Is it safe?
R 熵权法计算权重及综合得分
安装配置Jenkins
Crud of MySQL
超级哇塞的快排,你值得学会!
Explain Vue's plan to clean up keepalive cache in time
CPU设计实战-第四章实践任务二用阻塞技术解决相关引发的冲突
qt creater断点调试程序详解
Topology可视化绘图引擎
Postgresql 13 安装
[recruitment position] Software Engineer (full stack) - public safety direction
【华为机试真题详解】字符统计及重排
GPS original coordinates to Baidu map coordinates (pure C code)
Does maxcompute have SQL that can query the current storage capacity (KB) of the table?
Fr exercise topic - simple question
CODING DevSecOps 助力金融企业跑出数字加速度
在Pytorch中使用Tensorboard可视化训练过程
Handwriting promise and async await