《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

這個網絡爬蟲代碼，拿到數據之後如何存到csv文件中去？

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

【面試準備】【SQL】數據庫有哪些約束？

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

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

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

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

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

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

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

linux以太網驅動總結