首页 > 编程语言 > 详细

springMVC整合thymeleaf

时间:2021-01-29 23:40:32      阅读:31      评论:0      收藏:0      [点我收藏+]

  在搭建好springMVC环境后,前端控制器由springMVC框架提供,开发者主要关注应用控制器。应用控制器可以根据客户端请求,调用业务方法,并转发页面。但是,对于页面中展示动态数据的处理,只能以拼接字符串方式进行。

  这样导致应用控制器不但要对业务流程进行控制,而且要需要动态生成响应信息。应用控制器对于生成动态网页繁琐,不利于项目分工。

  解决方案之一,就是采用模版引擎减化动态数据的生成。

  模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

  模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率,良好的设计也使得代码重用变得更加容易。

  常见的模板相擎有:
    1、Thymeleaf
    2、Velocity
    3、Freemarker
    4、jsp


  Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。主要目标是将优雅的自然模板带到开发工作流程中,并将HTML在浏览器中正确显示,并且可以作为静态原型,让开发团队能更容易地协作。Thymeleaf使用Spring框架的模块,与许多常见的工具集成在一起,并且可以插入自己的功能,能够处理HTML,XML,JavaScript,CSS,TEXT,RAW六种模板模式。

  下面来看一下,如何利用内置tomcat+springMVC来整合thymeleaf。

  第一步:导入依赖,在配置类中完成thymeleaf组件的注册。

  先创建一个maven工程,导入tomcat、spring、springMVC的依赖(详见之前的博文),另外,导入thymeleaf相关的依赖:

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

 

  在配置类中,添加thymeleaf组件的注册:

  让指定路径的页面,经过Thymeleaf引擎翻译后再输出到客户端。

    @Bean
    public SpringResourceTemplateResolver templateResolver() {
       SpringResourceTemplateResolver templateResolver = 
                        new SpringResourceTemplateResolver();
       templateResolver.setCharacterEncoding("utf-8");//设置编码集
       //设置模版引擎页面的路径
       templateResolver.setPrefix("classpath:/static/");
       templateResolver.setCacheable(false);
       return templateResolver;
    }
    
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine
                        = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        return templateEngine;
    }

     @Bean
    public ThymeleafViewResolver viewResolver() {
            ThymeleafViewResolver viewResolver = 
                       new ThymeleafViewResolver();
            viewResolver.setCharacterEncoding("utf-8");
            viewResolver.setTemplateEngine(templateEngine());
            viewResolver.setOrder(1); 
            //定义html和xhtml后缀的文件被thymeleaf引擎翻译
            viewResolver.setViewNames(
                   new String[] {"*.html", "*.xhtml"}); 
            return viewResolver;
    }

 

  这里之所以选用"/static/"路径,是为了兼容静态资源路径。静态资源配置的路径为"/static/html",在访问路径设置的是"/html/**",访问静态资源的路径为"/html/……"。这样,在访问thymeleaf构建的html页面时,需要加上"/html/",和普通的静态html页面路径一致。

  第二步,编写应用控制器,在应用控制器中绑定共享数据。

  @Controller
    public class IndexController {
        @RequestMapping("/")
        public String main(HttpServletRequest request){
            //绑定在页面上显示的动态数据
            request.setAttribute("age", 20);
            request.setAttribute("user", new UserBean(3, "朱棣", LocalDate.parse("1998-02-03")));
            
            //请求转发到指定页面
            return "/html/index.html";
        }
    }

 

  上面的应用控制器,只需要在浏览器中输入IP和端口就可以直接访问。

  第三步,编写thymeleaf页面,在thymeleaf页面中显示数据。

  在resources/static/html目录中创建index.html页面,在页面中,申明属性前缀

    <!DOCTYPE html>
    <html  xmlns:th="http://www.thymeleaf.org">

    这样,凡是以"th:"开始的属性,都需要经过thymeleaf引擎翻译,从而在网页中动态显示数据。
    
    那么,在thymeleaf引擎翻译的html页面中,如何显示动态数据呢?
    
    <!--在页面上显示动态数据,属性以th为前缀-->
    姓名:<input type="text" th:value="${user.name}"><br>
    生日:<input type="text" th:value="${user.birthday}"><br>

下面,来看一下,在thymeleaf页面中,如何动态显示图片:

    //控制器中绑定图片路径
    request.setAttribute("face","1.jpg");
    <!--页面显示动态路径的图片-->
    <img th:src="@{‘/html/‘+${face}}" width="200" height="200">

 

  其中,"@{}"的含义为相对于项目上下文路径。

  再来看一下,在thymeleaf页面中,如何书写超链接,并在访问服务器应用控制器时传递参数:

    <!--向服务器传递id和name两个表单数据-->
    <a th:href="@{/update(id=1,name=‘tom‘)}">请求服务器</a>

 

  下面,来看一下,thymeleaf对于流程的控制,先来看一下,判断语句:

    //控制器中绑定数据
    request.setAttribute("score", 88);
<!--页面显示动态数据-->
    <span th:if="${score >= 60}">
            合格
    </span>

 

  不过,在thymeleaf判断语句中,并没有else,所以,可以写成:

    <span th:if="${score < 60}">
            不合格
    </span>

 

  再来看一下,thymeleaf对循环的控制:

    //控制器中绑定数据
    request.setAttribute("userList", Arrays.asList(
     new UserBean(3, "朱棣", LocalDate.parse("1998-02-03"))
     ,new UserBean(9, "胡车儿", LocalDate.parse("1996-08-16"))));
    <!--在页面中循环显示数据-->
    <table border="1" width="500">
        <thead><tr><th>姓名</th><th>生日</th><th>操作</th></tr></thead>
        <tbody>
            <tr th:each="u : ${userList}">
                <td th:text="${u.name}"></td>
                <td th:text="${u.birthday}"></td>
                <td>
                    <a th:href="@{/del(id=${u.id})}">删除</a>
                    <a th:href="@{/findById(id=${u.id})}">查看</a>
                </td>
            </tr>
        </tbody>
    </table>

 


在做分页时,需要显示页码的超链接,这时,需要对整型数据进行遍历,可以用以下方式:

    <span th:each="i : ${#numbers.sequence(1,7)}"  th:text="${i}+‘页‘"></span>

 

好了,thymeleaf基本的用法就介绍到这里。顺便说一下,thymeleaf这种模版引擎的方式,虽然安全性高一些,但是需要由引擎进行翻译后,将整个页面发送给客户端,数据的传输量和网络资源的占用量会大一些,所以执行效率要低一些。对于安全性要求较高的网站可以采用这种方式。但是,对于互联网项目,大多使用ajax来进行页面数据的局部刷新,客户端和服务器只交互少部分数据,达到局部刷新的效果。不但数据传输量少,而且响应速度快。

springMVC整合thymeleaf

原文:https://www.cnblogs.com/lovozcf/p/14346451.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!