thymeleaf實現前後端數據交換

来源:https://www.cnblogs.com/lumanmanqixiuyuanxi/archive/2022/07/09/16460306.html
-Advertisement-
Play Games

1.前端傳數據後端接收: 用戶在登錄界面輸入用戶名和密碼傳給後端controller,由後端判斷是否正確! 在html界面中要傳遞的數據name命名,通過表單的提交按鈕會傳遞給響應的controller,在controller將需要的name接收! <input type="text" name=" ...


 

 

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>

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";
        }

    }
}

在這裡插入圖片描述


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 多網卡綁定: 把多塊網卡邏輯上綁在一塊使用,對外就相當於一塊網卡,他們共用一個ip地址。 好處: 防止一塊網卡壞了就無法使用,提升帶寬。 工作模式: mod=0:輪詢模式,兩個網卡輪流處理數據包。 提升帶寬和容錯性 mod=1:主備模式,住在一個網卡上處理,主壞了就使用備用的。 只提升了容錯性 註: ...
  • 目錄 一、前景回顧 二、鎖的實現 三、使用鎖實現console函數 四、運行測試 一、前景回顧 上回我們實現了多線程,並且最後做了一個小小的實驗,不過有一點小瑕疵。 可以看到黃色部分的字元不連續,按道理應該是“argB Main”,這是為什麼呢?其實仔細思考一下還是很好得出結論。我們的字元列印函數是 ...
  • 記錄一次重裝電腦黑屏問題解決辦法與解決思路 2022年7月9日,因本身電腦是win7電腦,而我又想要安裝office2020版,可2020版需要win10系統,於是綜上需求,鄙人決定重裝電腦。可誰能想到,這是噩夢的開始!!! 第一次重裝 如往常一般,熟練的插上PE盤,熟練的清空硬碟數據,熟練的重裝系 ...
  • 基本網路配置 網路配置的幾個相關設置: 主機名 IP/netmask 路由:預設網關 DNS伺服器(主DNS伺服器、次DNS伺服器、第三個DNS伺服器) 實現名字解析的 主機名設置 修改主機名的方法: 持久化配置: 方法一:使用hostnamectl命令 #(只支持centos7以上的版本),修改了 ...
  • 1、前言 直接看代碼 uint32_t Time_Interval() { static uint32_t old_time_tick; uint32_t data; data = sys_time_tick_ms - old_time_tick; old_time_tick = sys_time_ ...
  • 寫在前面 大家在做板級電源設計的時候往往會有一種慣性思維: 要麼選擇自己曾經用過的電源晶元來搭建電路; 要麼直接選公司或者實驗室里現有的一些模塊; 但是你選的這個電源器件很有可能是不符合你的使用場景的,這就會造成很多的問題。 經典的不一定是最好的,經典也有過時的時候! 當然涉及到板級電源的設計是一個 ...
  • 零除的處理 用NULLIF(col, 0)可以避免複雜的WHEN...CASE判斷, 例如 ROUND(COUNT(view_50.amount_in)::NUMERIC / NULLIF(COUNT(view_50.amount_out)::NUMERIC, 0),2) AS out_divide ...
  • 一、Css基本語法 1.Html和Css沒分開時 點擊查看代碼 <!DOCTYPE html> <html lang="en"> <head> <!--規範,<style>可以編寫css的代碼,每一個聲明,最好使用分號隔開 語法: 選擇器{ 聲明1; 聲明2; 聲明3; } --> <meta ch ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...