侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

前端  /  管理员 发布于 5年前   282

导读

本文主要是对connect-history-api-fallback库进行一次源码分析。connect-history-api-fallback是一个用于支持SPA History路由模式的nodejs库。阅读本文前,应对HTML5 History模式有一定程度的了解!

源码分析

/**  * 前端需要开启history模式,而后端根据url并不知道前端在请求api还是在请求页面,如localhost:4200/home这种url,前端理所当然认为“我需要得到html,并跳转到首页”,然而后端并不能区分。 * 因此需要一种判断机制,来使得后端能分析出前端的请求目的。 * connect-history-api-fallback 这个中间件正好帮我们完成了上述分析操作,来看下它是怎么实现的吧! * 第一次把自己的源码分析思路写出来,说得不对的地方,请指出! */'use strict';var url = require('url');exports = module.exports = function historyApiFallback(options) { // 接收配置参数 options = options || {}; // 初始化日志管理器 var logger = getLogger(options); // 中间件是要返回一个函数的,函数形参有req, res, next return function(req, res, next) {  var headers = req.headers;  if (req.method !== 'GET') {   // 如果请求方法不是GET类型,说明不需要返回html,那么就调用next(),把请求交给下一个中间件   logger(    'Not rewriting',    req.method,    req.url,    'because the method is not GET.'   );   return next();  } else if (!headers || typeof headers.accept !== 'string') {   // 如果没有请求头,或者请求头中的accept不是字符串,说明不是一个标准的http请求,也不予处理,把请求交给下一个中间件   logger(    'Not rewriting',    req.method,    req.url,    'because the client did not send an HTTP accept header.'   );   return next();  } else if (headers.accept.indexOf('application/json') === 0) {   // 如果客户端希望得到application/json类型的响应,说明也不是在请求html,也不予处理,把请求交给下一个中间件   logger(    'Not rewriting',    req.method,    req.url,    'because the client prefers JSON.'   );   return next();  } else if (!acceptsHtml(headers.accept, options)) {   // 如果请求头中不包含配置的Accept或者默认的['text/html', '*/*'],那么说明也不是在请求html,也不予处理,把请求交给下一个中间件   logger(    'Not rewriting',    req.method,    req.url,    'because the client does not accept HTML.'   );   return next();  }  // 走到这里说明是在请求html了,要开始秀操作了  // 首先利用url模块的parse方法解析下url,会得到一个对象,包括protocol,hash,path, pathname, query, search等字段,类似浏览器的location对象  var parsedUrl = url.parse(req.url);  var rewriteTarget;  // 然后得到配置中的rewrites,也就是重定向配置;  // 重定向配置是一个数组,每一项都包含from和to两个属性;  // from是用来正则匹配pathname是否需要重定向的;  // to则是重定向的url,to可以是一个字符串,也可以是一个回调方法来返回一个字符串,回调函数接收一个上下文参数context,context包含三个属性(parsedUrl,match,request)  options.rewrites = options.rewrites || [];  // 遍历一波重定向配置  for (var i = 0; i < options.rewrites.length; i++) {   var rewrite = options.rewrites[i];   // 利用字符串的match方法去匹配   var match = parsedUrl.pathname.match(rewrite.from);   if (match !== null) {    // 如果match不是null,说明pathname和重定向配置匹配上了    rewriteTarget = evaluateRewriteRule(parsedUrl, match, rewrite.to, req);    if(rewriteTarget.charAt(0) !== '/') {     // 推荐使用/开头的绝对路径作为重定向url     logger(      'We recommend using an absolute path for the rewrite target.',      'Received a non-absolute rewrite target',      rewriteTarget,      'for URL',      req.url     );    }    logger('Rewriting', req.method, req.url, 'to', rewriteTarget);    // 进行重定向url操作    req.url = rewriteTarget;    return next();   }  }  var pathname = parsedUrl.pathname;  // 首先说明一下:校验逻辑默认是会去检查url中最后的.号的,有.号的说明在请求文件,那就跟history模式就没什么鸟关系了  // 我暂且将上述规则成为“点号校验规则”  // disableDotRule为true,代表禁用点号校验规则  if (pathname.lastIndexOf('.') > pathname.lastIndexOf('/') &&    options.disableDotRule !== true) {   // 如果pathname的最后一个/之后还有.,说明请求的是/a/b/c/d.*的文件(*代表任意文件类型);   // 如果此时配置disableDotRule为false,说明开启点号校验规则,那么不予处理,交给其他中间件   logger(    'Not rewriting',    req.method,    req.url,    'because the path includes a dot (.) character.'   );   return next();  }  // 如果pathname最后一个/之后没有.,或者disableDotRule为true,都会走到最后一步:重写url  // 重写url有默认值/index.html,也可以通过配置中的index自定义  rewriteTarget = options.index || '/index.html';  logger('Rewriting', req.method, req.url, 'to', rewriteTarget);  // 重写url  req.url = rewriteTarget;  // 此时再将执行权交给下一个中间件(url都换成index.html了,后面的路由等中间件也不会再处理了,然后前端接收到html就开始解析路由了,目的达到!)  next(); };};// 判断重定向配置中的tofunction evaluateRewriteRule(parsedUrl, match, rule, req) { if (typeof rule === 'string') {  // 如果是字符串,直接返回  return rule; } else if (typeof rule !== 'function') {  // 如果不是函数,抛出错误  throw new Error('Rewrite rule can only be of type string or function.'); } // 执行自定义的回调函数,得到一个重定向的url return rule({  parsedUrl: parsedUrl,  match: match,  request: req });}// 判断请求头的accept是不是包含在配置数组或默认数组的范围内function acceptsHtml(header, options) { options.htmlAcceptHeaders = options.htmlAcceptHeaders || ['text/html', '*/*']; for (var i = 0; i < options.htmlAcceptHeaders.length; i++) {  if (header.indexOf(options.htmlAcceptHeaders[i]) !== -1) {   return true;  } } return false;}// 处理日志function getLogger(options) { if (options && options.logger) {  // 如果有指定的日志方法,则使用指定的日志方法  return options.logger; } else if (options && options.verbose) {  // 否则,如果配置了verbose,默认使用console.log作为日志方法  return console.log.bind(console); } // 否则就没有日志方法,就不记录日志咯 return function(){};}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • node.js 和HTML5开发本地桌面应用程序
  • NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
  • 基于html5和nodejs相结合实现websocket即使通讯
  • 解决node-webkit 不支持html5播放mp4视频的方法
  • Nodejs+express+html5 实现拖拽上传


  • 上一条:
    深入理解JavaScript 箭头函数
    下一条:
    了解JavaScript中let语句
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客