動力節(jié)點-SpringBoot3第七章
7?視圖技術(shù)Thymeleaf
Thymeleaf 是一個表現(xiàn)層的模板引擎挠唆， 一般被使用在 Web 環(huán)境中，它可以處理 HTML, XML、 JS 等文檔柱徙，簡單來說席怪，它可以將 JSP 作為 Java Web 應(yīng)用的表現(xiàn)層，有能力展示與處理數(shù)據(jù)蛀序。Thyme leaf 可以讓表現(xiàn)層的界面節(jié)點與程序邏輯被共享欢瞪，這樣的設(shè)計， 可以讓界面設(shè)計人員徐裸、業(yè)務(wù)人員與技術(shù)人員都參與到項目開發(fā)中遣鼓。這樣，同一個模板文件重贺，既可以使用瀏覽器直接打開骑祟，也可以放到服務(wù)器中用來顯示數(shù)據(jù)，并且樣式之間基本上不會存在差異气笙，因此界面設(shè)計人員與程序設(shè)計人員可以使用同一個模板文件次企，來查看靜態(tài)與動態(tài)數(shù)據(jù)的效果。
Thymeleaf作為視圖展示模型數(shù)據(jù)潜圃，用于和用戶交互操作缸棵。JSP的代替技術(shù)。比較適合做管理系統(tǒng)谭期，是一種易于學(xué)習(xí)堵第，掌握的。我們通過幾個示例掌握Thymeleaf基礎(chǔ)應(yīng)用隧出。創(chuàng)建新的Spring Boot項目Lession19-Admin, Maven構(gòu)建工具踏志，JDK19。 Spring Web, Thymeleaf , Lombok依賴胀瞪。包名稱：com.bjpowernode.tpl
7.1?表達式
表達式用于在頁面展示數(shù)據(jù)的针余，有多種表達式語法，最常用的是變量表達式、鏈接表達式圆雁。
@ {...}鏈接?址表達式th:href="@{/css/home.css}"
step1:創(chuàng)建首頁在static/mian.html靜態(tài)資源默認放在static目錄，Spring Boot按約定摸柄，可直接訪問颤练。main.html就是普通的HTML文件。
</body></html>step2：創(chuàng)建Controller驱负，提供數(shù)據(jù)給頁面
step3：templates/目下創(chuàng)建Thymeleaf的文件
exp.html
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>????Title</head><body>??
表達式
????????連接到百度
??連接表達式無參數(shù)
??連接表達式傳遞參數(shù)
</body></html>
link.html
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>????Title</head><body>??
表達式
??id：??姓名：</body></html>7.2?if-for
Thymeaf同樣支持if嗦玖，for語句的使用。
th:if=“boolean表達式”th:if 當條件滿足時跃脊，顯示代碼片段宇挫。 條件常用boolean表示，true滿足酪术，反之不滿足器瘪。
step1：main.html增加連接
2.<a href="if-for">if和for</a>
step2：創(chuàng)建UserVO
| @Data ?@AllArgsConstructorpublic class UserVO {private Integer id;private String name;private Integer age;}
step3:創(chuàng)建控制器方法
| @GetMapping("if-for")public String ifFor(Model model){UserVO userVO = new UserVO(10, "李四",20);model.addAttribute("user", userVO);List users = Arrays.asList(????new UserVO(11, "張三",21),????new UserVO(12, "周行",22));model.addAttribute("users",users);return "base";}
step4:創(chuàng)建base.html模板頁面
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>????Title</head><body>??
if,for 表達式
????????????????????????????????????????????????????????????????????????????id姓名年齡</body></html>
step5:瀏覽器訪問[MISSING IMAGE: , ?]
