最近在研究一個前後端通用的高效能模板引擎，大概搜尋了下資料，有很多類似的模板引擎，比如Jade，Mustache.js，Dust.js，Nunjucks，EJS等等，當然只適用於前端或者只適用於後端的模板引擎就不算啦，比如（jquery template，freeMaker等）。綜合考慮了一下上邊的幾個模板引擎，其中jade在github的start最高，然後試用了下果然很強大，那麼就選擇他啦!

先簡要介紹下jade，Jade 是一個高效能的模板引擎，它深受 Haml 影響，它是用 JavaScript 實現的，並且可以供 Node 使用。它具有客戶端支援、程式碼高可讀、靈活的縮排、塊展開、靜態包含、屬性改寫、安全，預設程式碼是轉義的、執行時和編譯時上下文錯誤報告等等一系列特徵，最主要的是jade有其他語言的實現，可以實現前後端渲染的統一，當然裡面就有java語言啦！

這次我們就來通過jade模板配置SpringMVC控制檢視輸出，取代jsp檢視。哈哈，專案使用maven控制，著重寫下配置，SpringMVC搭建配置省略哈。

第一步：環境準備
1、引入spring-jade4j，這個是jade與spring整合包，pom.xml配置如下：

<dependency>
     <groupId>de.neuland-bfi</groupId>
     <artifactId>spring-jade4j</artifactId>
     <version>0.4.0</version
 
>
</dependency>

2、引入jade4j，這個是jade包，pom.xml配置如下：

<dependency>
     <groupId>de.neuland-bfi</groupId>
     <artifactId>jade4j</artifactId>
     <version>1.2.1</version>
</dependency>

第二步：配置jade檢視
在SpringMVC配置檔案中，註釋掉之前jsp檢視解析器部分程式碼，新增jade檢視配置

<!--jsp 檢視解析配置-->
 

<!--bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/view/"/>
        <property name="suffix" value=".jsp" />
     </bean-->

    <!--jade templateLoader 模板載入屬性配置，預設字尾是jade，編碼是UTF-8，這裡可以不需要在配置了--> 
    <bean id="templateLoader" class="de.neuland.jade4j.spring.template.SpringTemplateLoader">
        <property name="basePath" value="/WEB-INF/view/"/>
    </bean>
    <!--jade configuaration 配置中心，可以配置快取內容，美化輸出格式等-->
    <bean id="jadeConfiguration" class="de.neuland.jade4j.JadeConfiguration">
        <property name="prettyPrint" value="false"/>
        <property name="caching" value="false"/>
        <property name="templateLoader" ref="templateLoader"/>
    </bean>
    <!--jade viewResolver 檢視解析-->
    <bean id="viewResolver" class="de.neuland.jade4j.spring.view.JadeViewResolver">
        <property name="configuration" ref="jadeConfiguration"/>
        <property name="renderExceptions" value="true"/>
    </bean>

好了，經過上邊配置，一個jade檢視配置完成了。

第三步：Controller呼叫檢視輸出

package com.api.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.api.bean.Book;

import de.neuland.jade4j.Jade4J;
import de.neuland.jade4j.exceptions.JadeCompilerException;


@Controller
@RequestMapping(value = "/jade/")
public class JadeController {

    @RequestMapping(value = "index1")
    public ModelAndView goJadePage(){
        List<Book> books = new ArrayList<Book>();
        books.add(new Book("The Hitchhiker's Guide to the Galaxy", 5.70, true));
        books.add(new Book("Life, the Universe and Everything", 5.60, false));
        books.add(new Book("The Restaurant at the End of the Universe", 5.40, true));

        ModelAndView mv = new ModelAndView("pages/index");
        mv.addObject("books", books);
        mv.addObject("pageName", "My Bookshelf");
        return mv;
    }   

    @RequestMapping(value = "index2")
    @ResponseBody
    public String goJadePageHtml(){
        List<Book> books = new ArrayList<Book>();
        books.add(new Book("The Hitchhiker's Guide to the Galaxy", 5.70, true));
        books.add(new Book("Life, the Universe and Everything", 5.60, false));
        books.add(new Book("The Restaurant at the End of the Universe", 5.40, true));

        Map<String, Object> model = new HashMap<String, Object>();
        model.put("books", books);
        model.put("pageName", "My Bookshelf");

        String html = "";
        try {
            html = Jade4J.render("D:/jade/pages/index.jade", model);
        } catch (JadeCompilerException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return html;
    }
}

說明：
1、goJadePage（）方法是經過Spring配置之後，返回檢視預設就是jade檢視，jade模板位置位於/WEB-INF/view/目錄下，所以這裡直接返回“pages/index”就是返回到/WEB-INF/view/pages/index.jade模板啦，寫法跟之前js檢視的寫法一模一樣，改動量很小，是不是很爽。
2、goJadePageHtml（）方法這裡沒走Spring的jade檢視配置，這裡主要是演示一下直接使用jade模板生成html程式碼，返回給前端，這個也是有業務場景使用到的。

第四步：配置jade模板
在/WEB-INF/view/目錄下新建pages目錄，以及templates目錄，在pages目錄下新建檔案index.jade，內容如下：

html
  head
    title= pageName
  body
    include ../templates/header.jade
    ol#books
      for book in books
        if book.available
          li #{book.name} for #{book.price} €
    include ../templates/footer.jade

在templates目錄下新建header.jade以及footer.jade，程式碼如下：
header.jade

h1 this is header page

footer.jade

h1 this is footer page

注意：這裡jade的寫法有點跟平時html寫法不一樣哈，具體的可以訪問jade官網doc看下詳細的語法規則，寫的還是很詳細的，這裡我使用了include語法，把header和footer靜態引入到index頁面，方便維護和修改。

來張截圖吧：

jade模板功能非常強大，如果想真正掌握它，是得好好研究一下的，最後，附上jade參考資料地址：
jade4j
spring-jade4j
jade
jade api