thymeleaf实现前后端数据交换的示例详解
作者:lumanman 时间:2023-04-18 12:02:54
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";
}
}
}
来源:https://www.cnblogs.com/lumanmanqixiuyuanxi/p/16460306.html
标签:thymeleaf,数据,交换
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Java Mybatis框架Dao层的实现与映射文件以及核心配置文件详解分析
2021-06-15 16:29:22
![](https://img.aspxhome.com/file/2023/7/61587_0s.png)
C#简单读写txt文件的方法
2023-01-17 06:30:27
android实现图片裁剪的两种方法
2022-10-27 18:41:05
C#中使用@声明变量示例(逐字标识符)
2022-04-15 14:21:48
一文看懂JAVA设计模式之工厂模式
2023-11-27 02:30:54
![](https://img.aspxhome.com/file/2023/8/60338_0s.png)
c#实现服务器性能监控并发送邮件保存日志
2023-09-10 11:56:14
使用C语言的fork()函数在Linux中创建进程的实例讲解
2023-07-07 04:40:24
![](https://img.aspxhome.com/file/2023/0/103100_0s.png)
java easyUI实现自定义网格视图实例代码
2022-05-16 23:52:54
![](https://img.aspxhome.com/file/2023/0/61920_0s.jpg)
c#语言使用Unity粒子系统制作手雷爆炸
2021-10-11 11:13:46
![](https://img.aspxhome.com/file/2023/8/92918_0s.png)
C#语法新特性之元组实例详解
2022-09-20 03:05:53
idea +junit单元测试获取不到bean注入的解决方式
2022-12-09 05:59:27
![](https://img.aspxhome.com/file/2023/6/110876_0s.jpg)
SpringCloud Eureka服务注册中心应用入门详解
2022-02-23 08:48:44
![](https://img.aspxhome.com/file/2023/1/79951_0s.png)
C#禁用双击窗体图标关闭窗体的方法
2022-01-04 14:20:04
Java执行cmd命令的举例与注意事项
2023-11-03 10:21:05
Java 是如何利用接口避免函数回调的方法
2023-11-11 10:14:00
java之assert关键字用法案例详解
2022-07-10 23:01:32
![](https://img.aspxhome.com/file/2023/2/61072_0s.png)
Android需要提升权限的操作方法
2021-07-17 11:25:47
C#中派生类调用基类构造函数用法分析
2022-01-14 08:10:22
Java获取指定字符串出现次数的方法
2022-05-11 16:06:23
Mybatis-Plus自动填充更新操作相关字段的实现
2022-01-14 20:43:01