Spring MVC integrates Thymeleaf to achieve front-end and back-end separation: Simplify view layer development

I. Introduction

1. The significance of the separation of front and back ends

Separation of front and back ends is an important architectural pattern in web development. It separates the front-end and back-end development, making the front-end focus on UI design and display logic, while the back-end focuses on business logic implementation. The benefits of this architectural pattern include:

• Enhance development efficiency
• Meet the adaptation needs of multiple terminal devices
• Improve the maintainability of front-end and back-end code

2. Introduction to Thymeleaf

Thymeleaf is a popular server-side templating engine for Java. It can combine HTML templates and dynamic data to generate final HTML pages. Compared with other template engines, Thymeleaf has many advantages, such as:

• Powerful expression ability
• Rich built-in template functions
• Good readability and ease of maintenance

3. Integration of Spring MVC and Thymeleaf

Spring MVC is a commonly used Java Web framework, which also supports the use of Thymeleaf for front-end and back-end separation development. Spring MVC provides auxiliary tools such as Spring Boot, which can easily integrate Thymeleaf. At the same time, using Spring MVC's model-view-controller (MVC) architecture pattern can organize code more clearly.

Second, the realization of front-end and back-end separation

1. The concept of front-end and back-end separation

Separation of front-end and back-end is an architectural pattern that separates the development of front-end and back-end. The front-end is responsible for UI design and interface interaction, and the back-end is responsible for business logic implementation and data processing. The separation of front and back ends can improve the team's development efficiency and code maintainability, and can better meet the adaptation needs of multiple terminal devices.

2. Advantages of front-end and back-end separation

The advantages of front-end and back-end separation are mainly reflected in the following aspects:

• Improve development efficiency
• Improve code reuse and maintainability
• Decompose tasks across the front and back ends to facilitate team collaboration
• Better respond to the adaptation needs of multiple terminal devices

3. Choice of front-end framework

The selection of the front-end framework mainly considers the following factors:

• Target browser type and device characteristics
• Development team technology stack and skill level
• Open source community profile and widespread use
• Framework ecology and function extension

In addition, factors such as the maturity and stability of the framework need to be considered.

3. Introduction to Thymeleaf

1. Advantages of Thymeleaf

Thymeleaf is a popular template engine with the following advantages:

• Support HTML, XML, JavaScript, CSS and other file types
• Templates can be previewed and cached in the browser
• Support template layout and abstraction for easy reuse
• Powerful expression ability and logic processing ability
• Easy to integrate frameworks such as Spring MVC, easy to use

2. Syntax of Thymeleaf

Thymeleaf's syntax includes a series of attributes and tags, the most commonly used of which are th:text, th:if, th:each, etc. For example, here's a code that renders a list of users using Thymeleaf:

<table>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
    </tr>
</table>

In this code, th:each means to traverse the users list and assign the elements in the list to the user variable each time. The user variable is used in the tr tag to output the user's id, name and age information.

3. Thymeleaf's template rendering method

Thymeleaf's template rendering methods include two types: template caching and template real-time parsing. The former is suitable for the production environment and can improve the template loading speed, while the latter is suitable for the development environment and can be easily debugged and modified.

Here is an example of controller code using Thymeleaf in which template caching is used:

@Controller
public class UserController {
    
    

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public String list(Model model) {
    
    
        List<User> users = userService.findAll();
        model.addAttribute("users", users);
        return "user/list"; // 返回模板名称
    }
}

UserService is used in UserController to query the user list, add data to Model, and return the template name.

Fourth, the integration of Spring MVC and Thymeleaf

1. Environment construction of Spring MVC and Thymeleaf

You first need to make sure that you have installed the necessary development environments such as Java and Maven.

Next, you need to introduce Spring Boot and Thymeleaf-related dependency libraries into the project. You can add the following code to the pom.xml file:

<dependencies>
    <!-- ... 其他依赖 ... -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

In this way, the project will automatically download and add the dependent libraries of Spring Boot and Thymeleaf.

2. How to configure Thymeleaf

Thymeleaf is integrated by default in the Spring Boot project, no additional configuration is required. If you need to customize the configuration of Thymeleaf, you can add related configuration items in application.properties, for example:

spring.thymeleaf.cache=false      # 禁用模板缓存
spring.thymeleaf.encoding=UTF-8  # 设置编码为 UTF-8

3. How to use Thymeleaf

• Using Thymeleaf with Spring MVC

Thymeleaf and Spring MVC are naturally compatible with each other. By adding annotations @GetMapping, @PostMapping, etc. on the controller method, Spring MVC can automatically render its return value into a Thymeleaf template.

For example, we define a UserController whose list method returns a list of User objects and instructs Spring MVC to render templates using Thymeleaf:

@Controller
public class UserController {
    
    

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public String list(Model model) {
    
    
        List<User> users = userService.getUsers();
        model.addAttribute("users", users);
        return "user/list"; // 使用模板名称作为返回结果
    }
}

Data from Java objects can be rendered to HTML pages by using Thymeleaf expressions in template files. For example, in the following user list template, a user list is generated using Thymeleaf's loop statements and expressions:

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 在<tbody>标签中使用Thymeleaf的each语句输出用户列表 -->
    <tr th:each="user : ${users}">
      <!-- 输出用户编号 -->
      <td th:text="${user.id}"></td>
      <!-- 输出用户姓名 -->
      <td th:text="${user.name}"></td>
      <!-- 输出用户操作 -->
      <td>
        <a th:href="@{
     
     '/users/'+${user.id}+'/edit'}">编辑</a>
        <a th:href="@{
     
     '/users/'+${user.id}+'/delete'}">删除</a>
      </td>
    </tr>
  </tbody>
</table>

• Thymeleaf's built-in objects

There are some predefined objects in Thymeleaf that are commonly used to handle common tasks, such as setting variables, performing arithmetic and comparison operations, and so on.

The following are commonly used predefined objects:

object name	describe
#object	the current object (usually the iterable object)
#strings	string manipulation
#lists	list manipulation
#sets	set operation
#arrays	array operation
#dates	Date and Time Manipulation
#calendars	calendar operation
#numbers	computation
#bools	Boolean operations
#messages	Text internationalization (i18n)
#method	call method
#fields	access object fields
#selections	select list
#aggregates	aggregation operation
#authentication	Authentication and Authorization Operations
#authorization	authorized operation
#session	Session operation
#servletContext	Servlet context operations
#request	HTTP request operations
#response	HTTP Response Actions
#httpServletRequest	HttpServletRequest
#httpSession	HttpSession
#servletContext	ServletContext
#requestParameters	HTTP request parameters (i.e. variables like ?name=Thymeleaf)
#requestParametersMap	Map object of HTTP request parameters
#sessionVariables	Session attribute
#requestURI	Request URI (does not contain query parameters)
#requestURL	Request URL (excluding Scheme and Authority)
#baseURI	base URI (relative to the context path of the current request)
#locale	current locale
#dates	Date and Time Manipulation
#storms	Date, Time and Temporals Operations
#calendars	calendar operation
#files	Handle file uploads

• Using Ajax and Thymeleaf integration in Thymeleaf

Incremental rendering of data using AJAX and Thymeleaf is a very common requirement.

在 Thymeleaf 中利用 Thymeleaf 的内置属性 th:onclick、th:attr 等属性，可以轻松构建 Ajax 请求，并将其与后端进行数据交互。

例如下面的代码演示了如何利用 Thymeleaf 的 onclick 属性，实现按钮点击时向后端发送 Ajax 请求，并将返回值渲染到 HTML 页面上：

<button type="button"
  th:onclick="'$.get('/ajax/person/'+${person.id}, function(data){$(\'#person-view\').html(data)})'">
  查看详细信息
</button>

<!-- 页面上某处的容器，用于显示返回数据 -->
<div id="person-view"></div>

其中，${person.id} 是当前前端的上下文环境中传递的值。此外需要使用 jQuery 或其他 JavaScript 库来发送 Ajax 请求。

五、视图层开发的简化

在 Web 开发中视图层是用户与系统直接交互的界面，必须具备清晰、友好的页面布局、强大、易用的交互功能。今天，我将为大家介绍如何使用 Thymeleaf 来简化视图层的开发。

1. Thymeleaf 的模板布局

在使用 Thymeleaf 进行页面开发时为了提高代码的复用性和减少冗余代码，我们可以使用 Thymeleaf 的布局语法来定义页面的模板。

首先需要在布局文件中定义公共的 HTML 结构，然后在需要使用的页面中使用特殊的标签引入布局。

例如，我们可以在 layout.html 文件中定义公共的 HTML 结构：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
    <div th:fragment="nav">
        <!-- 定义公共的导航栏 -->
    </div>
    
    <!-- 页面主要内容 -->
    <div th:fragment="content">
        <p>这里是页面的主要内容。</p>
    </div>
    
    <!-- 公共的页脚部分 -->
    <div th:fragment="footer">
        &copy; 2022 My Website
    </div>
</body>
</html>

然后在需要使用该布局的页面中通过 layout:decorate 标签引入布局：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入布局文件 -->
    <layout:decorate layout:decorator="layout">
        <!-- 定义标题 -->
        <layout:fragment name="title">
            首页
        </layout:fragment>
    
        <!-- 引入导航栏 -->
        <layout:fragment name="nav" th:replace="fragments/nav :: nav"/>
    
        <!-- 定义首页内容 -->
        <layout:fragment name="content">
            <h1>Hello World!</h1>
        </layout:fragment>
    
        <!-- 引入页脚 -->
        <layout:fragment name="footer" th:replace="fragments/footer :: footer"/>
    </layout:decorate>
</head>
<body>
    
</body>
</html>

其中，layout:decorate 标签通过 layout:decorator 属性指定布局文件的路径，而 layout:fragment 标签则通过 name 属性指定所要填充的区域。

2. Thymeleaf 的复用模板片段

在 Web 应用程序中需要对页面的不同部分进行复用，例如页头、页脚、导航栏等

在 Thymeleaf 中可以通过 th:replace 或 th:insert 属性来引用其它模板片段，实现代码的复用。

例如，我们可以在 nav.html 文件中定义一个公共的导航栏：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>导航栏</title>
</head>
<body>
    <div th:fragment="nav">
        <nav>
            <a href="/">首页</a>
            <a href="/about">关于我们</a>
            <a href="/contact">联系我们</a>
        </nav>
    </div>
</body>
</html>

然后在需要使用导航栏的页面中可以通过 th:replace 或 th:insert 属性来引用该模板片段：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
</head>
<body>
    <header th:replace="fragments/nav :: nav"></header>
    <h1>Hello World!</h1>
</body>
</html>

如果需要在页面中动态生成导航内容可以通过 th:each 做到：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
</head>
<body>
    <header th:replace="fragments/nav :: nav">
        <nav>
            <a th:each="page : ${pages}" th:href="@{${page.url}}">
                <span th:text="${page.name}"></span>
            </a>
        </nav>
    </header>
    <!-- 页面主要内容 -->
    <div th:text="${content}"></div>
    <!-- 引入页脚 -->
    <div th:replace="footer :: footer"></div>
</body>
</html>

3. Thymeleaf 的表单验证

在表单数据提交时一般需要对表单数据进行验证，以保证数据的准确性。

在 Thymeleaf 中可以通过 th:field 和 th:error 属性来实现表单数据的验证。

例如，我们可以在表单中添加 th:field 属性来指定表单元素的名称和类型，并在下方添加 th:error 属性来显示错误信息：

<!-- HTML 表单元素 -->
<form method="POST" action="/users" th:object="${user}">
    <input type="text" th:field="*{username}" placeholder="用户名">
    <input type="password" th:field="*{password}" placeholder="密码">
    <input type="password" th:field="*{confirmPassword}" placeholder="确认密码">
    <button type="submit">注册</button>
    <!-- 显示错误信息 -->
    <p th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></p>
    <p th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
    <p th:if="${#fields.hasErrors('confirmPassword')}" th:errors="*{confirmPassword}"></p>
</form>

其中，th:object 属性指定了表单数据绑定的对象，而 *{fieldName} 语法则表示指定该表单元素的名称和类型。

在控制器中可以使用 @Valid 和 BindingResult 注解对表单数据进行验证：

@PostMapping("/users")
public String register(@Valid @ModelAttribute User user, BindingResult result) {
    
    
    if (result.hasErrors()) {
    
    
        return "user/register";
    }
    userService.saveUser(user);
    return "redirect:/";
}

4. Thymeleaf 的国际化配置

国际化是指在不同的语言环境下，选择合适的语言资源来实现文本翻译、本地化等功能。在 Thymeleaf 中，可以通过 th:text 属性和 Properties 文件实现国际化。

在模板中可以使用 th:text 属性来指定一个表达式和默认值。例如：

<p th:text="#{welcome.message}">欢迎使用我们的系统！</p>

其中#{...} 表示表达式，${...} 表示变量。

然后在 messages.properties 文件中，定义所需的语言资源：

welcome.message=Welcome to our system!

当系统当前的 Locale 与 “messages.properties” 文件中的 Locale 相同时，th:text 属性将显示对应的语言资源。如果当前 Locale 没有匹配的语言资源，则显示默认值 “欢迎使用我们的系统！”。

如果需要支持多语言可以创建不同的国际化文件。例如，针对英文和中文分别定义 messages_en.properties 和 messages_zh.properties：

# messages_en.properties
welcome.message=Welcome to our system!

# messages_zh.properties
welcome.message=欢迎使用我们的系统！

这样在不同的语言环境中使用页面时，Thymeleaf 会自动选择适合的语言资源。

六、Thymeleaf在前后端分离开发中的实践

随着前端技术的不断发展和不断涌现出来的前端框架，越来越多的开发者开始采用前后端分离的开发模式。前后端分离有很多显著的优势，比如可以提高开发效率、降低耦合度、方便团队合作等等。那么，在前后端分离开发中，如何使用 Thymeleaf 进行渲染呢？

1 前后端分离的细节问题

从前到后整个项目的开发过程中充满了细节问题，所以在前后端分离开发中，开发者必须更加关注这些细节问题，以确保整个项目顺利地进行。

下面列出一些前后端分离开发中的细节问题及其解决方案：

1.1 跨域问题

由于前后端分离的结构，前端和后端服务器可能不在同一个域名下，因此可能会涉及到跨域问题。解决跨域问题可以在后端代码中添加跨域配置，或者使用前端框架内置的跨域解决方案。

1.2 前端模板的组织与管理

在前后端分离开发中，前端通常采用MVVM架构模式。此时，HTML页面仅作为静态的模板来进行编写和管理，而动态数据由前端通过Ajax请求获取。因此，前端需要选择一个合适的模板引擎，比如 Vue、AngularJS、React 等等，来进行模板的管理与渲染。

1.3 RESTful API的设计

在前后端分离开发中前端需要通过 RESTful API 来与后端进行数据交互。因此RESTful API 的设计必须合理，要符合规范，具有可读性和可维护性。

1.4 数据传输格式的选择

在前后端分离开发中前端需要通过RESTful API来获取数据，因此数据传输格式的选择非常重要。通常情况下可以选择 JSON 或 XML 格式进行数据的传输。

2 Thymeleaf的开发注意事项

Thymeleaf 是一款优秀的模板引擎可以方便快捷地进行 HTML 页面的渲染，也可以轻松地与 Spring 框架集成。在使用 Thymeleaf 进行前后端分离开发时，需要注意以下几点：

2.1 定义 HTML 页面

在前后端分离开发中HTML 页面仅作为静态的模板来进行编写和管理，而动态数据则由前端框架通过 Ajax 异步获取。因此在编写 HTML 页面时，需要特别注意页面的结构和布局，以便于前端框架进行数据的插入和渲染。

2.2 使用 Thymeleaf 的语法

在 HTML 页面中可以使用 Thymeleaf 的语法，比如表达式语言、迭代器等来动态渲染页面。例如：

<tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.username}"></td>
    <td th:text="${user.nickname}"></td>
    <td><a th:href="@{/users/{id}/edit(id=${user.id})}">编辑</a></td>
    <td><a th:href="@{/users/{id}/delete(id=${user.id})}">删除</a></td>
</tr>

2.3 与 Ajax 请求配合使用

在前后端分离开发中前端通常采用 Ajax 技术来与后端进行数据交互。使用 Thymeleaf 时可以将 Ajax 请求的返回结果渲染到指定的 HTML 块中。例如：

<div id="result"></div>

<script>
    $.ajax({
     
     
        url: '/user',
        success: function (data) {
     
     
            $('#result').html(data);
        }
    });
</script>

2.4 跳转页面与状态码

在前后端分离开发中，跳转页面和响应状态码通常由前端框架来处理。因此在使用 Thymeleaf 进行页面跳转和状态码返回时，需要与前端框架配合，以保证前端界面正确地进行渲染和跳转。

3 开发中的常见问题及解决方案

在前后端分离开发中有些问题常常会困扰着开发者，下面介绍几个比较常见的问题及解决方案。

3.1 页面渲染缓慢

页面渲染缓慢的原因通常是由于前端框架渲染过多的 DOM 元素，导致浏览器的性能下降。为了解决这个问题，可以通过以下几种方式进行优化：

• 精简页面代码，避免嵌套过深和过多的元素；
• 使用组件化的设计，将页面拆分成多个小组件；
• 使用 Ajax 异步加载数据，在合适的时机进行渲染。

3.2 跨域访问数据失败

当前端和后端服务器不在同一个域名下时，可能会涉及到跨域问题。为了解决这个问题可以通过以下几种方式进行实现：

• 在后端代码中添加跨域配置；
• 在前端代码中使用 JSONP 或 CORS；
• 将前端和后端服务器部署在同一个域名下。

3.3 Ajax 获取数据失败

当使用 Ajax 向后端服务器请求数据时，可能会遇到获取数据失败的情况。这可能是因为请求参数错误、请求路径错误等原因导致的。为了解决这个问题，可以按照以下步骤进行调试：

• 检查请求参数是否正确；
• 检查请求路径是否正确；
• 检查后端代码是否正确；
• 如果还是无法解决，可以使用调试工具对请求进行调试。

七、小结回顾

在前后端分离开发中开发者需要更加注重细节问题，例如跨域问题、前端模板的组织与管理、RESTful API的设计、数据传输格式的选择等等。同时Thymeleaf 是一款非常好用的模板引擎，可以方便快捷地进行 HTML 页面的渲染。在使用 Thymeleaf 进行前后端分离开发时，需要注意一些开发细节，例如定义 HTML 页面、使用 Thymeleaf 的语法、与 Ajax 请求配合使用、跳转页面与状态码。此外，在开发过程中经常会遇到跨域、Ajax获取数据失败和页面渲染缓慢等问题，开发者需要学会解决这些问题，保证项目的顺利进行。

希望以上内容可以帮助您更好地理解前后端分离开发及Thymeleaf的使用。