Резюме: Первоисточник: www.bysocket.com Мейсон BYSocket надеется перепечатать, сохранить аннотацию, спасибо!
Thymeleaf — это язык шаблонов. Что такое язык шаблонов или механизм шаблонов? Общие языки шаблонов включают в себя следующие понятия: данные (Data), шаблон (Template), механизм шаблонов (Template Engine) и результирующие документы (Result Documents).
- данные
Данные — это представление и носитель информации, которая может быть символами, символами, числами, голосами, изображениями, видео и т. д. Данные и информация неразделимы, данные — это выражение информации, а информация — это коннотация данных. Данные сами по себе не имеют значения, и данные становятся информацией только тогда, когда они влияют на поведение сущности.
- Шаблон
Шаблон — это план, независимый от типа класс. Когда компилятор использует шаблон, он создает экземпляр шаблона в соответствии с аргументами шаблона и получает класс, связанный с типом.
- Шаблонный движок
Механизм шаблонов (здесь конкретно относится к механизму шаблонов для веб-разработки) создается для отделения пользовательского интерфейса от бизнес-данных (контента), он может генерировать документы в определенном формате, а механизм шаблонов, используемый для веб-сайта, создает стандартный HTML-документ.
- Документирование результатов
Документ в определенном формате, например механизм шаблонов для веб-сайта, создает стандартный HTML-документ.
Языки шаблонов широко используются, обычное использование заключается в следующем:
- рендеринг страницы
- Генерация документации
- генерация кода
- Все сценарии применения "данные + шаблон = текст"
Целью этого случая, естественно, является рендеринг страницы.Следующее интегрирует Thymeleaf в Spring Boot для реализации полного веб-кейса.
1. Запустите главу-2-spring-boot-quick-start
Проект Chapter-2-spring-boot-quick-start использует базу данных в памяти и не требует настройки источника данных. Загрузите и запустите.
1. Скачать проект
git clone download project springboot-learning-example, адрес проекта см. на GitHub: https://github.com/JeffLi1993/springboot-learning-example, а именно:
git clone https://github.com/JeffLi1993/springboot-learning-example.git
2. Инженерное сооружение
Откройте проект с помощью 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 — уровень контроллера
- org.spring.springboot.dao - DAO уровня операций с данными
- org.spring.springboot.domain - класс сущности
- org.spring.springboot.service - уровень бизнес-логики
- Приложение - Класс запуска приложения
- application.properties - файл конфигурации приложения
Шаблон будет использовать следующие два каталога
- Статический каталог предназначен для хранения CSS, JS и других файлов ресурсов.
- каталог шаблонов предназначен для хранения представлений
3. Скомпилируйте и запустите проект
В корневом каталоге проекта запустите команду maven для компиляции:
cd chapter-2-spring-boot-quick-start
mvn clean install
После успешной компиляции проекта щелкните правой кнопкой мыши, чтобы запустить основную функцию класса запуска приложения с именем QuickStartApplication.java, а затем браузер откроетlocalhost:8080/usersТолько что:
Страница со списком пользователей:
Страница редактирования пользователя:
2. Подробное объяснение глава-2-spring-boot-quick-start
Инженерный код:
1. pom.xml Thymeleaf зависимости
Чтобы использовать механизм шаблонов, просто добавьте зависимость компонента Thymeleaf в pom.xml:
<!-- 模板引擎 Thymeleaf 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Что такое лист тимьяна?
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Основная цель Thymeleaf — внедрить элегантные естественные шаблоны в ваш рабочий процесс разработки — HTML, который может правильно отображаться в браузерах, а также работать как статические прототипы, обеспечивая более тесное сотрудничество в командах разработчиков.
Thymeleaf — это механизм шаблонов Java нового поколения, рекомендуемый после Spring 4.
Общая конфигурация pom.xml выглядит следующим образом:
<?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>spring.boot.core</groupId>
<artifactId>chapter-2-spring-boot-quick-start</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>chapter-2-spring-boot-quick-start</name>
<description>第二章快速入门案例</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.7.RELEASE</version>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- Web 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 单元测试依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- Spring Data JPA 依赖 :: 数据持久层框架 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- h2 数据源连接驱动 -->
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 模板引擎 Thymeleaf 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<!-- Spring Boot Maven 插件 -->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2. Конфигурация зависимости Thymeleaf
Добавьте зависимость Thymeleaf в проект Spring Boot, чтобы запустить его конфигурацию по умолчанию. Если вы хотите настроить конфигурацию, вы можете настроить ее в 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.
3. Использование листьев тимьяна
Как контроллер указывает представление на Thymeleaf
Код слоя пользовательского управления выглядит следующим образом:
@Controller
@RequestMapping(value = "/users") // 通过这里配置使下面的映射都在 /users
public class UserController {
@Autowired
UserService userService; // 用户服务层
/**
* 获取用户列表
* 处理 "/users" 的 GET 请求，用来获取用户列表
* 通过 @RequestParam 传递参数，进一步实现条件查询或者分页查询
*/
@RequestMapping(method = RequestMethod.GET)
public String getUserList(ModelMap map) {
map.addAttribute("userList", userService.findAll());
return "userList";
}
/**
* 显示创建用户表单
*
*/
@RequestMapping(value = "/create", method = RequestMethod.GET)
public String createUserForm(ModelMap map) {
map.addAttribute("user", new User());
map.addAttribute("action", "create");
return "userForm";
}
/**
* 创建用户
* 处理 "/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 для привязки данных к представлению. возвращаемая строка, имя шаблона соответствующего каталога в resources/templates.
Аннотация @ModelAttribute используется для получения данных, отправленных формой страницы, и привязки их к объекту данных пользователя.
Страница формы формы
Основной код:
<form th:action="@{/users/{action}(action=${action})}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${user.id}"/>
<div class="form-group">
<label for="user_name" class="col-sm-2 control-label">名称</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="user_name" name="name" th:value="${user.name}" />
</div>
</div>
<div class="form-group">
<label for="user_age" class="col-sm-2 control-label">年龄:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="user_age" name="age" th:value="${user.age}"/>
</div>
</div>
<div class="form-group">
<label for="user_birthday" class="col-sm-2 control-label">出生日期:</label>
<div class="col-xs-4">
<input type="date" class="form-control" id="user_birthday" name="birthday" th:value="${user.birthday}"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input class="btn btn-primary" type="submit" value="提交"/>
<input class="btn" type="button" value="返回" onclick="history.back()"/>
</div>
</div>
</form>
Здесь определяется форма формы для добавления или обновления пользователей.
страница со списком
код показывает, как показано ниже:
<table class="table table-hover table-condensed">
<legend>
<strong>用户列表</strong>
</legend>
<thead>
<tr>
<th>用户编号</th>
<th>名称</th>
<th>年龄</th>
<th>出生时间</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${userList}">
<th scope="row" th:text="${user.id}"></th>
<td><a th:href="@{/users/update/{userId}(userId=${user.id})}" th:text="${user.name}"></a></td>
<td th:text="${user.age}"></td>
<td th:text="${user.birthday}"></td>
<td><a class="btn btn-danger" th:href="@{/users/delete/{userId}(userId=${user.id})}">删除</a></td>
</tr>
</tbody>
</table>
Это перебирает список пользователей.
Синтаксический сахар для Thymeleaf
Я не буду вдаваться в подробности здесь, давайте посмотрим, что написали другие http://www.cnblogs.com/nuoyiamy/p/5591559.html
Или взгляните на официальную документацию http://www.thymeleaf.org/documentation.html.
3. Резюме этой статьи
В этой статье Thymeleaf используется для создания веб-кейса CRUD. Всем советую~
Если приведенная выше статья или ссылка вам полезны, не забудьте оставить комментарий в конце статьи~ Вы также можете нажать плавающую кнопку «Поделиться» в правой части страницы, чтобы больше людей прочитали эту статью.