91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-09-01 21:38:23 來源:腳本之家 閱讀:191 作者:Tusi 欄目:web開發

導讀

本文主要是對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();
 };
};

// 判斷重定向配置中的to
function 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(){};
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

汾西县| 和田市| 宜宾市| 桃源县| 镶黄旗| 金山区| 时尚| 永胜县| 毕节市| 新丰县| 肇州县| 巨鹿县| 兴义市| 漳浦县| 石景山区| 宜宾县| 潞城市| 伊川县| 体育| 五常市| 剑河县| 抚顺县| 保靖县| 洛隆县| 台东县| 密山市| 沛县| 将乐县| 淅川县| 美姑县| 城口县| 景谷| 改则县| 马山县| 静安区| 乐安县| 长海县| 香格里拉县| 清流县| 淳化县| 枝江市|