在搭建好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来进行页面数据的局部刷新,客户端和服务器只交互少部分数据,达到局部刷新的效果。不但数据传输量少,而且响应速度快。
原文:https://www.cnblogs.com/lovozcf/p/14346451.html