第二十二章 前后不分离与SPA
下午，吴总在公司全员群里发布消息，新员工第一个项目，NBA比赛项目。
项目很简单，就两个页面，一个实时比分页面，球队比分可编辑，可新增球队比分信息；一个球队列表页面，展示球队列表，可增可删。
要求用React技术栈实现，在本周五下班前完成。
“你们需要安装一下Node，Yarn等工具，使用React、React-router等实现，遇到不会的或者是不清楚的问题先自己百度，度娘解决不掉就问我和付总”，吴总说完便回到里屋（会议室）。
杨子随即思考，Node、React自己还清楚一些，这Yarn，React-router是个什么鬼？
杨子选择来这实习的原因很简单，就是学嘛，毕业之前这半年就是用来涨知识的，React技术栈刚刚兴起，会的人应该不太多，自己学会了就是赚到了。
杨子当即百度。
“Yarn是一个软件包管理器，还可以作为项目管理工具”。其实类似于npm，npm为Node自带的包管理工具，一般安装完了Node，npm也就安装完了。
'包管理工具'顾名思义，就是管理第三方资源的工具，类似于PHP的composer，Java的maven，Python的pip......
工作上的大型项目，显然不可能用基础语言去实现，真要是从头搭建，杨子只能向对方说一句“你真牛”。
前端方向现在React、Vue、Angular即将三分天下，JQuery将成为过去时。
像JQuery这种第三方库，集合了前辈们的经验，将JavaScript中的各种方法简单化，解决了像IE这种老顽固的兼容性问题，易上手，可以说是前端工程师必备技能。
现如今React、Vue、Angular这种MVC、MVVM框架更是降低了前端程序员的门槛，入门还算容易，想要提升，那不得是精通源码。“面试造火箭”在面试阶段可是程序员的疼。
React-router，看其名便知其意，router不就是路由嘛，但是前端为啥还要有路由，杨子不知(杨子不知道单页应用，也没做过前后端分离项目，当然不知)。
以前以.html结尾的文件就是一个页面，页面首次进入比如叫index.html，在该页面使用'a'标签或者使用按钮等跳转到A.html、B.html...，一个页面就是一个路由。
杨子通过度娘了解了一些路由方面的知识，但是这个React-router一上来就说什么hash模式，history模式，杨子实在搞不懂。
杨子在全群里发消息说道：“谁清楚这个React-router，给讲解一下呗[比心][比心][比心]。”
片刻后，群里发出了各自的观点。
“就是前端路由嘛[捂脸哭]”
“前端路由的定义需要用到这个[疑问][疑问][疑问]”
“单页应用都有这个东西[憨笑]，Vue也有vue-router[嘿嘿][嘿嘿][嘿嘿]”
大家七嘴八舌，群里讨论了一番。
最后还是丁振说道：“要不我们还是问问吴总吧，让他给我们讲解一下，这样我们也清楚一些。”
“可以[OK]”
“赞同[Get]”
“@吴总，老板给讲一下这个路由的知识吧！”
“+1”
“+1”
吴总从里屋走出，看见大家聚精会神的看着自己，随后说道：“来，都来会议室，我给大家讲一下这个React-router。”
“杨子什么是路由，你给大家解释一下”，吴总说道。
杨子娓娓道来。
“我就说说我的理解啊，不对的你们给纠正。”
“路由嘛，嗯......，举个例子，我们用浏览器打开网站时，浏览器上地址栏有个地址，像a.html，b.html，a.php，b.php这些就是路由地址，我们从A页面去B页面就是路由跳转，再返回A页面就是返回上一页，以此类推。”
“至于这个React-router嘛，就是基于React框架封装的，用于React项目的路由，这个跟前端单页面有关，这个我也不清楚，待会还是让吴总给我们解答吧。”
杨子说完，吴总接着说道：“丁振，你有什么要补充的嘛？”
“没有，吴总，我也不知道这个单页面是个啥...”，说完还尴尬的笑了。
“你们几个呢？”
大家你看看我，我看看你，都没做声。
“好，杨子说的没错，传统意义上的路由是这样的，前后端不分离之前，前端路由基本上就是一个页面一个地址，这个地址也就是路由。”
“嗯嗯...嗯嗯...嗯嗯...”
“我给大家说几个名词，这几个名词我再给大家解释一下，大家应该就清楚了。”
第一个名词：前后端分离与不分离。
就是字面意思，前端跟后端分开，前后端单独部署是前后端分离；前端基于后端部署到同一个服务器上就是前后端不分离。
大学时，我们学得Javaweb就是前后端不分离，.jsp结尾的文件里面有Java代码也有js、html、css。Java代码用来读取数据库，做数据操作，前端三大件用来写页面结构做页面布局及页面动画。部署时统一部署到tomcat服务器上，访问时，比如球队列表页面就叫teamList.jsp，球队比分页面叫teamScore.jsp，页面的跳转用'a'标签或者jsp的跳转语句完成。
“像我们公司用到的React技术栈，就是前后端不分离，前端写页面写路由，页面跳转由前端自己决定。前端单独部署到Nginx服务器上；后端单独部署到后端服务器上，前端发布新版本时不影像后端，后端版本更新时也不会影响到前端。”
“那前后端怎么做交互呢？”，丁振说道。
吴总看了看大家，看杨子雀雀欲试，说：“杨子，你来回答。”
“Ajax啊，后端提供API接口，前端通过ajax技术获取数据，然后将数据展示到前端页面。”
“没错，杨子同学说的对，前后端分离技术中最重要的一点就是交互，数据怎么同步的问题。这个知识点今天不做讨论，后面大家做项目时，我再向大家做补充，大家最好是私底下自己去百度，去Google。”
“我们继续说这个路由的问题。”
第二个名词：SPA。
什么是SPA，就是单页应用的英文名称缩写，Single-Page-Application。
“像我们现在用到的React框架就是SPA应用，所有的页面都是在一个html中完成，每个页面的切换就是通过js显隐展示，类似于Tabs这个组件...”
“额，吴总，什么是组件”，周洁说道。
“组件这个这个名称定义你们日后自会理解。我换个说法，大家知道tab切换吧，类似于tab切换，你点击球队列表Tab按钮时展示球队列表的内容，点击球队比分Tab按钮时展示球队比分的内容。”
“哦......”，大家异口同声。
“那为啥不直接用Tab切换来实现这个路由呢”，周洁说道。
杨子又雀雀欲试。
“来，杨子，你解释一下，为啥不直接用tab切换。”
杨子稳了稳心情，想了想，说：
“一个页面写一个Tab，有些页面不是通过tab跳转过去的，再说了，你这页面一刷新，不是一切都重归第一个了。”
“点一个tab，本地cookie存一个当前tab下标不就行了。”
“那多麻烦，清空了cookie不就一样还是重归第一个嘛。”
“用户又不知道怎么清cookie，也就是我们程序员才知道吧。”
“别把用户当成傻子，F12初中生一般都知道吧，现在的网民可不是咱小时候了。”
“咱收藏网址的时候，不是收藏的地址，这要是通过这个cookie去实现这个功能，这cookie清空了，岂不是收藏的东西都没了，肯定不是用的这个技术。”
“对哦，网址网址，收藏网址，咱收藏的可是一个地址，地址后面都是具体的路径啥的，把当前页面放到地址上去存着不就不会失效了嘛。”
“......”
大家恍然大悟，其实大家都陷到这个tab切换里面去了，吴总只是说类似这个，又不是说就是用这个技术实现的。
“好，停，你们说的大概快到点上去了，我给你们补充一下。”
SPA要实现传统的路由模式，就是我们刚才说的teamList.jsp也好，teamScore.jsp也好，都是一个路由地址。所以肯定是用页面唯一地址来标识一个页面的，你访问teamList就是访问球队列表页面，无论如何刷新，如何清楚缓存，在浏览器上打开这个地址，他一定指向的是球队列表这个页面，也就是浏览器路由标识唯一决定一个页面。”
只不过，SPA里面的路由是前端决定的，像React-router这些路由库，其实就是读取了浏览器地址，通过正则表达式等技术，一个地址匹配唯一的页面。一个SPA页面，当我们在浏览器地址栏输入域名地址时，他就会通过DNS去解析这个域名的IP地址，再通过IP找到这台服务器，再之后根据域名后面的地址去匹配服务器上的文件路径，然后服务器把资源输出到我们的浏览器上。
像这个NBA球队项目我们在服务器上位置比如是/data/nba，前端地址可以是/nba，当匹配到的时候就会去服务器上找/data/nba这个文件夹，然后浏览器会获取到这个nba目录下的文件，此时文件已经下载到浏览器上了，浏览器会缓存这些前端代码，当访问/nab/teamList时，其实就已经是在访问浏览器上缓存的前端资源了，只不过当匹配到地址是teamList时，React-router这个库就会给你导向teamList这个页面。
“来，看黑板，我给你们划一下这个流程图...”
看图明其意。杨子心想：“原来就是这样啊。”
“至于还有异步加载技术这些东西，以后你们项目上会自己明白的，我说的这两个名词大家清楚了吧。”
“嗯嗯...嗯嗯...，清楚了，吴总”，大家散漫地说道。
杨子不知道他们明白了没，反正杨子是明白了。杨子随即拍照收藏吴总画的流程图，以后这也是自己装逼的本钱了。
一个下午，杨子和新伙伴们在研究讨论中度过了，然而还是没能上手编码。
晚上6点左右，伙伴们相约一起去吃饭，996嘛，想回家那显然是不可能的。
工作后的第一顿饭他来了。
项目很简单，就两个页面，一个实时比分页面，球队比分可编辑，可新增球队比分信息；一个球队列表页面，展示球队列表，可增可删。
要求用React技术栈实现，在本周五下班前完成。
“你们需要安装一下Node，Yarn等工具，使用React、React-router等实现，遇到不会的或者是不清楚的问题先自己百度，度娘解决不掉就问我和付总”，吴总说完便回到里屋（会议室）。
杨子随即思考，Node、React自己还清楚一些，这Yarn，React-router是个什么鬼？
杨子选择来这实习的原因很简单，就是学嘛，毕业之前这半年就是用来涨知识的，React技术栈刚刚兴起，会的人应该不太多，自己学会了就是赚到了。
杨子当即百度。
“Yarn是一个软件包管理器，还可以作为项目管理工具”。其实类似于npm，npm为Node自带的包管理工具，一般安装完了Node，npm也就安装完了。
'包管理工具'顾名思义，就是管理第三方资源的工具，类似于PHP的composer，Java的maven，Python的pip......
工作上的大型项目，显然不可能用基础语言去实现，真要是从头搭建，杨子只能向对方说一句“你真牛”。
前端方向现在React、Vue、Angular即将三分天下，JQuery将成为过去时。
像JQuery这种第三方库，集合了前辈们的经验，将JavaScript中的各种方法简单化，解决了像IE这种老顽固的兼容性问题，易上手，可以说是前端工程师必备技能。
现如今React、Vue、Angular这种MVC、MVVM框架更是降低了前端程序员的门槛，入门还算容易，想要提升，那不得是精通源码。“面试造火箭”在面试阶段可是程序员的疼。
React-router，看其名便知其意，router不就是路由嘛，但是前端为啥还要有路由，杨子不知(杨子不知道单页应用，也没做过前后端分离项目，当然不知)。
以前以.html结尾的文件就是一个页面，页面首次进入比如叫index.html，在该页面使用'a'标签或者使用按钮等跳转到A.html、B.html...，一个页面就是一个路由。
杨子通过度娘了解了一些路由方面的知识，但是这个React-router一上来就说什么hash模式，history模式，杨子实在搞不懂。
杨子在全群里发消息说道：“谁清楚这个React-router，给讲解一下呗[比心][比心][比心]。”
片刻后，群里发出了各自的观点。
“就是前端路由嘛[捂脸哭]”
“前端路由的定义需要用到这个[疑问][疑问][疑问]”
“单页应用都有这个东西[憨笑]，Vue也有vue-router[嘿嘿][嘿嘿][嘿嘿]”
大家七嘴八舌，群里讨论了一番。
最后还是丁振说道：“要不我们还是问问吴总吧，让他给我们讲解一下，这样我们也清楚一些。”
“可以[OK]”
“赞同[Get]”
“@吴总，老板给讲一下这个路由的知识吧！”
“+1”
“+1”
吴总从里屋走出，看见大家聚精会神的看着自己，随后说道：“来，都来会议室，我给大家讲一下这个React-router。”
“杨子什么是路由，你给大家解释一下”，吴总说道。
杨子娓娓道来。
“我就说说我的理解啊，不对的你们给纠正。”
“路由嘛，嗯......，举个例子，我们用浏览器打开网站时，浏览器上地址栏有个地址，像a.html，b.html，a.php，b.php这些就是路由地址，我们从A页面去B页面就是路由跳转，再返回A页面就是返回上一页，以此类推。”
“至于这个React-router嘛，就是基于React框架封装的，用于React项目的路由，这个跟前端单页面有关，这个我也不清楚，待会还是让吴总给我们解答吧。”
杨子说完，吴总接着说道：“丁振，你有什么要补充的嘛？”
“没有，吴总，我也不知道这个单页面是个啥...”，说完还尴尬的笑了。
“你们几个呢？”
大家你看看我，我看看你，都没做声。
“好，杨子说的没错，传统意义上的路由是这样的，前后端不分离之前，前端路由基本上就是一个页面一个地址，这个地址也就是路由。”
“嗯嗯...嗯嗯...嗯嗯...”
“我给大家说几个名词，这几个名词我再给大家解释一下，大家应该就清楚了。”
第一个名词：前后端分离与不分离。
就是字面意思，前端跟后端分开，前后端单独部署是前后端分离；前端基于后端部署到同一个服务器上就是前后端不分离。
大学时，我们学得Javaweb就是前后端不分离，.jsp结尾的文件里面有Java代码也有js、html、css。Java代码用来读取数据库，做数据操作，前端三大件用来写页面结构做页面布局及页面动画。部署时统一部署到tomcat服务器上，访问时，比如球队列表页面就叫teamList.jsp，球队比分页面叫teamScore.jsp，页面的跳转用'a'标签或者jsp的跳转语句完成。
“像我们公司用到的React技术栈，就是前后端不分离，前端写页面写路由，页面跳转由前端自己决定。前端单独部署到Nginx服务器上；后端单独部署到后端服务器上，前端发布新版本时不影像后端，后端版本更新时也不会影响到前端。”
“那前后端怎么做交互呢？”，丁振说道。
吴总看了看大家，看杨子雀雀欲试，说：“杨子，你来回答。”
“Ajax啊，后端提供API接口，前端通过ajax技术获取数据，然后将数据展示到前端页面。”
“没错，杨子同学说的对，前后端分离技术中最重要的一点就是交互，数据怎么同步的问题。这个知识点今天不做讨论，后面大家做项目时，我再向大家做补充，大家最好是私底下自己去百度，去Google。”
“我们继续说这个路由的问题。”
第二个名词：SPA。
什么是SPA，就是单页应用的英文名称缩写，Single-Page-Application。
“像我们现在用到的React框架就是SPA应用，所有的页面都是在一个html中完成，每个页面的切换就是通过js显隐展示，类似于Tabs这个组件...”
“额，吴总，什么是组件”，周洁说道。
“组件这个这个名称定义你们日后自会理解。我换个说法，大家知道tab切换吧，类似于tab切换，你点击球队列表Tab按钮时展示球队列表的内容，点击球队比分Tab按钮时展示球队比分的内容。”
“哦......”，大家异口同声。
“那为啥不直接用Tab切换来实现这个路由呢”，周洁说道。
杨子又雀雀欲试。
“来，杨子，你解释一下，为啥不直接用tab切换。”
杨子稳了稳心情，想了想，说：
“一个页面写一个Tab，有些页面不是通过tab跳转过去的，再说了，你这页面一刷新，不是一切都重归第一个了。”
“点一个tab，本地cookie存一个当前tab下标不就行了。”
“那多麻烦，清空了cookie不就一样还是重归第一个嘛。”
“用户又不知道怎么清cookie，也就是我们程序员才知道吧。”
“别把用户当成傻子，F12初中生一般都知道吧，现在的网民可不是咱小时候了。”
“咱收藏网址的时候，不是收藏的地址，这要是通过这个cookie去实现这个功能，这cookie清空了，岂不是收藏的东西都没了，肯定不是用的这个技术。”
“对哦，网址网址，收藏网址，咱收藏的可是一个地址，地址后面都是具体的路径啥的，把当前页面放到地址上去存着不就不会失效了嘛。”
“......”
大家恍然大悟，其实大家都陷到这个tab切换里面去了，吴总只是说类似这个，又不是说就是用这个技术实现的。
“好，停，你们说的大概快到点上去了，我给你们补充一下。”
SPA要实现传统的路由模式，就是我们刚才说的teamList.jsp也好，teamScore.jsp也好，都是一个路由地址。所以肯定是用页面唯一地址来标识一个页面的，你访问teamList就是访问球队列表页面，无论如何刷新，如何清楚缓存，在浏览器上打开这个地址，他一定指向的是球队列表这个页面，也就是浏览器路由标识唯一决定一个页面。”
只不过，SPA里面的路由是前端决定的，像React-router这些路由库，其实就是读取了浏览器地址，通过正则表达式等技术，一个地址匹配唯一的页面。一个SPA页面，当我们在浏览器地址栏输入域名地址时，他就会通过DNS去解析这个域名的IP地址，再通过IP找到这台服务器，再之后根据域名后面的地址去匹配服务器上的文件路径，然后服务器把资源输出到我们的浏览器上。
像这个NBA球队项目我们在服务器上位置比如是/data/nba，前端地址可以是/nba，当匹配到的时候就会去服务器上找/data/nba这个文件夹，然后浏览器会获取到这个nba目录下的文件，此时文件已经下载到浏览器上了，浏览器会缓存这些前端代码，当访问/nab/teamList时，其实就已经是在访问浏览器上缓存的前端资源了，只不过当匹配到地址是teamList时，React-router这个库就会给你导向teamList这个页面。
“来，看黑板，我给你们划一下这个流程图...”
看图明其意。杨子心想：“原来就是这样啊。”
“至于还有异步加载技术这些东西，以后你们项目上会自己明白的，我说的这两个名词大家清楚了吧。”
“嗯嗯...嗯嗯...，清楚了，吴总”，大家散漫地说道。
杨子不知道他们明白了没，反正杨子是明白了。杨子随即拍照收藏吴总画的流程图，以后这也是自己装逼的本钱了。
一个下午，杨子和新伙伴们在研究讨论中度过了，然而还是没能上手编码。
晚上6点左右，伙伴们相约一起去吃饭，996嘛，想回家那显然是不可能的。
工作后的第一顿饭他来了。
转码声明：以上内容基于搜索引擎转码技术对网站内容进行转码阅读，自身不保存任何数据，请您支持正版