快捷導(dǎo)航

thymeleaf實(shí)現(xiàn)前后端數(shù)據(jù)交換的示例詳解

更新時(shí)間：2022年07月09日 14:45:26 作者：lumanman

Thymeleaf?是一款用于渲染?XML/XHTML/HTML5?內(nèi)容的模板引擎，當(dāng)通過(guò)?Web?應(yīng)用程序訪問(wèn)時(shí)，Thymeleaf?會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容，使頁(yè)面動(dòng)態(tài)顯示，這篇文章主要介紹了thymeleaf實(shí)現(xiàn)前后端數(shù)據(jù)交換,需要的朋友可以參考下

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 內(nèi)容的模板引擎。它與 JSP，Velocity，F(xiàn)reeMaker 等模板引擎類似，也可以輕易地與 Spring MVC 等 Web 框架集成。與其它模板引擎相比，Thymeleaf 最大的特點(diǎn)是，即使不啟動(dòng) Web 應(yīng)用，也可以直接在瀏覽器中打開并正確顯示模板頁(yè)面。

1.前端傳數(shù)據(jù)后端接收：

用戶在登錄界面輸入用戶名和密碼傳給后端controller，由后端判斷是否正確！

在html界面中要傳遞的數(shù)據(jù)name命名，通過(guò)表單的提交按鈕會(huì)傳遞給響應(yīng)的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來(lái)對(duì)應(yīng)接收前端要傳遞的參數(shù)，此時(shí)參數(shù)名嚴(yán)格對(duì)應(yīng)html界面中提交的數(shù)據(jù)name名稱！

@RequestMapping("/user/login")
 public String Login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        Model md){      
        }

此時(shí)后端就實(shí)現(xiàn)接收前端傳遞的數(shù)據(jù)

2.后端對(duì)數(shù)據(jù)判斷后返回信息給前端：

controller通過(guò)上述參數(shù)會(huì)接受到html，傳遞的數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行判斷。并且通過(guò)msg將信息傳遞回去。

if(!StringUtils.isEmpty(username)&& "123123".equals(password)){
            return "redirect:/main.html";
        }else{
            md.addAttribute("msg","用戶名或者密碼錯(cuò)誤!");
            return "index";
        }

html頁(yè)面使用thymeleaf引擎接收并且顯示數(shù)據(jù)在界面！

<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

完整的兩個(gè)代碼塊如下：

<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","用戶名或者密碼錯(cuò)誤!");
            return "index";
        }

    }
}

到此這篇關(guān)于thymeleaf實(shí)現(xiàn)前后端數(shù)據(jù)交換的文章就介紹到這了,更多相關(guān)thymeleaf數(shù)據(jù)交換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: