在这篇文章中我们会学习到关于“thymeleaf是怎么实现前后端数据交换的呢？”的知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

目录

• 1.前端传数据后端接收：
• 2.后端对数据判断后返回信息给前端：

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。

1.前端传数据后端接收：

用户在登录界面输入用户名和密码传给后端controller，由后端判断是否正确！

在html界面中要传递的数据name命名，通过表单的提交按钮会传递给响应的controller，在controller将需要的name接收！

<input type="text" name="username" class="form-control" th:placeholder="#{login.username}">
<input type="password" name="password" class="form-control" th:placeholder="#{login.password}">

在controller中使用@RequestParam来对应接收前端要传递的参数，此时参数名严格对应html界面中提交的数据name名称！

@RequestMapping("/user/login")
 public String Login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model md){      
        }

此时后端就实现接收前端传递的数据

2.后端对数据判断后返回信息给前端：

controller通过上述参数会接受到html，传递的数据，对数据进行判断。并且通过msg将信息传递回去。

if(!StringUtils.isEmpty(username)&& "123123".equals(password)){
            return "redirect:/main.html";
        }else{
            md.addAttribute("msg","用户名或者密码错误!");
            return "index";
        }

html页面使用thymeleaf引擎接收并且显示数据在界面！

<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

完整的两个代码块如下：

<form class="form-signin" th:action="@{user/login}">
			<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
			<input type="text" name="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus="" >
			<input type="password" name="password" class="form-control" th:placeholder="#{login.password}" required="" >
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me" th:text="#{login.remember}">
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2022-7-8//21:41</p>
			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}" rel="external nofollow" >中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}" rel="external nofollow" >English</a>
		</form>

java

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    public String Login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model md){
        if(!StringUtils.isEmpty(username)&& "123123".equals(password)){
            return "redirect:/main.html";
        }else{
            md.addAttribute("msg","用户名或者密码错误!");
            return "index";
        }

    }
}

感谢各位的阅读，以上就是“thymeleaf是怎么实现前后端数据交换的呢？”的内容了，通过以上内容的阐述，相信大家对thymeleaf是怎么实现前后端数据交换的呢？已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。