thymeleaf实现前后端数据交换的示例详解

 更新时间:2022年07月09日 14:45:26   作者:lumanman  
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎,当通过 Web 应用程序访问时,Thymeleaf 会动态地替换掉静态内容,使页面动态显示,这篇文章主要介绍了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";
        }

    }
}

到此这篇关于thymeleaf实现前后端数据交换的文章就介绍到这了,更多相关thymeleaf数据交换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • IntelliJ IDEA修改新建文件自动生成注释的user名

    IntelliJ IDEA修改新建文件自动生成注释的user名

    今天小编就为大家分享一篇关于IntelliJ IDEA修改新建文件自动生成注释的user名,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • IDEA如何实现显示类的所有方法

    IDEA如何实现显示类的所有方法

    这篇文章主要介绍了IDEA如何显示类的所有方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 用Java连接sqlserver数据库时候几个jar包的区别分析

    用Java连接sqlserver数据库时候几个jar包的区别分析

    这篇文章主要介绍了用Java连接sqlserver数据库时候几个jar包的区别分析,需要的朋友可以参考下
    2014-10-10
  • IDEA集成git和使用步骤的实现方法

    IDEA集成git和使用步骤的实现方法

    这篇文章主要介绍了IDEA集成git和使用步骤的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Mac M1 Java 开发环境配置详解

    Mac M1 Java 开发环境配置详解

    这篇文章主要介绍了Mac M1 Java 开发环境配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 向Spring IOC 容器动态注册bean实现方式

    向Spring IOC 容器动态注册bean实现方式

    这篇文章主要为大家介绍了向Spring IOC 容器动态注册bean实现方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JAVA IDEA项目打包为jar包的步骤详解

    JAVA IDEA项目打包为jar包的步骤详解

    在Java开发中我们通常会将我们的项目打包成可执行的Jar包,以便于在其他环境中部署和运行,下面这篇文章主要给大家介绍了关于JAVA IDEA项目打包为jar包的相关资料,需要的朋友可以参考下
    2024-08-08
  • java.text.DecimalFormat用法详解

    java.text.DecimalFormat用法详解

    这篇文章主要为大家详细介绍了java.text.DecimalFormat用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • Java下界通配符(? super Type)的使用

    Java下界通配符(? super Type)的使用

    在Java中,? super Type是一个下界通配符,本文主要介绍了Java下界通配符(? super Type)的使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • SpringCloud整合Nacos实现流程详解

    SpringCloud整合Nacos实现流程详解

    这篇文章主要介绍了SpringCloud整合Nacos实现流程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09

最新评论