07月03, 2017

Pjax Tiles Spring Boot整合

Pjax是一项可以实现页面五刷新更新的框架,Github也是已经使用这项技术的,大家可以前往体验一下,用户使用感受还是很不错的,没有了整页刷新的等待感觉,让用户更愿意去驻足完成页面的浏览。

今天我们就如何将pjax技术应用到Java Web开发中去做个介绍。

依赖技术

  • Spring Boot
  • Tiles
  • Maven 构建工具
  • Pjax 插件

Spring Boot + Tiles的整合

Spring Boot Web/Jsp依赖

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-devtools</artifactId>
  <optional>true</optional>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-tomcat</artifactId>
</dependency>
<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

Tiles依赖

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>${apachetiles.version}</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-api</artifactId>
    <version>${apachetiles.version}</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>${apachetiles.version}</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>${apachetiles.version}</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-el</artifactId>
    <version>${apachetiles.version}</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>${apachetiles.version}</version>
</dependency>

SpringBoot启动类

@SpringBootApplication(scanBasePackages = "com.xxx")
@MapperScan(basePackages = "com.xxx")
@EnableTransactionManagement
public class HadooperApplication extends WebMvcConfigurerAdapter {

    private Logger logger = LoggerFactory.getLogger(HadooperApplication.class);

    public static void main(String[] args) {
        SpringApplication.run(HadooperApplication.class, args);
    }

    @Bean
    public TilesConfigurer tilesConfigurer(){
        TilesConfigurer tilesConfigurer = new TilesConfigurer();
        tilesConfigurer.setDefinitions(new String[] {"/WEB-INF/views/**/tiles.xml"});
        tilesConfigurer.setCheckRefresh(true);
        return tilesConfigurer;
    }

    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        TilesViewResolver viewResolver = new TilesViewResolver();
        registry.viewResolver(viewResolver);
    }

}

Tiles配置文件

<?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>
    <definition name="default.definition" template="/WEB-INF/layouts/default.jsp">
        <put-attribute name="meta" value="/WEB-INF/views/tiles/default/meta.jsp" />
        <put-attribute name="js" value="/WEB-INF/views/tiles/default/js.jsp" />
        <put-attribute name="stylesheets" value="/WEB-INF/views/tiles/default/stylesheets.jsp" />
        <put-attribute name="nav" value="/WEB-INF/views/tiles/default/nav.jsp" />
        <put-attribute name="header" value="/WEB-INF/views/tiles/default/header.jsp" />
        <put-attribute name="content" value="" />
        <put-attribute name="footer" value="/WEB-INF/views/tiles/default/footer.jsp" />
    </definition>

    <definition name="*.*" extends="default.definition" preparer="com.xxx.common.PJAXViewPreparer">
        <put-attribute name="title" expression="${title}"/>
        <put-attribute name="content" value="/WEB-INF/views/modules/{1}/{2}.jsp"/>
    </definition>

</tiles-definitions>

Tiles自定义Preparer

public class PJAXViewPreparer implements ViewPreparer {
    @Override
    public void execute(Request request, AttributeContext attributeContext) {
        boolean doPjax = false;
        if(request.getHeader().containsKey("x-pjax") ) {
            doPjax = true;
        }
        if(request instanceof ServletRequest) {
            ServletRequest sr = (ServletRequest) request;
            if(sr.getRequestScope()!=null && sr.getRequestScope().get("redirect")!=null) {
                sr.getResponseHeaders().setValue("X-PJAX-URL", (String) sr.getRequestScope().get("redirect"));
            }
        }
        if(doPjax) {
            Attribute template = attributeContext.getTemplateAttribute();
            String templatePath = (String) template.getValue();
            templatePath = templatePath.replace("default", "pjax");
            template.setValue(templatePath);
            attributeContext.setTemplateAttribute(template);
        }
    }
}

Tiles相关目录结构

alt

模块页面目录

alt

Controller示例用法

  @RequestMapping(value = {"", "home"})
    public String home(Model model) throws Exception {
        model.addAttribute("title", "主页");
        return "main.home";
    }

Pjax配置

$(document).on('submit', 'form[data-pjax]', function(event) {$.pjax.submit(event, '#pjax-container')});
    $(document).pjax('a[data-pjax]', '#pjax-container', {scrollTo: false});

页面链接示例

<li><a href="${ctx}/testPjax" data-pjax>TestPjax</a></li>

最终效果截图 alt

完工

大家有什么疑问可以在评论中提出。

Pjax参考

https://strongme.cn/post/pjax-doc-cn.html

本文链接:https://strongme.cn/post/pjax-tiles-springboot-intergation.html

-- EOF --

Comments