Thymeleaf部分
- 引入依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 添加控制器類
注意要使用@Controller
當通路路徑的時候 會傳回resources下的檔案
/**
* @author: LXY
* @create: 2023-02-20 11:08
* @Description:
*/
@Controller
@RequestMapping("/band")
public class BandController {
@GetMapping("/index")
public String index(Model model){
//調用模闆
model.addAttribute("userName","張三");
model.addAttribute("id","123456");
// return "band/index";
return "index";
}
}
- 在resources目錄下建立目錄templates
然後建立檔案index.html
- 在html中引入标簽
<!doctype html>
<htmlxmlns="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<metaname="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<pth:text="${userName}"></p>
<pth:text="${id}"></p>
</body>
</html>
- 啟動springboot項目打開浏覽器輸入後端位址+接口即可通路到頁面
例如本案例中 位址為http://127.0.0.1:8080/band/index
Tailwindcss部分
需要環境node.js 沒有的小夥伴可以自己搜尋下相關教程安裝一個
1.在任意地方建立一個檔案夾，如tailwindcss
2.然後在此目錄下打開cmd(指令提示符)輸入
npm init -y
3.之後安裝tailwindcss的一些庫 在cmd中輸入
npm install tailwindcss postcss-cli autoprefixer
當看到多了modules檔案夾和package-lock.json就是成功了
4.建立配置.js檔案，在cmd中輸入以下指令
npx tailwind init
如果多了tailwind.config.js檔案就是成功了
5.在同級目錄下建立一個css目錄然後建立一個tailwind.css檔案
6.修改package.json檔案中的scripts中的代碼并儲存（大意為使用tailwind的建構方法建構）
{
"name": "115-8-6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "tailwind build css/tailwind.css -o dist/tailwind.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.4.13",
"postcss-cli": "^10.1.0",
"tailwindcss": "^3.2.7"
}
}
7.最後在cmd中輸入
npm run build
生成出來的tailwind.css檔案就是我們需要的樣式檔案了
可以在原生的html中使用
<!-- 引用 -->
<link rel="stylesheet" href="tailwind.css" target="_blank" rel="external nofollow" >
Thymeleaf模闆渲染+Tailwindcss整合
1.在resource目錄下建立一個static檔案夾
2.将剛生成的tailwind.css丢進去
3.在index.html中引用
<!doctype html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引用 -->
<link rel="stylesheet" th:href="@{/css/tailwind.css}" target="_blank" rel="external nofollow" />
<title>Document</title>
<style>
/*@import url("./dist/gouba.css");*/
</style>
</head>
<body>
<div class="bg-blue-300">233</div>
<p th:text="${userName}"></p>
<p th:text="${id}"></p>
</body>
</html>
通路測試 div233有藍色背景 大功告成
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)