7月16日學習內容:把jsp頁面轉化爲html頁面

今天學習的是使用thymeleaf把JSP文件轉化爲HTML。html

要注意在meta.INF裏面的context.xml文件裏數據庫的連接和用戶名密碼。spring

首先在servlet裏對配置文件進行追加(追加thymeleaf的配置文件):數據庫

<!-- thymeleaf的視圖解析器 -->post

<bean id="templateResolver"學習

class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">spa

<property name="prefix" value="/WEB-INF/html/" />設計

<property name="suffix" value=".html" />orm

<property name="templateMode" value="HTML5" />xml

</bean>htm

<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">

<property name="templateResolver" ref="templateResolver" />

</bean>

<bean id="viewResolverThymeleaf" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">

<property name="templateEngine" ref="templateEngine" />

<property name="characterEncoding" value="UTF-8"/>

<property name="order" value="0"/>

</bean>

而後第二步,把Jsp文件刪除 創建同名的html文件

注意得在每一個html文件的頂頭寫入解析代碼:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

讓頁面與thymeleaf相關聯,不然在頁面沒法解析。

3導入幾個包以下:

thymeleaf-2.1.4.RELEASE.jar

thymeleaf-spring4-2.1.4.RELEASE.jar

unbescape-1.1.0.RELEASE.jar

但這三個包並打不開看不了裏面有什麼。

4.特別注意的是thymeleaf對每一個文件的要求比較嚴格,須要在每句話的結束加個結束符,也就是反斜杆。不然會出錯。

而後對該該加的th: 的地方加入th:

例如就是我創建的三個html頁面的代碼:

注意加橫線的那個地方要加上

login: 

<form action="initupdate" th:object="${userBean}" method="POST">

 <input name="userId" type="text" th:value="${userBean.userId}"/>

 <input name="userName" type="text" th:value="${userBean.userName}"/>

${message}

<button type="submit" name="update">更改</button>

</form>

hellloWorld: 

<form action="init" th:object="${userBean}" method="post">

<input name="userId" type="text"/>

<button type="submit" name="insert">插入</button>

<button type="submit" name="search">搜索</button>

</form>

search:

<div th:each="userInfo,status:${List}">


<table>

<tr>

       <td><a th:href="@{delete?(userId=${userInfo.userId})}">Do you want it?<span th:text="${userInfo.userId}">250</span></a></td>

       <td><span th:text="${userInfo.userName}"></span></td>

</tr>

</table>

</div>

千萬注意這幾個頁面代碼,細小的錯誤就能致使錯誤。

最後在html頁面中要輸入值的話必需要使用標籤<span>,具體的寫法參考search頁面的寫法。標籤中的250數字是用來在靜態頁面中隨意顯示一個值,保證美工人員能看到值顯示在何處,寫什麼都無所謂,不寫也沒有關係,但不寫美工不知道值在哪,很差設計頁面。

相關文章
相關標籤/搜索