thymeleaf算前后端分离吗（thymeleaf实现前后端数据交换）

用户在登录界面输入用户名和密码传给后端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

声明：本站所有文章 
 
 
 
 
 
 
 
 ，如无特殊说明或标注 
   
   
   
   
   
   
   
   
，均为本站原创发布
 


 


 


 


 


 


 


 


。任何个人或组织
 

 

 

 

 

 

 

 
，在未征得本站同意时
 

 

 

 

 

 

 

 

 ，禁止复制 
  
  
  
  
  
  
  
  、盗用
  
  
  
  
  
  
  
  
 、采集
 


 


 


 


 


 


 


 


、发布本站内容到任何网站 
 
 
 
 
 
 
 
 、书籍等各类媒体平台 
 
 
 
 
 
 
 
 。如若本站内容侵犯了原著者的合法权益                ，可联系我们进行处理
   
   
   
   
   
   
   
   
 。