spring-boot项目freemarker模板使用jquery.pjax实现页面无刷新渲染

栏目: jQuery · 发布时间: 6年前

内容简介:先看效果图pjax是啥,自行百度,关于它的兼容性可以看一下我另一篇博客:

先看效果图

spring-boot项目freemarker模板使用jquery.pjax实现页面无刷新渲染

pjax是啥,自行百度,关于它的兼容性可以看一下我另一篇博客: https://tomoya92.github.io/2017/04/25/nodejs-pjax/

创建项目,引入文件

使用IDEA创建一个spring-boot项目,只需要 web freemarker 依赖就够了

引入 jquery jquery.pjax cdn可以使用 https://www.bootcdn.cn/

定义controller

@Controller
public class PjaxController {

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @GetMapping("/book")
  public String book() {
    return "book";
  }

  @GetMapping("/computer")
  public String computer() {
    return "computer";
  }

  @GetMapping("/phone")
  public String phone() {
    return "phone";
  }

}

开发页面

说明:页面里的请求分两种:正常超链接、pjax请求,因为有两种,所以要开发两套layout布局

  • 正常的layout里有网站用到的css, js等通用元素
  • pjax的layout只是一个空布局文件,里面啥都没有

layout.ftl

<#macro html>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
    }
  </style>
</head>
<body>
<header style="background-color: green; height: 50px; width: 100%;"></header>
<section>
  <nav style="float: left; width: 30%;background-color: bisque;">
    <ul>
      <li><a href="/">index</a></li>
      <li><a href="/book" data-pjax>book (pjax)</a></li>
      <li><a href="/computer" data-pjax>computer (pjax)</a></li>
      <li><a href="/phone" data-pjax>phone (pjax)</a></li>
    </ul>
  </nav>
  <div id="pjax-container" style="float: right; width: 70%; background-color: aliceblue;">
    <#nested />
  </div>
</section>
<footer style="clear: both;background-color: black; height: 50px; width: 100%;color: #fff; line-height: 50px;"></footer>
<script>
  $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container');
  var date = new Date();
  $("footer").html(
    date.getFullYear() + "-"
      + (date.getMonth() + 1)
      + "-" + date.getDay()
      + " " + date.getHours()
      + ":" + date.getMinutes()
      + ":" + date.getSeconds()
      + ":" + date.getMilliseconds()
  );
</script>
</body>
</html>
</#macro>

layout-pjax.ftl

<#macro html>
  <#nested />
</#macro>

拦截器处理请求类型

@Component
public class PjaxInterceptor implements HandlerInterceptor {

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

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
    return true;
  }

  @Override
  public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) {
    Boolean pjax = Boolean.parseBoolean(request.getHeader("X-PJAX"));
    logger.info("is pjax: {}", pjax);
    if (pjax) {
      modelAndView.addObject("layoutName", "layout-pjax.ftl");
    } else {
      modelAndView.addObject("layoutName", "layout.ftl");
    }
  }

  @Override
  public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) {

  }
}

然后配置拦截器拦截所有请求

@Component
public class PjaxWebMvc extends WebMvcConfigurationSupport {

  @Autowired
  private PjaxInterceptor pjaxInterceptor;

  @Override
  protected void addInterceptors(InterceptorRegistry registry) {
    super.addInterceptors(registry);
    registry.addInterceptor(pjaxInterceptor)
        .addPathPatterns("/**");
  }
}

其它页面

说明: <#include layoutName> 里的 layoutName 就是从拦截器里设置的布局文件名

index.ftl

<#include layoutName>
<@html>
  index page
</@html>

book.ftl

<#include layoutName>
<@html>
  <p>this is a book</p>
</@html>

computer.ftl

<#include layoutName>
<@html>
  <p>this is a computer</p>
</@html>

phone.ftl

<#include layoutName>
<@html>
  <p>this is a phone</p>
</@html>

jquery.pjax 和 websocket 绝配呀,关于spring-boot里集成websocket的教程可以查看我另一篇博客 https://tomoya92.github.io/2018/08/20/spring-boot-netty-socketio/

原文链接:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

刘强东自述

刘强东自述

刘强东 / 中信出版集团 / 2016-6-1 / 49.00

京东 1998年,京东还只是中关村一个经营光磁生意的小柜台,月营业额仅有几万元,如今则已经成长为中国营收规模超大的互联网企业,2015年全年营收1813亿,总交易额达到4627亿元; 为解决电商“最后一公里”的痛点,创立并自建B2C物流模式; 经常被争议,却始终坚持“不挣快钱”,选择上市不是因为“缺钱”,只为让合作伙伴睡得着觉,为用户和社会创造价值,由此成就让整个华尔街一片京东红......一起来看看 《刘强东自述》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码