SpringBoot 2.0 使用 Thymeleaf 实现前后端分离
什么是Thymeleaf
Thymeleaf是一种Java XML / XHTML / HTML5模板引擎，可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5，但即使在脱机环境中，它也可以处理任何XML文件。它提供了完整的Spring Framework集成。
Thymeleaf 的基础使用
Thymeleaf的使用是由两部分组成的：标签 + 表达式，标签是Thymeleaf的语法结构，而表达式就是语法里的内容实现。
通过标签 + 表达式，让数据和模板结合，最终转换成html代码，返回给用户。
下面通过一个Springboot结合jpa加Thymeleaf显现一个简单的curd。
controller:
@Controller
public class UserController {
/**
* The User service.
*/
@Autowired
UserService userService;
/**
* Index string.
*
* @return the string
*/
@RequestMapping("/")
public String index() {
return "redirect:/list";
}
/**
* List string.
*
* @param model the model
* @return the string
*/
@RequestMapping("/list")
public String list(Model model) {
List<User> users = userService.getUserList();
model.addAttribute("users", users);
return "user/list";
}
/**
* To add string.
*
* @return the string
*/
@RequestMapping("/toAdd")
public String toAdd() {
return "user/userAdd";
}
/**
* Add string.
*
* @param user the user
* @return the string
*/
@RequestMapping("/add")
public String add(User user) {
userService.save(user);
return "redirect:/list";
}
/**
* To edit string.
*
* @param model the model
* @param id the id
* @return the string
*/
@RequestMapping("/toEdit")
public String toEdit(Model model, Long id) {
User user = userService.findUserById(id);
model.addAttribute("user", user);
return "user/userEdit";
}
/**
* Edit string.
*
* @param user the user
* @return the string
*/
@RequestMapping("/edit")
public String edit(User user) {
userService.edit(user);
return "redirect:/list";
}
/**
* Delete string.
*
* @param id the id
* @return the string
*/
@RequestMapping("/delete")
public String delete(Long id) {
userService.delete(id);
return "redirect:/list";
}
}
显示全部消息页面：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>userListtitle>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
head>
<body class="container">
<br/>
<h1>用户列表h1>
<br/><br/>
<div class="with:80%">
<table class="table table-hover">
<thead>
<tr>
<th>#th>
<th>User Nameth>
<th>Passwordth>
<th>Ageth>
<th>Editth>
<th>Deleteth>
tr>
thead>
<tbody>
<tr th:each="user : ${users}">
<th scope="row" th:text="${user.id}">1th>
<td th:text="${user.userName}">neotd>
<td th:text="${user.password}">Ottotd>
<td th:text="${user.age}">6td>
<td><a th:href="@{/toEdit(id=${user.id})}">edita>td>
<td><a th:href="@{/delete(id=${user.id})}">deletea>td>
tr>
tbody>
table>
div>
<div class="form-group">
<div class="col-sm-2 control-label">
<a th:href="@{/toAdd}" class="btn btn-info">adda>
div>
div>
body>
html>
此例子贴出一些较关键代码，具体源码请到github上查看。
前后端分离做法
另外,我们通常使用Thymeleaf来做前后端分离，它的语法能够自动被浏览识别，也就意味着即使在没有动态数据时，它仍可以正常编程出页面。
我经常使用的前后端分离思想有以绝对路径引用和用web映射引用：
- 以绝对路径应用模板，即不需要将页面放置在项目中，可将它发至任意可以被项目应用到的路径。
通过配置下面的选项，来指定视图跳转的前缀和静态资源的位置：
#spring.thymeleaf.prefix=file:///E:/thymeleaf/templates
#spring.resources.static-locations=file:///E:/thymeleaf/static/
注意：上述引用绝对路径windows下使用file:///，而linux下使用file:/home/thymeleaf/tempaltes,区别在于file:的斜杠数，并且路由转发由后端配置，本例子为了方便直接将数据存在model里随路由跳转至页面显示，实际生产使用应是提供数据接口，不应混合在一起。
- 通过web服务器，将页面映射出来，常用的做法有使用nginx，这里以nginx为例，配置nginx路由，指向模板页面和静态资源，同样，配置以下配置选项，指定构建视图url的前缀和静态资源的位置：
#spring.thymeleaf.prefix=http://localhost:8080/templates/
#spring.resources.static-locations=http://localhost:8080/static/
nginx 配置分享：
# 静态资源匹配
location ^~ /static/ {
# 页面挂载到容器中的静态资源绝对路径
root /home/fe-project/;
if ($http_accept_encoding) {
gzip on;
}
}
# 模板页面匹配
location ^~ /templates/ {
# 页面挂载到容器中的页面绝对路径
root /home/fe-project/;
}
上面配置目录讲解：
静态文件目录：/home/fe-project/static
页面模板目录：/home/fe-project/templates
nginx补充：
Nginx路由匹配规则：
通用匹配使用一个 / 表示，可以匹配所有请求，一般nginx配置文件最后都会有一个通用匹配规则，当其他匹配规则均失效时，请求会被路由给通用匹配规则处理；如果没有配置通用匹配，并且其他所有匹配规则均失效时，nginx会返回 404 错误
如：
location = / {
echo "规则A";
}
location = /login {
echo "规则B";
}
location ^~ /static/ {
echo "规则C";
}
匹配结果：
http://localhost/ 规则A
http://localhost/login 规则B
http://localhost/static/a.html 规则C
项目源码：
https://github.com/liaozihong/SpringBoot-Learning/tree/master/SpringBoot-Jpa-Thymeleaf