SpringBoot 2.0 使用 Thymeleaf 实现前后端分离
Posted 杨治中
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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";
显示全部消息页面：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>userList</title>
<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 Name</th>
<th>Password</th>
<th>Age</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="user : $users">
<th scope="row" th:text="$user.id">1</th>
<td th:text="$user.userName">neo</td>
<td th:text="$user.password">Otto</td>
<td th:text="$user.age">6</td>
<td><a th:href="@/toEdit(id=$user.id)">edit</a></td>
<td><a th:href="@/delete(id=$user.id)">delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<a th:href="@/toAdd" class="btn btn-info">add</a>
</div>
</div>
</body>
</html>此例子贴出一些较关键代码，具体源码请到github上查看。
前后端分离做法
另外,我们通常使用Thymeleaf来做前后端分离，它的语法能够自动被浏览识别，也就意味着即使在没有动态数据时，它仍可以正常编程出页面。
我经常使用的前后端分离思想有以绝对路径引用和用web映射引用：
以绝对路径应用模板，即不需要将页面放置在项目中，可将它发至任意可以被项目应用到的路径。
通过配置下面的选项，来指定视图跳转的前缀和静态资源的位置：
#spring.thymeleaf.prefix=file:///E:/thymeleaf/templates
#spring.resources.static-locations=file:///E:/thymeleaf/static/
1
2
注意：上述引用绝对路径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
————————————————
版权声明：本文为CSDN博主「帅骚贯彻一生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39211866/article/details/84452874
以上是关于SpringBoot 2.0 使用 Thymeleaf 实现前后端分离的主要内容，如果未能解决你的问题，请参考以下文章
项目实战 ---- 简单整合SpringBoot + MyBatis + Themyleaf小项目
项目实战 ---- 简单整合SpringBoot + MyBatis + Themyleaf小项目