Spring Boot入門<三>SpringBoot的web程式設計相關及thymeleaf模板引擎
阿新 • • 發佈：2020-09-17
一.SpringBoot在web程式設計中的"約定大於配置"（WebMvcAutoConfiguration）
1.靜態資源預設路徑，如果沒用thymeleaf可以localhost:8080/Xxx.html訪問到
"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/
2.首頁面的約定位置
classpath:index.html
3.favicon.icon位置:更換時可能有瀏覽器快取
classpath:favicon.icon
二.thymeleaf
1View Code@RequestMapping("/index") 2 public String demo01(Model model){ 3 model.addAttribute("value","世界屬於三體!"); 4 return "index"; 5 } 6 7 public class User{ 8 private String name; 9 private int age; 10 private String html5; 11 private User friend;12 13 public String getHtml5() { 14 return html5; 15 } 16 17 public void setHtml5(String html5) { 18 this.html5 = html5; 19 } 20 21 public User(){ 22 name = "雲天明"; 23 age= 10; 24 friend= new User("程心",26);25 html5="<p>三個哲學故事</p>"; 26 } 27 28 public User(String name, int age){ 29 this.name= name; 30 this.age = age; 31 } 32 33 public String getName() { 34 return name; 35 } 36 37 public void setName(String name) { 38 this.name = name; 39 } 40 41 public int getAge() { 42 return age; 43 } 44 45 public void setAge(int age) { 46 this.age = age; 47 } 48 49 public User getFriend() { 50 return friend; 51 } 52 53 public void setFriend(User friend) { 54 this.friend = friend; 55 } 56 } 57 58 @RequestMapping("/demo02") 59 public String demo02(Model model){ 60 User u = new User(); 61 model.addAttribute("user",u); 62 return "demo02"; 63 } 64 65 @RequestMapping("/demo0101") 66 public String demo0101(Model model){ 67 model.addAttribute("date",new Date()); 68 69 ArrayList<User> list = new ArrayList<User>(); 70 User user1 = new User(); 71 user1.setName("1111"); 72 list.add(user1); 73 74 User user2 = new User(); 75 user2.setName("2222"); 76 list.add(user2); 77 78 User user3 = new User(); 79 user3.setName("3333"); 80 list.add(user3); 81 82 model.addAttribute("users",list); 83 84 return "demo01"; 85 }
1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo01</title> 6 </head> 7 <body> 8 <!--thymeleaf相關物件:#ctx thymeleaf的pageContext #request #session #response #servletContext--> 9 <!--thymeleaf全域性物件:#dates #calendars #arrays #numbers #bools #strings #sets #lists #maps--> 10 <!--字串的拼接利用||進行OGNL表示式內容與字面值字串的拼接--> 11 <span th:text="|今天是：${#dates.format(date,'yyyy-mm-dd')}|"></span> 12 <div th:each="user,stat : ${users}"> 13 <span th:text="${user.name}">5555</span> 14 <span th:text="${user.friend.name}">5555</span> 15 <div th:switch="${user.name}"> 16 <span th:case="'1111'">我是1111</span> 17 <span th:case="'2222'">我是2222</span> 18 <!--<span th:case="'3333'">我是3333</span>--> 19 <span th:case="*"> 20 <!--thymeleaf指令碼的預處理--> 21 <script th:inline="javascript"> 22 const user = /*[[${user}]]*/ {}; 23 const age = /*[[${user.age}]]*/ 20; 24 console.log(user); 25 console.log(age) 26 </script> 27 </span> 28 </div> 29 </div> 30 </body> 31 </html>View Code
1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h2 th:object="${user}"> 9 <h3>只有大腦的：<span th:text="*{name}">預設</span></h3> 10 <h3>威懾紀元<span th:text="*{age}">預設</span>年</h3> 11 <!-- 當瀏覽器不能相容HTML5 時需要用data-th的指令形式 --> 12 <h3>無法揮劍的：<span data-th-text="*{friend.name}">預設</span></h3> 13 <hr/> 14 <!-- 為防止HTML的注入，${}表示式獲取的值會將符號進行格式化例 < 格式化為 < 15 這時如果不需要格式化需要用 th:utext 指令--> 16 <h3>OGNL表示式輸出純文字:<span th:text="*{html5}">預設</span></h3> 17 <h3>OGNL表示式輸出HTML5解析:<span th:utext="*{html5}">預設</span></h3> 18 </h2> 19 </body> 20 </html>View Code