摘要: 原創(chuàng)出處:www.bysocket.com 泥瓦匠BYSocket 希望轉載,保留摘要,謝謝!
Thymeleaf 是一種模板語言。那模板語言或模板引擎是什么?常見的模板語言都包含以下幾個概念:數據(Data)、模板(Template)、模板引擎(Template Engine)和結果文檔(Result Documents)。
數據 數據是信息的表現(xiàn)形式和載體,可以是符號、文字、數字、語音、圖像、視頻等。數據和信息是不可分離的,數據是信息的表達,信息是數據的內涵。數據本身沒有意義,數據只有對實體行為產生影響時才成為信息。
模板 模板,是一個藍圖,即一個與類型無關的類。編譯器在使用模板時,會根據模板實參對模板進行實例化,得到一個與類型相關的類。
模板引擎 模板引擎(這里特指用于Web開發(fā)的模板引擎)是為了使用戶界面與業(yè)務數據(內容)分離而產生的,它可以生成特定格式的文檔,用于網站的模板引擎就會生成一個標準的HTML文檔。
結果文檔 一種特定格式的文檔,比如用于網站的模板引擎就會生成一個標準的HTML文檔。
模板語言用途廣泛,常見的用途如下:
頁面渲染
文檔生成
代碼生成
所有 “數據+模板=文本” 的應用場景
這里案例用途自然是 頁面渲染,下面在 Spring Boot 中整合 Thymeleaf 實現(xiàn)完整 Web 案例。
chapter-2-spring-boot-quick-start 工程用的是內存式數據庫,不需要配置數據源。下載運行即可。
git clone 下載工程 springboot-learning-example ,項目地址見 GitHub:https://github.com/JeffLi1993/springboot-learning-example,即:
git clone https://github.com/JeffLi1993/springboot-learning-example.git
用 IDEA 打開工程,可以看到子工程 chapter-2-spring-boot-quick-start ,其目錄如下:
├── pom.xml
└── src
├── main
│ ├── java
│ │ └── spring
│ │ └── boot
│ │ └── core
│ │ ├── QuickStartApplication.java
│ │ ├── domain
│ │ │ ├── User.java
│ │ │ └── UserRepository.java
│ │ ├── service
│ │ │ ├── UserService.java
│ │ │ └── impl
│ │ │ └── UserServiceImpl.java
│ │ └── web
│ │ └── UserController.java
│ └── resources
│ ├── application.properties
│ ├── static
│ │ ├── css
│ │ │ └── default.css
│ │ └── images
│ │ └── favicon.ico
│ └── templates
│ ├── userForm.html
│ └── userList.html
└── test
└── java
└── spring
└── boot
└── core
├── QuickStartApplicationTests.java
└── domain
└── UserRepositoryTests.java
對應目錄:
org.spring.springboot.controller - Controller 層
org.spring.springboot.dao - 數據操作層 DAO
org.spring.springboot.domain - 實體類
org.spring.springboot.service - 業(yè)務邏輯層
Application - 應用啟動類
application.properties - 應用配置文件
模板是會用到下面兩個目錄
static 目錄是存放 CSS、JS 等資源文件
templates 目錄是存放視圖
在該工程根目錄,運行 maven 指令進行編譯:
cd chapter-2-spring-boot-quick-start
mvn clean install
編譯工程成功后,右鍵運行名為 QuickStartApplication.java 應用啟動類的 main 函數,然后瀏覽器訪問 localhost:8080/users
即可: 用戶列表頁面:
工程代碼:
使用模板引擎,就在 pom.xml 加入 Thymeleaf 組件依賴:
Thymeleaf 是什么? Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
Thymeleaf 是新一代 Java 模板引擎,在 Spring 4 后推薦使用。
整體個 pom.xml 配置如下:
<>xml version='1.0' encoding='UTF-8'?>
<> 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'>
在 Spring Boot 項目中加入 Thymeleaf 依賴,即可啟動其默認配置。如果想要自定義配置,可以在 application.properties 配置如下:
spring.thymeleaf.cache=true # Enable template caching.
spring.thymeleaf.check-template=true # Check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Check that the templates location exists.
spring.thymeleaf.enabled=true # Enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.encoding=UTF-8 # Template files encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.reactive.max-chunk-size= # Maximum size of data buffers used for writing to the response, in bytes.
spring.thymeleaf.reactive.media-types= # Media types supported by the view technology.
spring.thymeleaf.servlet.content-type=text/html # Content-Type value written to HTTP responses.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
用戶控制層代碼如下:
@Controller
@RequestMapping(value = '/users') // 通過這里配置使下面的映射都在 /users
public class UserController {
@Autowired
UserService userService; // 用戶服務層
/**
* 獲取用戶列表
* 處理 '/users' 的 GET 請求,用來獲取用戶列表
* 通過 @RequestParam 傳遞參數,進一步實現(xiàn)條件查詢或者分頁查詢
*/
@RequestMapping(method = RequestMethod.GET)
public String getUserList(ModelMap map) {
map.addAttribute('userList', userService.findAll());
return 'userList';
}
/**
* 顯示創(chuàng)建用戶表單
*
*/
@RequestMapping(value = '/create', method = RequestMethod.GET)
public String createUserForm(ModelMap map) {
map.addAttribute('user', new User());
map.addAttribute('action', 'create');
return 'userForm';
}
/**
* 創(chuàng)建用戶
* 處理 '/users' 的 POST 請求,用來獲取用戶列表
* 通過 @ModelAttribute 綁定參數,也通過 @RequestParam 從頁面中傳遞參數
*/
@RequestMapping(value = '/create', method = RequestMethod.POST)
public String postUser(@ModelAttribute User user) {
userService.insertByUser(user);
return 'redirect:/users/';
}
/**
* 顯示需要更新用戶表單
* 處理 '/users/{id}' 的 GET 請求,通過 URL 中的 id 值獲取 User 信息
* URL 中的 id ,通過 @PathVariable 綁定參數
*/
@RequestMapping(value = '/update/{id}', method = RequestMethod.GET)
public String getUser(@PathVariable Long id, ModelMap map) {
map.addAttribute('user', userService.findById(id));
map.addAttribute('action', 'update');
return 'userForm';
}
/**
* 處理 '/users/{id}' 的 PUT 請求,用來更新 User 信息
*
*/
@RequestMapping(value = '/update', method = RequestMethod.POST)
public String putUser(@ModelAttribute User user) {
userService.update(user);
return 'redirect:/users/';
}
/**
* 處理 '/users/{id}' 的 GET 請求,用來刪除 User 信息
*/
@RequestMapping(value = '/delete/{id}', method = RequestMethod.GET)
public String deleteUser(@PathVariable Long id) {
userService.delete(id);
return 'redirect:/users/';
}
}
ModelMap 對象來進行數據綁定到視圖。return 字符串,該字符串對應的目錄在 resources/templates 下的模板名字。 @ModelAttribute 注解是用來獲取頁面 Form 表單提交的數據,并綁定到 User 數據對象。
核心代碼:
<> th:action='@{/users/{action}(action=${action})}' method='post' class='form-horizontal'>
<> type='hidden' name='id' th:value='${user.id}'/>
<> class='form-group'>
<> for='user_name' class='col-sm-2 control-label'>名稱
<> class='col-xs-4'>
<> type='text' class='form-control' id='user_name' name='name' th:value='${user.name}' />
<> class='form-group'>
<> for='user_age' class='col-sm-2 control-label'>年齡:
<> class='col-xs-4'>
<> type='text' class='form-control' id='user_age' name='age' th:value='${user.age}'/>
<> class='form-group'>
<> for='user_birthday' class='col-sm-2 control-label'>出生日期:
<> class='col-xs-4'>
<> type='date' class='form-control' id='user_birthday' name='birthday' th:value='${user.birthday}'/>
<> class='form-group'>
<> class='col-sm-offset-2 col-sm-10'>
<> class='btn btn-primary' type='submit' value='提交'/>
<> class='btn' type='button' value='返回' onclick='history.back()'/>
這里定義了一個 Form 表單用于新增或者更新用戶。
代碼如下:
<> class='table table-hover table-condensed'>
用戶列表
用戶編號
名稱
年齡
出生時間
管理
<> th:each='user : ${userList}'>
<> scope='row' th:text='${user.id}'>
th:href='@{/users/update/{userId}(userId=${user.id})}' th:text='${user.name}'><>
<> th:text='${user.age}'>
<> th:text='${user.birthday}'>
class='btn btn-danger' th:href='@{/users/delete/{userId}(userId=${user.id})}'>刪除<>
這里循環(huán)了用戶列表。
我這邊也就不詳細展開了,大家看看人家寫的 http://www.cnblogs.com/nuoyiamy/p/5591559.html 或者看看官方文檔 http://www.thymeleaf.org/documentation.html
該文,利用 Thymeleaf 做了個 Web 的 CRUD 案例。大家多指教~
如以上文章或鏈接對你有幫助的話,別忘了在文章結尾處評論哈~ 你也可以點擊頁面右邊“分享”懸浮按鈕哦,讓更多的人閱讀這篇文章。
還有,掃掃一起交流學習: