《Spring实战》-第六章:渲染视图(表达式,标签库,模板)

慢慢来比较快,虚心学技术

前言:视图解析器可以将逻辑视图名转换成物理实现 

一、视图解析器

Spring提供了13个基本的视图解析器,能够将逻辑视图名转换为物理实现,如上一篇中提到的InternalResourceViewResolver。

此处我们只了解其中几个比较常用的视图解析器:

  • FreeMarkerViewResolver:将视图解析为 FreeMarker 模板
  • InternalResourceViewResolver:将视图解析为Web应用的内部资源
  • TilesViewResolver:将视图解析为 Apache Tile 定义,其中 tile ID 与视图名称相同。注意有两个不同的TilesViewResolver实现,分别对应于 Tiles 2.0 和Tiles 3.0
  • ThymeleafViewResolver: 将逻辑视图名称解析为 Thymeleaf 模板视图

使用不同的解析器可以实现将视图解析成不同类型的内容展现

二、具体视图解析器分析Demo

Ⅰ、创建JSP视图

基础实现如上一章《Spring实战》-第五章:Web中的Spring(SpringMVC注解实现)所述,InternalResourceViewResolver还支持将逻辑视图名转换成JstlView,我们只需要修改其viewClass为org.springframework.web.servlet.view.JstlView.class即可

@Bean
public ViewResolver viewResolver(){
    InternalResourceViewResolver resourceViewResolver = new InternalResourceViewResolver();
    resourceViewResolver.setPrefix("/WEB-INF/view/");
    resourceViewResolver.setSuffix(".jsp");
    resourceViewResolver.setExposeContextBeansAsAttributes(true);
    resourceViewResolver.setViewClass(org.springframework.web.servlet.view.JstlView.class);
    return resourceViewResolver;
}

Ⅱ、使用Apache Tile视图定义布局

如果一个应用多个视图需要使用很多重复性的内容,如头部,尾部等,或许我们会一个个的去复制使用,但是一旦做了任何更改,将需要同步进行多次更改,效率是很低的。

Apache Tiles是一个JavaEE应用的页面布局框架。Tiles框架提供了一种模板机制,可以为某一类页面定义一个通用的模板,该模板定义了页面的整体布局。布局由可以复用的多个块组成,每个页面可以有选择性的重新定义块而达到组件的复用。

SpringMVC结合Tile使用,案例如下:

引入tiles支持jar包:

<!--tiles-->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.5</version>
</dependency>

①创建TilesConfig配置类,同时定义视图解析器TilesViewResolver

扫描二维码关注公众号,回复: 5879799 查看本文章
@Configuration
@EnableAspectJAutoProxy
@ComponentScan(basePackages = {"com.my.spring.controller"})
@EnableWebMvc /*<mvc:annotation-driven> 开启mvc配置*/
public class TilesConfig {
    /**
     * 定义默认处理器
     */
    @Bean
    public TilesConfigurer tilesConfigurer(){
        TilesConfigurer tilesConfigurer = new TilesConfigurer();
        //指定tiles的位置
        tilesConfigurer.setDefinitions(new String[]{"/WEB-INF/layout/tiles.xml"});
        //开启刷新功能
        tilesConfigurer.setCheckRefresh(true);

        return tilesConfigurer;
    }
    
    //定义使用TilesViewResolver
    @Bean
    public ViewResolver viewResolver(){
        return new TilesViewResolver();
    }
}

②定义Tiles

由上述配置代码中可以,Tiles文件是一个xml文件,创建位于/WEB-INF/layout/tiles.xml,使用<tiles-definitions>作为根节点,使用<definition>节点包裹一个Tile

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <!--定义一个名为base的tile,其模板文件时WEB-INF/layout下的base.jsp-->
    <definition name="base" template="/WEB-INF/layout/base.jsp">
        <!--定义属性header,指向视图/WEB-INF/layout/header.jsp-->
        <put-attribute name="header" value="/WEB-INF/layout/header.jsp"/>
        <!--定义属性footer,指向视图/WEB-INF/layout/header.jsp-->
        <put-attribute name="footer" value="/WEB-INF/layout/footer.jsp"/>
    </definition>
    <!--定义一个名为home的tile,继承了名为base的tile,自动继承header和footer属性-->
    <definition name="home" extends="base" >
        <!--定义属性body,指向视图/WEB-INF/layout/home.jsp-->
        <put-attribute name="body" value="/WEB-INF/view/home.jsp"/>
    </definition>
</tiles-definitions>

③编写主模板base.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--引入tiles标签库-->
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>
<html>
<head>
    <title>base</title>
</head>
<body>
    <div id = "header">
        <!--此处引入上tiles.xml文件中定义的属性header,实际上就是将header属性指向的header.jsp引入此处-->
        <t:insertAttribute name="header"></t:insertAttribute>
    </div>
    <div id="content">
         <!--此处引入属性body,一般来说这个地方都是用来作为空占位,所以base tile才没有body属性,此处是被继承者填充的-->
        <t:insertAttribute name="body"></t:insertAttribute>
    </div>
    <div id="footer">
        <!--此处引入上tiles.xml文件中定义的属性footer,实际上就是将footer属性指向的footer.jsp引入此处-->
        <t:insertAttribute name="footer"></t:insertAttribute>
    </div>
</body>
</html>

④编写属性模板文件:header.jsp和footer.jsp这两个文件作为模板文件都是十分简洁的

header.jsp:
    
    <div style="font-size: medium;font-weight: bolder">TestDemo</div>

footer.jsp:
    <span style="align-content: center">@create by Mr D</span>

⑤编写目标文件:home.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>
<h1>Hello World</h1>

⑥编写基本Controller方法home(),方法返回一个逻辑视图名“home”,经过TilesViewResolver后被解析为完整视图:base.jsp中的body属性由home.jsp填充

@Controller
public class HomeController {

    @RequestMapping(method = RequestMethod.GET,value = "/home")
    public String home(){
        //返回试图名为home的视图
        return "home";
    }
}

⑦浏览器访问结果如下:

Ⅲ、使用Thymeleaf

尽管JSP和Tiles十分便捷,但是终究建立在Servlet的基础之上,有时候很多代码并不是完全的前端代码,使其变得很混乱。

Thymeleaf模板是原生的,不依赖于标签库。它能在接受原始 HTML 的地方进行编辑和渲染

案例如下:

引入Thymeleaf支持jar包:

<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

①创建ThymeleafConfig配置类,装配ThymeleafViewResolver用于将逻辑视图名称解析为 Thymeleaf 模板视图,SpringTemplateEngine用于处理模板并渲染结果;TemplateResolver 用于加载 Thymeleaf 模板

@Configuration
public class ThymeleafConfig implements WebMvcConfigurer {
    @Autowired
    private ApplicationContext applicationContext;
    
    /**
     * 装配模板引擎(解析器),用于处理模板并渲染结果
     */
    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setCharacterEncoding("UTF-8");
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/view/");//指定视图前缀
        templateResolver.setSuffix(".html");//指定视图后缀
        return templateResolver;
    }
    
    /**
     * 装配模板引擎,用于处理模板并渲染结果
     */
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setEnableSpringELCompiler(true);

        return templateEngine;
    }

    /**
     * 装配视图解析器
     */
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setCharacterEncoding("UTF-8");
        resolver.setTemplateEngine(templateEngine());
        registry.viewResolver(resolver);
    }
}

②编写基本页面:ThymeleafHtml.html,绑定bean对象,将bean对象属性作为输出

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf支持-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SpringMVC5+Thymeleaf示例</title>
</head>
<body>
<h1>Spring MVC + Thymeleaf Hello World example</h1>
<p th:text="${bean.id}"></p>
<p th:text="${bean.name}"></p>
</body>
</html>

③编写基础Controller方法,返回逻辑视图名指向ThymeleafHtml.html,并将数据封装返回

@RequestMapping(method = RequestMethod.GET,value = "/getBean")
public String getBeanByParam(String data, Model model){

    JSONObject jo = JSON.parseObject(data);
    Integer id = jo.getInteger("id");
    BaseBean bean = this.baseService.findBean(id);

    model.addAttribute("bean",bean);

    return "ThymeleafHtml";
}

④浏览器访问结果:可以看到,返回的bean成功被绑定到页面属性中

但是,Thymeleaf更出色的地方是实现表单绑定,将表单和对象绑定到一起

⑤创建一个AddBeanHtml.html文件,其中包含一个表单文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="post" action="addBean" th:object="${baseBean}">
        <div class="error" th:if="${#fields.hasErrors('*')}">
            <ul>
                <li th:each="err: ${#fields.errors('*')}" th:text="${err}">
                    Input is incorrect
                </li>
            </ul>
        </div>
        <label th:class="${#fields.hasErrors('id')}?'error'">Id</label>
        <input type="text" th:field="*{id}" th:class="${#fields.hasErrors('id')}?'error'"/><br>
        <label th:class="${#fields.hasErrors('name')}?'error'">Name</label>
        <input type="text" th:field="*{name}" th:class="${#fields.hasErrors('name')}?'error'"/><br>

        <button type="submit">提交</button>
    </form>
</body>
</html>

⑥编写基本控制方法,将上述代码提交的类展示到ThymeleafHtml.html中去

@RequestMapping(method = RequestMethod.POST,value = "/addBean")
public String addBean(BaseBean baseBean, Model model){

    model.addAttribute("bean",baseBean);

    //返回试图名为home的视图
    return "ThymeleafHtml";
}

网页请求如下:

猜你喜欢

转载自blog.csdn.net/Laiguanfu/article/details/88756800