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

最后

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

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();

};

};

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值