springboot項(xiàng)目開發(fā),使用thymeleaf前端框架的簡單案例！我們看一下，如何在springboot項(xiàng)目里面簡單的構(gòu)建一個(gè)thymeleaf的前端頁面。來完成動(dòng)態(tài)數(shù)據(jù)的渲染效果。
第一步，我們在上一小節(jié)，已經(jīng)提前預(yù)下載了對應(yīng)的組件了。
如圖，springboot的強(qiáng)大之處就在于，它有一套完整的版本依賴關(guān)系。管理很方便。插件彼此之間的依賴，不需要我們再去思考了。它自己會(huì)下載所需的依賴包。
在依賴項(xiàng)里面可以看見這個(gè)選項(xiàng)，就是下載成功了。
第二步，我們設(shè)計(jì)一下自己的前端頁面的存檔路徑。?
?如圖，我們在templates文件夾下面新建了一個(gè)index的文件夾，里面新建立一個(gè)index.html文件。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div>
<p>
<span>用戶名字:張三</span>
<span>用戶年齡:21</span>
<span>用戶愛好:騎車，爬山，健身</span>
</p>
</div>
</body>
</html>?暫時(shí)是靜態(tài)的內(nèi)容。等會(huì)我們會(huì)把它改成動(dòng)態(tài)熏染的。
第三步，我們配置一下，thymeleaf基礎(chǔ)的參數(shù)信息。告訴我們的springboot去哪里渲染我們的內(nèi)容。
server.port= 8080
#Thymeleaf 基礎(chǔ)配置參數(shù)
spring.thymeleaf.cache = false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/如上內(nèi)容，這個(gè)就是基礎(chǔ)的。application.properties里面的thymeleaf參數(shù)配置。我們選擇了不開啟緩存。
?第四步，我們提前準(zhǔn)備好一個(gè)user實(shí)體類，存儲我們的動(dòng)態(tài)數(shù)據(jù)，
package com.example.demo.bean;
import java.util.ArrayList;
public class User {
private String id;
private String name;
private String age;
private ArrayList<String> hobby;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public ArrayList<String> getHobby() {
return hobby;
}
public void setHobby(ArrayList<String> hobby) {
this.hobby = hobby;
}
@Override
public String toString() {
return "User{" +
"id='" + id + '\'' +
", name='" + name + '\'' +
", age='" + age + '\'' +
", hobby=" + hobby +
'}';
}
}
第五步，我們新增了一個(gè)UserController控制器。還是一個(gè)簡單的get請求路徑。
測試一下。我們的內(nèi)容能不能渲染到前端頁面內(nèi)。
package com.example.demo.controller;
import com.example.demo.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
@Controller
@RequestMapping("/user")
public class UserController {
@GetMapping("/index")
public String index(ModelMap model){
User user = new User();
user.setId("201212001");
user.setAge("24");
user.setName("老劉");
ArrayList<String> hobbyList = new ArrayList();
hobbyList.add("瑜伽");
hobbyList.add("騎馬");
hobbyList.add("看電影");
user.setHobby(hobbyList);
model.addAttribute("user",user);
//輸入對應(yīng)的前端頁面的名字index
return "/index/index";
}
}
?借助于官方提供的ui.modelMap插件可以完成數(shù)據(jù)的綁定。在前端頁面就可以拿到這個(gè)數(shù)據(jù)來渲染了。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div>
<p>
<span th:text="${user.name}"></span>
<span th:text="${user.age}"></span>
<span th:text="${user.hobby}"></span>
</p>
</div>
</body>
</html>如圖，我們已經(jīng)采取了動(dòng)態(tài)渲染的方式。
看看能不能正常獲取到數(shù)據(jù)。
如圖，確實(shí)是拿到了數(shù)據(jù)信息。至此為止，一個(gè)簡單的thymeleaf前端框架的使用案例就完成了。文章來源：http://www.zghlxwxcb.cn/news/detail-823150.html
后續(xù)我們會(huì)分享，如何讓springboot配合mysql數(shù)據(jù)庫渲染數(shù)據(jù)。?文章來源地址http://www.zghlxwxcb.cn/news/detail-823150.html
到了這里，關(guān)于springboot項(xiàng)目開發(fā),使用thymeleaf前端框架的簡單案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
