《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

@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>

[图片上传中...(image-bd63b2-1553308187599-15)]

⑥编写基本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";
}

网页请求如下：

《Spring实战》-第六章:渲染视图（表达式，标签库，模板）

一、视图解析器

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

Ⅰ、创建JSP视图

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

Ⅲ、使用Thymeleaf

.Net 8.0 下的新RPC，IceRPC之试试的新玩法"打洞"

完美替代postman的软件

Vue mockjs mock.js

关于游戏付费的一点想法

我通过CKA和CKS啦！

安装chromadb注意事项

《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer

大数据怎么学？对大数据开发领域及岗位的详细解读，完整理解大数据开发领域技术体系

SpringCloud上手實戰一、初始搭建SpringCloud項目環境

SpringCloud上手實戰-前言-微服務架構簡析

記一次關於待辦任務的鏈接設計需求設計思路總結

記一次activiti監聽器無法實例化的錯誤解決過程(SpringBoot Listener)

記一次關於待辦任務的鏈接設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結