修改pom.xml引入Thymeleaf相关包:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>xuan</groupId> <artifactId>springmvc</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>springmvc Maven Webapp</name> <url>http://maven.apache.org</url> <properties> <spring.version>4.1.3.RELEASE</spring.version> <thymeleaf.version>2.1.2.RELEASE</thymeleaf.version> </properties> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring.version}</version> </dependency> <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> </dependencies> <build> <finalName>springmvc</finalName> </build> </project>
修改springmvc-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:util="http://www.springframework.org/schema/util" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.0.xsd"> <!-- 激活@Controller模式 --> <mvc:annotation-driven /> <!-- 对包中的所有类进行扫描,以完成Bean创建和自动依赖注入的功能 需要更改 --> <context:component-scan base-package="org.xuan.springmvc.controller" /> <mvc:resources location="/static/" mapping="/static/**" /> <!-- 模板解析器 --> <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"> <property name="prefix" value="/WEB-INF/templates/" /> <property name="suffix" value=".html" /> <property name="templateMode" value="HTML5" /> <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> </beans>
在WEB-INF下面新建templates目录,在templates下面新建hello.html:
<html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="static/js/jquery-1.10.2.min.js" th:src="@{/static/js/jquery-1.10.2.min.js}"></script> <script th:inline="javascript"> $(function(){ var _ctx = [[${application.ctx}]]; alert("Project ContextPath:"+_ctx); alert("路径:"+$("#ctx").val()); }); </script> <title>Spring MVC + Thymeleaf Example</title> </head> <body> <!-- Project ContextPath --> <input type="hidden" id="ctx" th:value="${application.ctx}" /> Hello, <span th:text="${name}" />! <br /> Hello, <span th:text="${query}" />! <br /> Hello, <span th:text="${submit}" />! <br /> <a th:href="@{/query?name=a_href}"> query</a> <br /> <form th:action="@{/submit}"> <input type="text" name="name" /><input type="text" name="age" /> <button type="submit">submit</button> </form> </body> </html>
修改MainController.java:
package org.xuan.springmvc.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.servlet.ModelAndView; @Controller public class MainController { @RequestMapping(value = "/{name}", method = RequestMethod.GET) public String getMovie(@PathVariable String name, ModelMap model) { model.addAttribute("name", name); model.addAttribute("query", ""); model.addAttribute("submit", ""); return "hello"; } @RequestMapping(value = "/query", method = RequestMethod.GET) public String query(@RequestParam("name") String name, ModelMap model) { model.addAttribute("name", ""); model.addAttribute("query", name); model.addAttribute("submit", ""); return "hello"; } @RequestMapping(value = "/submit", method = RequestMethod.GET) public String submit(@RequestParam("name") String name, @RequestParam("age") String age, ModelMap model) { model.addAttribute("name", ""); model.addAttribute("query", ""); model.addAttribute("submit", name + age); return "hello"; } }
整个项目的目录结构如下:
运行效果:
1
2
3