ssm配置thymeleaf替代jsp

2019-10-23  本文已影响0人  haiyong6

项目中一直用jsp，但是spring从很早开始就推荐使用thymeleaf，springboot更是默认推荐thymeleaf，在我看来thymeleaf相比jsp最大的优势在于修改样式的时候不需要启动服务器， 在有网络和无网络的环境下皆可运行，而且完全不需启动WEB应用，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。那么在ssm框架中如何配置呢？

一、pom.xml中引入thymeleaf所需的依赖jar包

在原来Spring SpringMVC Mybatis框架的基础上引入thymeleaf-spring依赖，因为我的spring版本是5的版本所以这里引入了hymeleaf-spring5，具体可以去maven仓库网站（https://mvnrepository.com/
）自行搜索相应版本

        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>

因为引入了thymeleaf-spring5之后maven工具会自动下载以下相应依赖 所以此处不必再单独引入thymeleaf依赖


深度截图_选择区域_20191023212423.png

二、修改原来spring-mvc.xml 配置thymeleaf模板解析器

<?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:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:jee="http://www.springframework.org/schema/jee"
       
       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.xsd
            http://www.springframework.org/schema/aop
            http://www.springframework.org/schema/aop/spring-aop.xsd
            http://www.springframework.org/schema/tx
            http://www.springframework.org/schema/tx/spring-tx.xsd
            http://www.springframework.org/schema/mvc
            http://www.springframework.org/schema/mvc/spring-mvc.xsd
            http://www.springframework.org/schema/jee 
            http://www.springframework.org/schema/jee/spring-jee-2.0.xsd">
       
       <!-- 扫描Controller所在的包 -->
       <context:component-scan base-package="com.ways.app.common.web.controller"/>
       
       <!-- 注解驱动 -->
       <mvc:annotation-driven></mvc:annotation-driven>
        
        <!-- 视图解析器：简化在Controller类编写的视图路径 -->
        <!-- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            前缀
            <property name="prefix" value="/WEB-INF/pages/"/>
            后缀
            <property name="suffix" value=".jsp"/>
        </bean> -->
                
        <!-- 模板解析器  -->
        <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.spring5.SpringTemplateEngine">
            <property name="templateResolver" ref="templateResolver" />
        </bean>
    
        <bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
            <property name="templateEngine" ref="templateEngine" />
            <property name="characterEncoding"  value="UTF-8" />
        </bean>        
</beans>

注释部分是原来配置jsp的部分

三、在/WEB-INF/templates/下面新建hello.html做测试使用

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="/js/jquery-3.4.1/jquery-3.4.1.js" th:src="@{/js/jquery-3.4.1/jquery-3.4.1.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}" />!
    
    <a th:href="@{/commonController/test.do?name=_aref}" th:text="${name}"> query</a>
    <br />
    <form th:action="@{/commonController/test.do}">
        <input type="text" name="name" />
        <button type="submit">submit</button>
    </form> 

</body>
</html>

四、写一个controller方法做测试

@RequestMapping("/commonController/test")
    public String test(HttpServletRequest request, HttpServletResponse response) {
        request.setAttribute("name", request.getParameter("name"));
        return "hello";
    }

五、ApplicationContext.java

package com.ways.app.common.utils;

import javax.servlet.ServletContext;

import org.springframework.stereotype.Component;
import org.springframework.web.context.ServletContextAware;
/**
 * 将ContextPath写入application中，给静态文件引用时用、及URL链接地址用
 */
@Component
public class ApplicationContext implements ServletContextAware {

    @Override
    public void setServletContext(ServletContext servletContext) {
        String ctx = servletContext.getContextPath();
        System.out.println("ctx=" + ctx);
        servletContext.setAttribute("ctx", ctx);
        
    }

}

六、web.xml里的welcome-file指向新建的index.html

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>

七、新建的index.html（做项目启动转发后台接口用）

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8" />

<script type="text/javascript" src="./js/jquery-3.4.1/jquery-3.4.1.js" th:src="./js/jquery-3.4.1/jquery-3.4.1.js}" ></script>
<script th:inline="javascript">
  $(function(){
      window.location=  "./commonController/test.do?name=hi"
  });
</script>
<title>Spring MVC + Thymeleaf Example</title>
</head>
<body>
</body>

</html>

整体的项目结构如下两图所示


深度截图_选择区域_20191023213756.png 深度截图_选择区域_20191023213833.png
启动项目打入项目地址运行自动跳转到如图页面，thymeleaf生效配置成功
深度截图_选择区域_20191023214026.png
源代码已上传github:https://github.com/haiyong6/haiyongsRepository/tree/master/code/ssmTyemeleaf
上一篇下一篇

猜你喜欢

热点阅读