springmvc4+thymeleaf簡易教程(一)
阿新 • • 發佈:2018-12-10
thymeleaf整合springmvc與整合springboot不太一樣,這裡只介紹springmvc+thymeleaf的搭建。 1、文件結構圖 2、pom.xml中加入依賴
<properties> <thymeleaf.version>2.1.2.RELEASE</thymeleaf.version> </properties> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifactId> <version>${thymeleaf.version}</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>${thymeleaf.version}</version> </dependency> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> <version>1.9.22</version> </dependency>
3、spring配置檔案 springmvc.xml
<!--處理靜態資源--> <mvc:default-servlet-handler/> <!--自動註冊DefaultAnnotationHandlerMapping與AnnotationMethodHandlerAdapter兩個bean--> <mvc:annotation-driven/> <!--自動掃描,需要換成自己的包名--> <context:component-scan base-package="com.zcx.controller"/> <!-- thymeleaf模板解析器 --> <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"> <property name="prefix" value="/WEB-INF/pages/" /> <property name="suffix" value=".html" /> <property name="templateMode" value="LEGACYHTML5" /> <property name="cacheable" value="false" /> <property name="characterEncoding" value="UTF-8"/> </bean> <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine"> <property name="templateResolver" ref="templateResolver" /> </bean> <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver"> <property name="templateEngine" ref="templateEngine" /> <property name="characterEncoding" value="UTF-8" /> </bean>
4、java檔案 User.java
import lombok.Data;
import lombok.ToString;
@Data
@ToString
public class User {
private String name;
private Integer age;
}
HelloController.java
import com.zcx.domain.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HelloController { @RequestMapping("/hello") public String index(Model model) { User u = new User(); u.setAge(10); u.setName("zhou"); model.addAttribute("name", "zcx"); model.addAttribute("user", u); return "hello"; } @RequestMapping("/anotherHtml") public String anotherHtml() { return "anotherHtml"; } }
5、頁面 hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}" >
</script>
<script th:inline="javascript">
$(function(){
});
</script>
</head>
<body>
<p>簡單表示式${}</p>
<p th:text="${name}" />
<p th:text="${user.age}" />
<p>選擇變量表達式*{},*{age} 等價於 ${user.age}</p>
<div th:object="${user}">
<p th:text="*{name}" />
</div>
<p>連結表示式: @{} </p>
<a th:href="@{/anotherHtml}">超連結</a><br />
<p>文字替換</p>
<span th:text="'Welcome to our application, ' + ${user.name} + '!'"></span>
</body>
</html>
anotherHtml.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}" >
</script>
<script th:inline="javascript">
$(function(){
});
</script>
</head>
<body>
<p>anotherHtml</p>
</body>
</html>