前書き
記事コンテンツ出力のソース：Lagou Education Java High Salary Training Camp;
thymeleafのSpringboot統合はあまり実用的ではありません。多くの企業がプロジェクトをフロントエンドとバックエンドから分離し、インターフェースを介して相互作用しているためです。しかし、バックエンドの担当者はフロントエンドについてはあまり知りませんが、効果を確認するために何かをしたいと考えています。したがって、thymeleafを統合し、いくつかの基本的な文法を習得して、うまく操作できます。
使用する
最初に依存関係を紹介して、プロジェクトで使用できるようにします。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
htmlファイルで使用するには、インポートする必要があります
<html lang="en" xmlns:th="http://www.thymeleaf.org">
次に使用できます。
使用する前に、これらの基本的な文法を見てみましょう。
ラベル
標準式
変数式：$ {…}
主にコンテキストのパラメータ変数を取得します
<p th:text="${title}">默认值</p>
同時に、Thymeleafは組み込みオブジェクトを提供します
# ctx:上下文对象
# vars:上下文变量
# locale：上下文区域设置
# request：HttpServletRequest 对象
# response：HttpServletResponse对象
# session：HttpSession对象
# servletContext：ServletContext 对象
例えば：
The locale country is: <span th:text="${#locale.country}">US</span>.
変数式を選択：* {…}
通常、選択したオブジェクトから属性値を取得します
<div th:object="${book}">
<p>titile: <span th:text="*{title}">ຽ᷌</span>.</p>
</div>
メッセージ式＃{…}
メッセージ式は主に、Thymeleafテンプレートページの国際的なコンテンツを動的に置き換えて表示するために使用されます。
リンク式@ {…}
通常、ページジャンプまたはリソースの紹介に使用されます。
<a th:href="@{http://localhost:8080/order/details(orderId=${o.id})}">view</a> <a th:href="@{/order/details(orderId=${o.id})}">view</a>
厳密に従ってください：
@ {Path（parameter name = parameter value、parameter name = parameter value ...）}
フラグメント式〜{…}
フラグメントテンプレートをマークし、必要に応じて他のテンプレートに移動または渡すために使用されます
<div th:insert="~{thymeleafDemo::title}"></div>
以下は、thymeleafを統合するlogin.htmlページです。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<title>用户登录界面</title>
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin">
<img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
<input type="text" class="form-control"
th:placeholder="#{login.username}" required="" autofocus="">
<input type="password" class="form-control"
th:placeholder="#{login.password}" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录</button>
<p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2019</span>-<span th:text="${currentYear}+1">2020</span></p>
<a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>
</form>
</body>
</html>
最終的な表示効果は次のとおりです。
個人のブログインターフェイスを構築する
次に、デモを作成し、mybatisを統合し、インターフェイスに記事リストを表示し、pageHelperの統合を実現してページング効果を実現しましょう。インターフェイスの前のページと次のページを表示します。
1.テーブルを作成します。sqlは次のとおりです。
create DATABASE blog_system
DROP TABLE IF EXISTS t_article;
CREATE TABLE t_article (
id int(11) NOT NULL AUTO_INCREMENT,
title varchar(50) NOT NULL COMMENT '文章标题',
content longtext COMMENT '文章具体内容',
created date NOT NULL COMMENT '发表时间',
modified date DEFAULT NULL COMMENT '修改时间',
categories varchar(200) DEFAULT '默认分类' COMMENT '文章分类',
tags varchar(200) DEFAULT NULL COMMENT '文章标签',
allow_comment tinyint(1) NOT NULL DEFAULT '1' COMMENT '是否允许评论',
thumbnail varchar(200) DEFAULT NULL COMMENT '文章缩略图',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of t_article
-- ----------------------------
INSERT INTO t_article VALUES ('1', '2019新版Java学习路线图','Java学习路线图具体内容具体内容具体内容具体内容具体内容具体内容具体内容','2019-10-10', null, '默认分类', '‘2019,Java,学习路线图', '1', null);
INSERT INTO t_article VALUES ('2', '2019新版Python学习线路图','据悉，Python已经入驻小学生教材，未来不学Python不仅知识会脱节，可能与小朋友都没有了共同话题~~所以，从今天起不要再找借口，不要再说想学Python却没有资源，赶快行动起来，Python等你来探索' ,'2019-10-10', null, '默认分类', '‘2019,Java,学习路线图', '1', null);
INSERT INTO t_article VALUES ('3', 'JDK 8——Lambda表达式介绍',' Lambda表达式是JDK 8中一个重要的新特性，它使用一个清晰简洁的表达式来表达一个接口，同时Lambda表达式也简化了对集合以及数组数据的遍历、过滤和提取等操作。下面，本篇文章就对Lambda表达式进行简要介绍，并进行演示说明' ,'2019-10-10', null, '默认分类', '‘2019,Java,学习路线图', '1', null);
INSERT INTO t_article VALUES ('4', '函数式接口','虽然Lambda表达式可以实现匿名内部类的功能，但在使用时却有一个局限，即接口中有且只有一个抽象方法时才能使用Lamdba表达式代替匿名内部类。这是因为Lamdba表达式是基于函数式接口实现的，所谓函数式接口是指有且仅有一个抽象方法的接口，Lambda表达式就是Java中函数式编程的体现，只有确保接口中有且仅有一个抽象方法，Lambda表达式才能顺利地推导出所实现的这个接口中的方法' ,'2019-10-10', null, '默认分类', '‘2019,Java,学习路线图', '1', null);
INSERT INTO t_article VALUES ('5', '虚拟化容器技术——Docker运行机制介绍','Docker是一个开源的应用容器引擎，它基于go语言开发，并遵从Apache2.0开源协议。使用Docker可以让开发者封装他们的应用以及依赖包到一个可移植的容器中，然后发布到任意的Linux机器上，也可以实现虚拟化。Docker容器完全使用沙箱机制，相互之间不会有任何接口，这保证了容器之间的安全性' ,'2019-10-10', null, '默认分类', '‘2019,Java,学习路线图', '1', null);
2.次のように、springbootプロジェクトを作成し、依存関係を導入します。
<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.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--分页助手-->
<!--导入pagehelper相关依赖-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
3.エンティティークラスを作成します。
public class Article {
private Integer id;
private String title;
private String content;
private Date created;
private Date modified;
private String categories;
private String tags;
private Integer allowComment;
private String thumbnail;
getter()/setter()
}
5.マッパーインターフェイスを作成する
@Mapper
public interface ArticleMapper {
List<Article> selectList();
}
6.マッパーに対応するxmlファイルを作成します
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.quellanan.springboothomework.mapper.ArticleMapper">
<select id="selectList" resultType="article">
select * from tb_article
</select>
</mapper>
7.サービスと実装クラスを作成します。PageHelperを使用してページングを実装する
public interface ArticleService {
List<Article> selectList(int index,int size);
}
@Service
public class ArticleServiceImpl implements ArticleService {
@Autowired
private ArticleMapper articleMapper;
@Override
public List<Article> selectList(int index,int size) {
PageHelper.startPage(index,size);
List<Article> articles = articleMapper.selectList();
return articles;
}
}
8.コントローラーレイヤーインターフェイスを作成する
@Controller
public class ArticleController {
@Autowired
private ArticleService articleService;
@RequestMapping("/")
public String list(Model model, @RequestParam(required = false)Integer index, @RequestParam(required = false)Integer size){
if(index==null ||size==null){
index=1;
size=2;
}
List<Article> articles = articleService.selectList(index,size);
PageInfo<Article> pageInfo=new PageInfo<>(articles);
model.addAttribute("articles", articles);
model.addAttribute("pageInfo", pageInfo);
return "client/index";
}
}
9.構成ファイルに構成を追加します。
# Mysql数据库连接配置 : com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=utf8&useUnicode=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
#开启驼峰命名匹配映射mapper
mybatis.configuration.map-underscore-to-camel-case=true
#配置mybatis的xml映射配置文件路径
mybatis.mapper-locations=classpath:mapper/*.xml
#配置mybatis映射配置文件中实体类别名
mybatis.type-aliases-package=cn.quellanan.springboothomework.pojo
# thymeleaf页面缓存设置
spring.thymeleaf.cache=false
# 配置pagehelper参数
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
10.静的ファイルリソースを導入します。
11. index.htmlファイルを編集します。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)" />
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
<div class="am-u-md-8 am-u-sm-12">
<!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
<div th:each="article,stat:${articles}" th:value="article">
<article class="am-g blog-entry-article">
<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
<!-- 文章分类 -->
<span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
<span> </span>
<!-- 发布时间 -->
<span style="font-size: 15px;" th:text="'发布于 '+ ${article.created}" />
<h2>
<!-- 文章标题 -->
<div><a style="color: #0f9ae0;font-size: 20px;" th:text="${article.title}" />
</div>
</h2>
<!-- 文章内容-->
<div style="font-size: 16px;" th:text="${article.content}" />
</div>
</article>
</div>
<div>
<a class="btn btn-sm" th:href="@{/(index=1,size=2)}">首页</a>
<a class="btn btn-sm" th:href="@{/(index=${pageInfo.getPageNum()-1},size=2)}">上一页</a>
<a class="btn btn-sm" th:href="@{/(index=${pageInfo.getPageNum()}+1,size=2)}">下一页</a>
<a class="btn btn-sm" th:href="@{/(index=${pageInfo.getPages()},size=2)}">尾页</a>
</div>
</div>
<!-- 博主信息描述 -->
<div class="am-u-md-4 am-u-sm-12 blog-sidebar">
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>子慕</span></h2>
<img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
<p>
Java后台开发
</p>
<p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
</div>
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>联系我</span></h2>
<p>
<a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
<a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
</p>
</div>
</div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer" />
</html>
12.テスト
プロジェクトを開始し、訪問
http://localhost:8080/
総括する
簡単に使用できる場合、thymeleafを統合することは非常に便利ですが、今では主流のプロジェクトをフロントエンドとバックエンドから分離する必要があります。ただし、フルスタックの小さなパートナーでも引き続き理解できます。このテクノロジーで十分であることがわかります。使用したい場合始めましょう