thymeleaf实现前后端数据交换的示例详解
作者:lumanman 发布时间:2023-04-18 12:02:54
标签:thymeleaf,数据,交换
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


猜你喜欢
- 想要将一个项目导出为jar包,供其它项目使用,在eclipse中可以直接导出该项目为jar包,而 在AS中可以通过修改gradle才处理。接
- SQLite分析 SQLite是轻量级的、嵌入式的、关系型数据库,
- MyBatis * 介绍MyBatis提供了一种插件(plugin)的功能,虽然叫做插件,但其实这是 * 功能。那么 * 拦截MyBatis
- C# SynchronizationContext及Send和Post使用1、(SynchronizationContext)同步上下文的作
- AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序,它允许你从 DroidDraw 应用 程序下载你的
- Android Studio配置Kotlin开发环境详细步骤第一步:安装Kotlin插件打开Settings面板,找到Plugins选项,点
- 在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能。在Spring Boot控制器中设置数据时,使用LazyContextVariab
- TimeSpan结构:表示一个时间间隔。它含有以下四个构造函数:TimeSpan(Int64)将 TimeSpan结构的新实例初始
- 手机号登录在现在的项目中用的场景非常多,实现起来也不难,今天我们就一起来通过演示实现登录过程。 一、首先需要注册个第三方的账户,比
- 标题栏中的返回按钮在实际使用中用的比较多,今天就来讲讲我在项目开发中的使用经历,话不多说,还是直接上源码,上源码是最给力的。一、 编写自定义
- Spring Boot如何实现分布式系统中的服务发现和注册?随着互联网的快速发展,越来越多的企业开始将自己的业务迁移到分布式系统中。在这种情
- 由Lombok的@AllArgsConstructor注解引发的错误需求:在Service实现中写了一个方法调用第三方接口同步数据。 功能代
- #include <stdio.h>#include <stdlib.h>int main(){ &nbs
- 前言在前后端分离的应用中,前端往往需要向后端发送命令请求,并将请求中的数据以Json格式传递。后端需要将Json格式的数据反序列化成Java
- 一种可以设置滑动动画的控件,只显示一行布局,在布局文件中的ViewFlipper控件中顺序写好每一行的布局(1).MainActivity.
- 这几天在上海出差,忙里偷闲学习了一下Apk的反编译工具的基本使用。下面就简单介绍一下如何将我们从网上下载的Apk文件进行反编译得到我们想要获
- 一、前言Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其他项目的小组件导入。当然,也可以导出来
- 背景在使用Spring Boot Mvc的项目中,使用Long类型作为id的类型,但是当前端使用Number类型接收Long类型数据时,由于
- 前言我们在搭建完集群环境后,不得不考虑的一个问题就是用户访问产生的session如何处理。session的处理有很多种方法,详情见转载的上篇
- 本文实例为大家分享了Android自定义View倒计时圆的具体代码,供大家参考,具体内容如下创建attr<?xml version=&