SpringMVC+jade实现高性能模板引擎(简单配置)

最近在研究一个前后端通用的高性能模板引擎,大概搜索了下资料,有很多类似的模板引擎,比如JadeMustache.jsDust.jsNunjucksEJS等等,当然只适用于前端或者只适用于后端的模板引擎就不算啦,比如(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页面,方便维护和修改。

好了,大功告成啦!现在启动服务,访问下http://127.0.0.1:8080/projectName/jade/index1http://127.0.0.1:8080/projectName/jade/index2看看效果吧!是不是跟jsp一样一样哒!

来张截图吧:

jade模板功能非常强大,如果想真正掌握它,是得好好研究一下的,最后,附上jade参考资料地址: jade4j spring-jade4j jade jade api

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

SoapUI实践:自动化测试、压力测试、持续集成

因为项目的原因,前段时间研究并使用了 SoapUI 测试工具进行自测开发的 api。下面将研究的成果展示给大家,希望对需要的人有所帮助。 SoapUI 是什么?...

2953
来自专栏Python

Python 按当前日期(年、月、日)创建多级目录的方法

1351
来自专栏大内老A

WCF后续之旅(11): 关于并发、回调的线程关联性(Thread Affinity)

对于一般的多线程操作,比如异步地进行基于文件系统的IO操作;异步地调用Web Service;或者是异步地进行数据库访问等等,是和具体的线程无关的。也就是说,对...

21010
来自专栏jessetalks

全面理解 ASP.NET Core 依赖注入

DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚。另外再介绍一下...

4308
来自专栏along的开发之旅

Android逆向分析概述

学习逆向的初衷是想系统学习Android下的hook技术和工具, 想系统学习Android的hook技术和工具是因为Android移动性能实战这本书. 这本书里...

4524
来自专栏问天丶天问

AJAX 表单序列化

1183
来自专栏james大数据架构

Android实现TCP断点上传,后台C#服务实现接收

终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因...

2359
来自专栏编程心路

一文读懂SpringMVC中的文件上传与下载

这两天研究了一下 SpringMVC 中文件上传与下载,也遇到了一些坑,这里做个总结。

1493
来自专栏along的开发之旅

Android逆向分析概述

学习逆向的初衷是想系统学习Android下的hook技术和工具, 想系统学习Android的hook技术和工具是因为Android移动性能实战这本书. 这本书里...

1083
来自专栏difcareer的技术笔记

ELF中可以被修改又不影响执行的区域

看雪上这篇文章讲述了两种对so进行加固的方法:1. 分离section,对整个section进行加密。2.在.text section直接寻找目标函数并进行加密...

834

扫码关注云+社区