2

thymeleaf实现前后端数据交换 - 路漫漫qixiuyuanxi

 2 years ago
source link: https://www.cnblogs.com/lumanmanqixiuyuanxi/p/16460306.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

thymeleaf实现前后端数据交换

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')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
		</form>
@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";
        }

    }
}
在这里插入图片描述

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK