thymeleaf 中文_springboot 整合 thymeleaf(上手即用)
生活随笔
收集整理的這篇文章主要介紹了
thymeleaf 中文_springboot 整合 thymeleaf(上手即用)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
引言
springboot 整合thymeleaf 其實用的不是很多，因為現(xiàn)在很多公司都是前后端分離的項目，通過接口交互了。但是我們后端人員，對前端不是很了解，但是又想做些東西看看效果。所以就可以整合 thymeleaf ，掌握一些基本的語法，就可以很好的操作啦。
使用
首先引入依賴，這樣我們在項目中才能使用到。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>在html 文件中想要使用 ，需要引入
<html lang="en" xmlns:th="http://www.thymeleaf.org">接下來就可以使用啦。
在用之前我們先來看看這些基礎(chǔ)語法。
標簽
標準表達式
變量表達式：${...}
主要獲取上下文的參數(shù)變量
<p th:text="${title}">默認值</p>同時，Thymeleaf 提供了內(nèi)置對象
# ctx:上下文對象# vars:上下文變量# locale：上下文區(qū)域設(shè)置# request：HttpServletRequest 對象# response：HttpServletResponse對象# session：HttpSession對象# servletContext：ServletContext 對象eg：
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 模版頁面國際化內(nèi)容的動態(tài)替換和展示板。
鏈接表達式@{...}
一般用于頁面的跳轉(zhuǎn)或者資源的引入。
<a th:href="@{http://localhost:8080/order/details(orderId=${o.id})}">view</a> <a th:href="@{/order/details(orderId=${o.id})}">view</a>嚴格按照：
@{路徑(參數(shù)名=參數(shù)值，參數(shù)名=參數(shù)值...)}的形式編寫
片段表達式~{...}
用來標記一個片段模版并且根據(jù)需要移動或者傳遞給其他模版
<div th:insert="~{thymeleafDemo::title}"></div>這里有一個login.html 的頁面，就是整合了thymeleaf
<!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>最終顯示的效果如下：
搭建個人博客界面
下面我們就搭建一個demo 吧，整合mybatis ,將文章列表顯示在界面上，實現(xiàn)整合pageHelper 實現(xiàn)分頁效果。在界面上顯示上一頁下一頁。
1、創(chuàng)建表。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 '文章具體內(nèi)容',created date NOT NULL COMMENT '發(fā)表時間',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學(xué)習(xí)路線圖','Java學(xué)習(xí)路線圖具體內(nèi)容具體內(nèi)容具體內(nèi)容具體內(nèi)容具體內(nèi)容具體內(nèi)容具體內(nèi)容','2019-10-10', null, '默認分類', '‘2019,Java,學(xué)習(xí)路線圖', '1', null); INSERT INTO t_article VALUES ('2', '2019新版Python學(xué)習(xí)線路圖','據(jù)悉，Python已經(jīng)入駐小學(xué)生教材，未來不學(xué)Python不僅知識會脫節(jié)，可能與小朋友都沒有了共同話題~~所以，從今天起不要再找借口，不要再說想學(xué)Python卻沒有資源，趕快行動起來，Python等你來探索' ,'2019-10-10', null, '默認分類', '‘2019,Java,學(xué)習(xí)路線圖', '1', null); INSERT INTO t_article VALUES ('3', 'JDK 8——Lambda表達式介紹',' Lambda表達式是JDK 8中一個重要的新特性，它使用一個清晰簡潔的表達式來表達一個接口，同時Lambda表達式也簡化了對集合以及數(shù)組數(shù)據(jù)的遍歷、過濾和提取等操作。下面，本篇文章就對Lambda表達式進行簡要介紹，并進行演示說明' ,'2019-10-10', null, '默認分類', '‘2019,Java,學(xué)習(xí)路線圖', '1', null); INSERT INTO t_article VALUES ('4', '函數(shù)式接口','雖然Lambda表達式可以實現(xiàn)匿名內(nèi)部類的功能，但在使用時卻有一個局限，即接口中有且只有一個抽象方法時才能使用Lamdba表達式代替匿名內(nèi)部類。這是因為Lamdba表達式是基于函數(shù)式接口實現(xiàn)的，所謂函數(shù)式接口是指有且僅有一個抽象方法的接口，Lambda表達式就是Java中函數(shù)式編程的體現(xiàn)，只有確保接口中有且僅有一個抽象方法，Lambda表達式才能順利地推導(dǎo)出所實現(xiàn)的這個接口中的方法' ,'2019-10-10', null, '默認分類', '‘2019,Java,學(xué)習(xí)路線圖', '1', null); INSERT INTO t_article VALUES ('5', '虛擬化容器技術(shù)——Docker運行機制介紹','Docker是一個開源的應(yīng)用容器引擎，它基于go語言開發(fā)，并遵從Apache2.0開源協(xié)議。使用Docker可以讓開發(fā)者封裝他們的應(yīng)用以及依賴包到一個可移植的容器中，然后發(fā)布到任意的Linux機器上，也可以實現(xiàn)虛擬化。Docker容器完全使用沙箱機制，相互之間不會有任何接口，這保證了容器之間的安全性' ,'2019-10-10', null, '默認分類', '‘2019,Java,學(xué)習(xí)路線圖', '1', null);2、創(chuàng)建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> <!--分頁助手--> <!--導(dǎo)入pagehelper相關(guān)依賴--> <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、創(chuàng)建實體類。
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、創(chuàng)建mapper 接口
@Mapper public interface ArticleMapper {List<Article> selectList(); }6、創(chuàng)建mapper 對應(yīng)的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、創(chuàng)建service 以及實現(xiàn)類。使用 PageHelper 實現(xiàn)分頁
public interface ArticleService {List<Article> selectList(int index,int size); }@Service public class ArticleServiceImpl implements ArticleService {@Autowiredprivate ArticleMapper articleMapper;@Overridepublic List<Article> selectList(int index,int size) {PageHelper.startPage(index,size);List<Article> articles = articleMapper.selectList();return articles;} }8、創(chuàng)建controller 層接口
@Controller public class ArticleController {@Autowiredprivate 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數(shù)據(jù)庫連接配置 : 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頁面緩存設(shè)置 spring.thymeleaf.cache=false# 配置pagehelper參數(shù) pagehelper.helperDialect=mysql pagehelper.reasonable=true pagehelper.supportMethodsArguments=true pagehelper.params=count=countSql10、引入靜態(tài)文件資源。
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"><!-- 文章遍歷并分頁展示 : 需要同學(xué)們手動完成，基本樣式已經(jīng)給出，請使用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><!-- 發(fā)布時間 --><span style="font-size: 15px;" th:text="'發(fā)布于 '+ ${article.created}" /><h2><!-- 文章標題 --><div><a style="color: #0f9ae0;font-size: 20px;" th:text="${article.title}" /></div></h2><!-- 文章內(nèi)容--><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后臺開發(fā)</p><p>個人博客小站，主要發(fā)表關(guān)于Java、Spring、Docker等相關(guān)文章</p></div><div class="blog-sidebar-widget blog-bor"><h2 class="blog-text-center blog-title"><span>聯(lián)系我</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/)
總結(jié)
以上是生活随笔為你收集整理的thymeleaf 中文_springboot 整合 thymeleaf(上手即用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： rs232读取智能电表_老王说表之--快
- 下一篇： 聚类结果不好怎么办_使用bert-ser