1. SpringBoot頁面展示Thymeleaf
開發傳統Java WEB工程時，我們可以使用JSP頁面模板語言，但是在SpringBoot中已經不推薦使用了。SpringBoot支持如下頁面模板語言
上面並沒有列舉所有SpringBoot支持的頁面模板技術。其中Thymeleaf是SpringBoot官方所推薦使用的，下面來談談Thymeleaf一些常用的語法規則。
要想使用Thhymeleaf，首先要在pom.xml文件中單獨添加Thymeleaf依賴。
Spring Boot默認存放模板頁面的路徑在 src/main/resources/templates 或者 src/main/view/templates ，這個無論是使用什麼模板語言都一樣，當然默認路徑是可以自定義的，不過一般不推薦這樣做。另外Thymeleaf默認的頁面文件後綴是 .html 。
在MVC的開發過程中，我們經常需要通過 Controller 將數據傳遞到頁面中，讓頁面進行動態展示。
創建一個Controller對象，在其中進行參數的傳遞
在SpringBoot默認的頁面路徑下創建show.html文件，內容如下
可以看到在 p 標簽中有 th:text 屬性，這個就是thymeleaf的語法，它表示顯示一個普通的文本信息。
如果我們要顯示的信息是存在資源文件中的，同樣可以在頁面中顯示，例如資源文件中定義了內容 welcome.msg=歡迎{0}光臨！ 。可以在頁面中將其顯示
另外，在 th:utext 中還能做一些基礎的數學運算
如果我們想要傳遞到的頁面的信息，它本身是帶有CSS樣式的，這個時候如何在頁面中將攜帶的樣式信息也顯示出來？此時我們的控制器方法這樣寫。
此時頁面中需要藉助 th:utext 屬性進行顯示
通過瀏覽器查看頁面源碼可以看出 th:utext 和 th:text 的區別是： th:text 會對 < 和 > 進行轉義，而 th:utext 不會轉義。
我們常常需要將一個bean信息展示在前端頁面當中。
上面給出了兩種展現方式，一種是通過${屬性}，另外一種是通過 {屬性}。
關於「${屬性}」和「 {屬性}」的區別？
$訪問完整信息，而訪問指定對象中的屬性內容， 如果訪問的只是普通的內容兩者沒有區別；
在 thymeleaf 之中提供有相應的集合的處理方法，例如：在使用 List 集合的時候可以考慮採用 get()方法獲取指定索引的數據，那麼在使用 Set 集合的時候會考慮使用 contains()來判斷某個數據是否存在，使用 Map 集合的時候也希望可以使用 containsKey()判斷某個 key 是否存在，以及使用get()根據 key 獲取對應的 value，而這些功能在之前並不具備，下面來觀察如何在頁面中使用此類操作
在傳統WEB工程開發時，路徑的處理操作是有點麻煩的。SpringBoot中為我們簡化了路徑的處理。
頁面之間的跳轉也能通過@{}來實現
雖然在這種模版開發框架裡面是不提倡使用內置對象的，但是很多情況下依然需要使用內置對象進行處理，所以下面來看下如何在頁面中使用JSP內置對象。
thymeleaf 考慮到了實際的開發情況，因為 request 傳遞屬性是最為常用的，但是 session 也有可能使用，例如：用戶登錄之後需要顯示用戶 id，那麼就一定要使用到 session，所以現在必須增加屬性范圍的形式後才能夠正常使用。在 thymeleaf 裡面也支持有 JSP 內置對象的獲取操作，不過一般很少這樣使用。
所有的頁面模版都存在各種基礎邏輯處理，例如：判斷、循環處理操作。在 Thymeleaf 之中對於邏輯可以使用如下的一些運算符來完成，例如：and、or、關系比較（>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne）。
通過控制器傳遞一些屬性內容到頁面之中：
不滿足條件的判斷
通過swith進行分支判斷
在實際開發過程中常常需要對數據進行遍歷展示，一般會將數據封裝成list或map傳遞到頁面進行遍歷操作。
我們常常需要在一個頁面當中引入另一個頁面，例如，公用的導航欄以及頁腳頁面。thymeleaf中提供了兩種方式進行頁面引入。
可以看到頁面當中還存在一個變數projectName，這個變數的值可以在引入頁面中通過 th:with="projectName=網路" 傳過來。
2. 前端JavaScript後端SSH框架如何實現後端數據傳到前台頁面展示
如果是用的jsp，那麼一般所說的list會在controller裡面，放到request作用域內，直接在jsp頁面用el表達式就能取到，
如果是後端提供的介面，那麼就是js裡面通過介面請求到數據之後在js裡面處理就可以了
一般來說，如果是jsp的話，顯示頁面的過程是由請求為主驅動的，
如果是介面形式的話，這個流程就完全是由前端事件為主來驅動了，
無論哪種請款都不是由後端來驅動的，所以盡量不要說成是後端傳值給前端
3. 前端，點擊彈出一個新的html頁面
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<buttonclass="open-modal">點擊我以後，你就點不到我了</button>
<divclass="mask"style="display:none;position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,.8)"></div>
<divclass="modal"style="display:none;transform:translate(-50%,-50%);left:50%;top:50%;position:fixed;width:300px;height:300px;background-color:#fff;border-radius:10px;">
<buttonclass="close-modal">關閉我</button>
</div>
<script>
document.addEventListener("DOMContentLoaded",function(){
varmask=document.querySelector('.mask')
varmodal=document.querySelector('.modal')
varopen=document.querySelector('.open-modal')
varclose=document.querySelector('.close-modal')
open.addEventListener('click',function(e){
mask.style.display='block'
modal.style.display='block'
})
close.addEventListener('click',function(e){
mask.style.display='none'
modal.style.display='none'
})
})
</script>
</body>
</html>
4. web前端頁面展示是如何實現的
使用freemarker是最方便的
添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
然後直接在src\main\resources\templates，寫.ftl文件作為前端頁面就行了
5. 資料庫數據從後台到前端頁面展示
使用Ajax數據，這是前端可以做到的，PHP也可以直接輸入數據