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数字是用来在静态页面中随意显示一个值,保证美工人员能看到值显示在何处,写什么都无所谓,不写也没有关系,但不写美工不知道值在哪,很差设计页面。

相关文章
相关标签/搜索