00:00
好嘞,各位,那在这一小节呢,我们给大家讲一下view当中路由器的两种工作模式,同时呢,也会讲到一个项目上线的基本流程,希望各位呢注意听我们观察一下浏览器的地址栏,这个东西好像自从我们开始学习路由啊,就一直陪伴着我们是吧?我们怎么称呼它呀?啊,叫井号以后呢,别说井号了,换个词儿,官方一点叫做哈希这块呢,我声明一下,在我本小节所有提到的哈希跟数据加密无关,只是站在一个前端人员的角度去分析路径而已。OK啊,精准点说各位,路径里面从井号开始一直到井号后边所有的东西都算作路径里面的哈希纸老师,哈希纸这东西存在有什么意义吗?来哈希值最大的特点就是它不会随着HTTP请求发给服务器。哎呀,说老师越说我越晕,什么东西就有HTTP请求,又不给服务器了呢?来同学这么说大家就懂了,我们之前啊讲那个测试代理的时候,是不是用过一个服务器啊,叫做SERVER1 server1和SERVER2,其实哪个都可以,他俩最大的特点就是只要有人访问他们了,他就能输出一些基本的信息,对吧?各位,哎,我们就是借着这个输出的基本信息呢去分析,来各位走着启动一下这个服务器一啊,Node server1启动了吧,我访问这个地址,它是不是能给我一些学生的信息啊,好,复制回到浏览器里面,新开一个页签啊,走着,我要学生的数据,哎,是不是来了啊,那在这呢就有输出,哎,有人请求服务器一了,请求的资源是请求来自于各位,听我说我们关注的是这个东西,请求的资源是好,接下来呢,我改改路径啊,我把路径里面加上点哈希纸,那就意味着我得写这东西是不井号后边的。
01:56
都算哈希值来开始写什么什么什么什么就随便来啊,想写什么你就写什么,好,多写点,OK,再来一个艾特硅谷同学写的够多了吧?那你听我说,所有红色框里边的东西不会作为路径的一部分发给服务器的,不信你瞧着我改完路径了吧,回车,同学,我得到的是什么?是不还是学生信息啊?而且回到服务器一里,你自己瞧,他说请求的资源依然是students。哎,有细心的人说,老师,不对,这多了个斜杠,没关系,斜杠后边没有东西就行呗。啊说老师,那这有什么作用吗?来同学想想啊,如果没有哈希值的存在,那我可以这样说,你路径里面哪怕写了一个小小的逗号,都得作为路径的一部分,是不是传给服务器啊?那有了哈希值的存在,你就可以这么玩了,我路径诶写的很长很长,但是其中有一部分不想给服务器,就作为哈希值存在,是不是就可以了,哎,那。
02:56
如果说我删掉哈希值,你注意看啊,各位是不?后边这些可不是哈希值了呀,都是路径的一部分吧,瞧效果啊,走咋了?你看一下这个网络请求,他告诉你什么呢?404啥意思?就是你找服务器要的资源,服务器没有,为啥没有呢?看一下你找他要的啥资源?服务器有students不假,服务器可没有这些东西是不?各位,OK,这回明白了吧,哈希值最大的特点就是不会作为路径的一部分发给服务器,只是前端人员自己在玩是不?哎,自己家那点事儿不会带给服务器的,OK,给它关掉,那么整个路由器一共有两种工作模式,默认它开启的就是哈希工作模式,特点就是里边有这东西啊,那还有另外一种工作模式,各位就是history工作模式,啥意思呢?这是不是有历史记录的意思啊,你给他调一下啊,你就明白了,来回到我的路由配置里面,同学通过这么一个属性。
03:56
告诉路由器更改工作模式默认的同学,它开启的就是哈希模式,如果你想改,你得借助这么一个配置项,叫做mode啊,它的值呢,同学有两个选择,要么你选择history,要么你选择哈希,默认的当然是哈希,这回我选择history,好保存一下,那这个时候呢,回到页面里面说老师这怎么还有井号呢?各位脚手架的特点是你改了代码之后,在当前的路径进行刷新,所以说你想看到最新的结果呀,你得这样新开一个页签,哎,走着,好,各位特点出来了,来,控制台我也开好啊,特点出来了咋了?没有后边那井号了?来同学我点一下了,抱它啊,走走走走走,哎,同学,看看这路径是不是很干净啊?哎,我问你有那井号吗?没有,有哈希纸吗?是吧?哎,标准点说有吗?没有。
04:50
所以说同学你看就两种工作模式呗,一个带有哈希值啊,后边这些路由的名啊,全是以哈希值的形式呈现的,还有一种呢,没有哈希值,哎,看起来如此的干净对不?那同学你喜欢哪个呢?反正两种抉择嘛,你用哈希,那你就得接受路径里面出现这东西是不啊,那你想用这个history,那就好看一点嘛,就美观一点嘛,直接是杠,你喜欢用哪个?我觉得但凡有点审美的人都得喜欢这种吧,是不啊,当然你说老师我天生就对这井号呢比较钟爱,那就两说了是吧?哎,所以说同学,明显这个看起来干净一点是不啊?那说一下他俩目前的第一个区别啊,各位,嗯,肯定是从路径上来说它不好看,它好看啊,说说这个更重要的区别啊,各位,就是这个井号哈,这个哈希纸虽然丑,但是它的兼容性好,哎,就一些旧的浏览器里边,你发现点路由跳转的时候,诶也行,那这个黑。
05:50
History呢,虽然好看,但是兼容性你听我说略差,我没说差,说差到不行了,同学,略差哎,就跟它相比,那肯定是差点意思的,舒老师,就就这么个区别啊,就哈不哈希的就是一个兼容性问题,不仅仅是兼容性问题,同学,这还涉及到一个项目上限的问题来,同学啊,现在我们捋一波路由器两种工作模式,一个是哈希,一个是history,哈希的特点是有这个所谓的井号,而history的特点是没有这个井号,一个美观,一个不美观,一个兼容性好,一个兼容性略差,对不?各位好,接下来说另外一个问题,就是项目写完了要上线,怎么上线?说老师不懂,啥叫上线呀?就是你的代码已经写完了,就写到这儿,我不用再写任何一行代码了,所有的功能都实现了,然后啊,你们公司的后端人员就得来找你了,说小张啊,你那前端东西到底写没写完呢,我这边等着着急要呢啊,你说我写完了呀,他说快快快赶紧给我,我得放在服务器上,得让用户去看呢,得运行起来呀。
06:50
哎,然后啊,你就做了这么一个让人笑掉大牙的事儿,你把整个src,还有这个public啊,你复制粘贴给人家了,然后后端工程师啊,就拿到了你的这些点view文件,哎,你听我说人家就放在这个服务器上了,好,服务器呢,开始运行了,把你所写的这些东西啊,作为服务器里的资源去呈现给用户,随后呢,有一个用户啊,就请求了这个服务器,说我想看看页面结果啊,服务器啊把点文件给了这个用户。
07:20
那同学你说用户的浏览器拿到了点view文件,他不懵逼才怪,你说呢,各位谁家浏览器认识点view啊?嘿,所以说同学在这个环节出的问题,你不应该把这个点view什么乱七八糟的你给人家是不?你说浏览器同学咱就拿这举例子,浏览器哪认识这呀temp类的这些东西啊,还有mean.gs浏览器哪认识nport这语法啊,那也就是说各位你得进行一个动作,就把你所有写的这些东西得经过一次打包,打包是啥意思?就是把你这些东西生成最纯粹的点atl.css.gs对吧?各位,我甭管你拿什么react什么,我不管你用什么写的,我不管你学过什么路由,这个那个的生命周期我都不管,你最终给人家的,你给后端人员往服务器上放的,必须得是这文件是不诶那现在遇到这麻烦事儿了,我怎么能把我这点比又啥的诶转。
08:21
本程这种东西啊,那就涉及到第二个命令了,来各位打开pack.jason我们之前一直用哪个呀?好像一直用这个是吧?各位,哎,天天在这n PM run serve serve serve同学,Serve的目的是开启个啥8080这台内置的小服务器,用于支撑你这东西的运行是不?但是项目写完了,你可别在这serve了,干嘛呀,用这个build build最大的特点就是能把你所写的那些东西生成最纯粹的atl CSS,还有JSOK,来吧,试试啊,各位走着脚手架关不关其实无所谓啊,再开一个终端NPM叫做build,不是builder啊,是build好了回车。这个过程呢,取决于你项目的大小,如果你写的代码特别多,那肯定就会慢一点,同时也取决于你电脑硬盘的读写速度啊。OK,稍微等它一会儿,你看building for production正在进行生产环境的构建,OK,同学,完事了。哎,舒老师,你这。
09:21
咋这么快呢?你那也快,咱们这点东西才多少代码啊啊来各位发现啊,一个特殊的文件夹出来了,哦,在这儿呢,Dis Dis什么意思啊,本身就有打包是吧?哎,什么这个打包包裹的意思是不dist?来我们看一下生成的东西长什么样呢?打开这个Dis。诶,同学,是不是有CSS,是不是有GS,还是不是有网站的这个页签图标,是不是还有这个呀?OK,同学,你看最原始的这些文件,你打开这个JS里面,你见不到任何一个点view文件是不是?嗯,说老师这map是啥呀,你学过咱上硅谷webpa的同学肯定知道,这map不是映射文件吗?是不在这儿不多提了啊,啊,如果忘了回头看看那个webpad啊,那个课程,OK,说老师那这些东西我得咋用呢?老师咋只有一个页面呢?同学,你学啥呢?不就学这个单页面应用呢,对不对,有一个点itl很正常啊,这块呢,同学我强调一下,就是刚才啊,你在执行那个npm build的时候,他忽略这些文件了,他不看这些,同学,这些东西是我们为了讲课整出来的,人家看啥,人家只看这src,你这里面写啥了,人就打包啥,OK啊,还有这个啊,外带着这个东西,他把那页面和偏爱图标是吧?哎,这俩东西就这个,哎这俩东西他不得拿出来吗?OK说老师哎呀可算整完了,我赶紧看看这页面长什么样,来双击打开呀。
10:39
老师这是这是什么鬼呢?我东西都没了呀,我那about home呢,咋都没了呢?各位说一下啊,打包出来的文件必须得放在服务器上进行一个动作,叫做啥部署这个词儿,大家听没听过,部署哎,就是把你的东西放在这个服务器上,叫叫部署,哎不能说直接双击打开就看你得交给一个服务器,但是我们没有服务器是不?哎说老师要不用这个5000这个,我不想用这个啊,这里边因为我写了很多的东西啊,大家容易乱,所以说我这样,各位这5000这个啊,刚才咱拿它测试,测试完了就不要它了,说我说那接下来呢,来听我说接下来我拿note GS,哎,然后呢,用上price这个框架,现场给你搭建一个微型的服务器,把我的这些东西诶给它部署上去,OK,所以说接下来我写的代码,同学,如果你一行都不懂,也不耽误你是一个前端开发工程师对吧?哎,但如果说本着这个知识面广的原则,你最好了解一下。
11:39
Note JS和express是吧?诶接下来我写的是服务端代码,来同学回到桌面新建这么一个文件夹啊叫做什么呢?叫做DEMO,右键Vs code的打开。那想用express第一步是不是得安装啊,那想安装的第一步呢,是不是得把它变为一个合法的包啊,N PM init啊,名字呢,你就随便取了啊,比如说在这呢,我叫做at硅谷,然后呢,下划线,Test server,好,剩下的这些一路回车就完事了,接下来NP mi express,哎,给它安装上非常快啊。
12:14
好,右键新建一个服务器主文件serve.js,嗯,然后里边的开始写,首先第一步来把这个关掉,第一步引入谁a price等于同学,这就不能用什么ES6的模块化了,还记得吗?得用什么来着?Common JS那个模块化对不对?我得用这么一个词叫做require,引入吗?哎,引入谁呢?Express,嗯,一再强调啊,看不懂也没关系,Cost创建一个APP服务实例对象,Express直接调用是不是就可以?随后APP点是得调一个东西叫做listen端口监听,我给它开在五千零几呢零五吧,诶然后在这呢有一个回调,回调呢会收到一个错误对象,那我得进行一个判断,就是如果没有这个错误,那我就得输出一句话,Conslo就叫做服务器启动成功了,对吧?各位来个感叹号,OK,写完了,那随便呢,给它配置一个后端的路由,就是app.get起个什么名字呢?比如说叫做person吧,诶,我就能给你返回一个学生的信息啊,不是学生是一个人的信息是吧,那在这呢。
13:14
有两个参数,一个叫做req,一个叫做re,全称其实它叫做request,它叫做response,对吧?啊,那我一般呢,都简写这叫res,这呢叫req OK,简单写点啊,Res点三的是不是给服务器,诶给客户端是吧?返回东西,返回的不是字符串,返回一个人的对象名字呢,叫做Tom,然后那年龄呢,随便给他写一个吧,比如说让他是18岁,OK,写完了一个微型的服务器就搭建起来了,那么接下来呢,诶启动一下这个服务器,输入node,然后server是不是就启动了呀,启动成功了,来我们测试一下,访问5005,看看能不能给我一些人的信息是吧?来打开这个浏览器,走输入local host不是8080了,是5005,然后呢,访问的是person,走着人的信息是不是回来了,各位OK啊,说老师那这也不行啊,这局只有一个人呢,那再多配置点呗,同学,不配置那么多了,一个够用了。接下来说另外一个问题,就是如果一个。
14:14
东西真的上线了,我得把我前端的那些静态资源,啥叫静态资源,就是前端写完的HTMLCSSGS这些东西都叫做静态资源,那放在哪呢?来一般啊,有这么一个文件夹,同学你叫佩奇,其实都行啊,但是标准点来说,一般叫这个static,静态的,有的时候呢,也叫这个public啊,那在这呢,我选择这个static,哎,静态的,然后这里边呢,可以放一些前端写完的东西,比如说demo.html,哎,是前端小伙子是吧,写的这么一个页面,写一个H1啊,叫做你好啊,OK,哎,这页面写完了,随后呢,怎么把这个页面让服务器去认识呢?哎,那就得借助一个中间件,叫做app.use使用谁呢?A surprise身上有这么一个中间件,叫做static,专门用于指定静态资源,需要我们的传入一个路径,哎,我这么写啊,直接写下划线,下划线DR name,然后加上拼成。
15:15
的地址是当前目录下的这个static,哎,如果你之前学过弄的JS,对这一块代码应该不陌生,对吧?各位,好了,写完了,那接下来呢,停掉服务器,重新再启动,这个时候各位我们测试一下啊,看看能不能访问这个demo.hml回到这个里面,我不要person了,那我要什么呢?直接写demo.html诶,这时候你发现页面就拿到了,而且呢,你可以写的更省心一点,各位你别让它叫DEMO,换个名叫index.al,那这个时候你就发现你找他要东西的时候啊,不用说的那么明白了,就直接写5005就可以了,默认就去找index,那当然如果你不嫌麻烦,你也可以这么写index点,别太忙对吧?各位,哎,那一般来说呢,我们就不写了,那如果服务器准备到这个程度,我就可以进行部署了,来把刚才脚手架生成的这一堆文件直接放在这里面就可以了,哎,来,我先把。
16:15
把这个呢,给它删掉啊,然后把我们生成的这些摁住松手放进来,同学,这就是前端工程师的工作成果呀,是吧?各位啊,那换了静态资源啊,其实你重不重启都行啊,本着比较稳的原则吧,我停一下,哎,然后呢,我再开启,这个时候你看好了各位,你这东西咱都能关了啊,就咱之前写这个来脚手架啥的给它停掉,开发完了还啥脚手架呀,前端工程师下班了,关了各位资源已经部署上去了,这时候你看着啊,来直接访问5005同学来了,控制台呢,也打开刷新一波,你所写的那些东西都好用啊,老师,我看一下老爸的呀,为啥不让看呢?因为你的那个local storage age当中没有那个school对吧?老师,我之前有啊,之前是8080这网站有,是不,现在这个5005是不是没有,哎说老师这是怎么回事呢,你脚手架一旦要一关,哎,他在这儿呢,就每隔一段时间就问问脚手架,你咋不理我了呢,你咋不理我了呢?哎,所以说在这报错这会儿呢,不用去理会。
17:15
哎,回到这儿,各位,你去这个local store age当中,你给他准备一个school名字呢,At硅谷,你发现这回啊,他就可用了,来瞧着about对吧?各位,这些东西都可用,这就是项目上限了是不?各位什么8080啊边儿去吧,脚手架呢,没有了,静态资源已经生成了是吧?各位,但是在这儿有一个特别严重的问题,各位,就是你1.1点点呢,它好使,你一刷新它就废。为啥呢?来瞧效果啊各位,我1.1点点,我问你整个过程当中走不走网络请求不走啊,点这个是吧,诶点这个点这个是不是不走网络请求,也就是说我压根儿没有联系5005那台服务器全是我自己前端路由来回跳对不对,各位哎,看看消息123,这时候你注意我一刷新它就废了,瞧着啊,刷新完了。
18:07
咋了?看控制台404了,哎说老师这为什么呀,你说说为什么吧,同学你后边这些东西是不是都当成资源去请求服务器啊,服务器这同学哪有home下的message服务器只有一个person。啊说老师,那我1.1点点为啥没问题呢?哥们儿,你一点点点他不发网络请求啊,你琢磨琢磨来回到这儿啊,这确实得发一下,这同学你这不发你这页面哪来的,咱说接下来点的时候走走走走,同学就这些动作,我问你啊,发网络请求吗?不发你这些动作只是说你一点影响历史记录的变化,完了前端路由器给它监测到了,完了给你呈现,但是同学你一刷新谁也救不了你了,你一刷新人家认为这些东西,哎呀我的妈呀,这不都是路径吗?赶紧赶紧带给服务器,结果你带不要紧,服务器说你边去,我可没那玩意儿,对吧,我有person,我哪有,你说这什么home message,这什么鬼呀,所以说同学你看history模式是有这个问题的。
19:08
哎,说老师那听你这意思,哈希模式就没这问题,是的,哈希模式就没这问题,来验证各位打开我们的脚手架啊,不行了,项目出问题了,前端人员啊,赶紧回来,还得加班是吧?哎,刚才下班了赶紧叫回来,来不是这个啊,不是这个,是这个啊,哎,走着,所以说项目上线吧,你最好吧,跟人家一起看着点是吧,你别卡,静态资源打包完了,然后你就走了,来咱改一下啊,各位找到路由,找到工作模式啊,不给他调成history,给他调成哈希模式啊,来走哈希,这回呢,重新给他打包啊,执行npm around build走着。稍等一会儿啊。OK,重新打包完了,那这个时候呢,再打开这个Dis,那你就得告诉人家,你说我再给你一套这些东西是不?哎,找到服务器那边去啊,服务器在这儿呢,把这个里边的这个这个这个这些东西全都给它删掉,然后告诉人家说我又打包了一套静态资源,你重新部署一下放在这儿,OK,那这个时候呢,停掉服务器,再重新启动一下,那这个时候注意了,各位我再访问5005走你诶这回是不是有那个井号了,有哈希值了吧,各位走着走着走着走着,这些东西是不都能看呀,最主要的是刷新的时候一点事没有,为什么?那是因为后边的这些东西都不算作是资源,找服务器去,要是不各位这些东西都不会带给服务器的,准确来说,连同这个井号以及后边的东西都不会带给服务器的,所以说同学你看不出现404那个问题,说老师那我记住了以后呢,那就这样呗,啊上线的时候必须得用哈希模式。
20:56
不能用那个history模式,那同学是这样,History模式呢,毕竟路径好看一点,所以说呢,各位一般来说啊,我们也会去使用那个history模式去上线的,说老师那不404吗,有解决办法,那怎么解决呢?来各位回到我的前端里面啊,我重新把这调整一下,还让它是history模式,然后呢,我重新打包一下啊,咱们接下来就聊一聊,我就想用这个history模式,我到底怎么去解决404这个问题啊,稍等等着他打包。
21:28
服务器呢,在这儿我给它停掉啊,这些东西呢,我都给它删掉,一个是这个这个这个这个都给它删掉,等着那边打包完啊,打包完了吧,再重新找到Dis来,把这里边儿所有的东西再复制一份给它放在服务器里面,好松手,服务器呢,重新启动啊,还是访问这个5005,这回呢,就是没有哈希值的路由了,走走走,那刷新肯定得废是吧,各位怎么能让他不废呢?同学,这就不能说我们前端怎么写了,得是后端人员努力的配合你才行。
22:02
因为你想想各位,你只要一刷新页面没商量这些东西是不是都带给服务器了,哎,那就得是服务器的后端工程师帮助我们了,也就是说你想彻底根治一刷新history模式404这个问题,必须得找后端工程师去啊说老师那后端工程师怎么办呀?他就会根据目前服务器里面他所写的这些资源,以及你这边带过来的这些资源,他进行一个匹配,然后最终决定一下哪些是前端路由的,哪些是属于它的后端路由的,是不?各位啊舒老师呢,就一点一点写呗,不是有很多种方式的,那在这呢,就给大家推荐一个note GS里的中间件,专门用于解决这个问题的。哎说老师那Java服务器呢,它也有一些固定的类库,在这儿呢,我们就不提了,因为大家对Java不熟啊,咱们对noes可能还是有所了解的啊,那这个时候呢,打开NPM这个网站啊,我们去搜索一下,有这么一个比较优秀的中间件啊,它的名字叫做connect,然后杠这里来一个history啊,叫做。
23:02
API就这个东西,专门用于在nos里面去解决history模式404的问题,也就是说如果你不用这个东西,那就自己一点一点写那个正则匹配是不?哪块是前端的,哪个是我这边的,如果前端的我给你返回什么东西是不?哎,就自己写,但有它呢,就简单了,把这个东西给它复制一下,回到服务器里,同学,这是服务器里的一个中间件啊,NP mi走可不是view里的中间件,同学,解决这个404的问题得靠后端工程师啊,说老师,那接下来呢,很简单啊,把它引入一下就得了呗,复制它都给你写好了,直接放在这块引入,他用的是war啊,我们用constant写完了吧,那接下来呢,你得应用这个中间件,但是你注意一下顺序,各位必须得在这个静态资源之前去使用,来吧,app.use用谁呢?History走你它是一个函数,得调用,写完了吧,好重新开启你的服务器,这个时候你就神奇般的发现,诶各位试试啊,走,点一下点一下点。
24:02
再点一下刷新走着也不出现问题是不?哎,所以说同学404这个问题想根治那呀,你就得找谁去后端工程师,我知道还有一些野路子可以用这个东西nja解决是吧?如果你对nja熟,其实你自己就明白了,它只是起到一个中间代理的作用,他去分辨一下你给我这东西到底是后端路由还是前端路由,对不?各位啊,这就是一个基本的上线流程以及处理路由404的这么一个问题啊,回到笔记里面,我们总结一波吧,各位啊,路由器的两种工作模式,对于一个URL来说是吧,因为哈希这个词呢,经常出现在我们的编程世界里面啊,你比如说数据结构与算法里边有这些东西啊,然后这个数据加密也有,我们在这说的只是对于前端工程师分析URL这个地址来说。什么是哈希值呢?就是井号及其后面的内容就是哈希值。哈希值不会包含在HTTP请求中,即哈希值不会带给服务器哈希模式来三个注意点地址中。
25:02
永远带着井号有点不美观,若以后将地址通过第三方手机APP分享,若APP校验比较严格,则地址会被标记为不合法,啥意思?哈希模式里边不是带着那个井号吗?就有些时候吧,你觉得我这网站挺好的啊,你比如说你微信分享,分享给别人,如果微信校验的严格,那么他就会告诉你你这个路径了,非法,因为里面呢带着那个井号,哈希值啊,他认为那些东西呢,会不会带给服务器的可能东西就丢了,他就说这东西不合法是不啊?但是呢,同学,丑归丑,但是它兼容性好是不是?哎,History模式就是地质干净美观,兼容性和哈希模式相比略差。同学,咱可以这样说啊,你要非得考虑IE那些东西,那是不是其实也没有什么太大的意义,况且咱说了嘛,IE8及其以下浏览器根本运行不了的项目是不是,哎,第三个应用部署上线的时候,需要后端人员支持去解决刷新页面服务端404这个问题是不是?各位OK,这就是路由器的两种功。
26:02
工作模式就给大家说完了。那么这一小节呢,我们停。
我来说两句