写在前面:

• 认识前端路由和后端路由
  • 前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解
  • 路由: 简而言之,就是把信息从原地址传输到目的地的活动

对于我们来说路由就是: 根据不同的url地址展示不同的页面内容.

1.什么是路由

• 路由是一个网络工程里面的术语。

• 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. — *

• 在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛.

• 路由器是做什么的? 你有想过吗?

• 路由器提供了两种机制: 路由和转送.

  1. 路由是决定数据包从来源到目的地的路径.
  2. 转送将输入端的数据转移到合适的输出端.

• 路由中有一个非常重要的概念叫路由表.

  • 路由表本质上就是一个映射表, 决定了数据包的指向.

2. 后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的.

• 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.

但是, 一个网站, 这么多页面服务器如何处理呢?

• 一个页面有自己对应的网址, 也就是URL.
• URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
• Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.

这就完成了一个IO操作.

上面的这种操作, 就是后端路由.

• 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端
• 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

后端路由的缺点:

• 一种情况是整个页面的模块由后端人员来编写和维护的.
• 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
• 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

2.1 后端路由

通过上面的介绍,我们就可以了解到.后端路由就是服务器帮我们处理页面和url之间的映射的关系

后端路由的特点就是

1. 前端每次跳转到不同url地址,都会重新访问服务器,
2. 服务器根据前端的路由,返回不同的数据,或者是HTML页面

2.2. 后端渲染

后端渲染就是服务器通过一些技术,例如php,jsp 等将 html 页面渲染好,返回给客户端,url 和 jsp 之间形成了映射关系,不同不 url 会对应不同的 jsp.

后端渲染需要做以下工作:

1. 当用户发送一个url请求时，服务器会根据路由获取对应的模板和数据，
2. 然后服务器会将数据和模板组合成为一个完整的html页面发送给前端
3. 浏览器获取的是一个完整的HTML页面，这就是服务的渲染

2.3 后端渲染的优缺点

服务端渲染的好处

• 前端资源消耗少， 所有的数据和模板组合是在后端完成的，因此不占用客户端的运算资源(模板解析)
• 首屏加载时间快，因为浏览器获取的就是一个完整的页面，因此获取后浏览器直接可以渲染视图
• SEO优化好, 因为SEO蜘蛛在获取页面内容的时候是一个完整的页面内容,可以更好的分析页面内容

服务端渲染的坏处:

• 占用太多服务器 资源

3. 前后端分离阶段

前后端分离阶段:

• 随着ajax的出现,有了前后端分离的开发模式
• 后端只提供API返回数据,前端通过ajax来获取数据,并且可以通过JavaScript将数据渲染到页面中.
• 这样做最大的有点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上.
• 并且如何一个项目同时需要移动端(iOS/Android),后端不需要进行任何处理,依然使用之前的一台API即可.

使用前后端分离,我们输入一个url后会发生以下事情:

1. 页面接受到一个url,进入静态资源服务器请求相关的html+css+javaScript.
2. 将这些数据返回浏览器,html+css会由页面直接渲染,JavaScript由浏览器执行
3. 执行过程中碰见API请求
4. 在提供API接口的服务器请求相关资源,服务返回数据
5. 在客户端中继续执行JavaScript代码,将生成的元素渲染到页面中.

在前后端分离阶段,后端只负责提供数据,不负责页面的任何内容

3.1 前端渲染

前端渲染说明:

• 前端渲染是指浏览器将页面模板和数据进行组合形成最终的HTML页面
• 原理就是浏览器通过url获取服务器页面模板,服务器并不需要消化太多资源,直接将页面模板发送给前端
• 浏览器拿到页面也后,在解析页面是,通过页面中的ajax向后端请求数据
• 服务器根据前端对于数据的请求,返回给前端数据
• 浏览器拿到数据以后在和页面模板整合,形成最终的页面.

3.2 前端渲染的优缺点

前端渲染的好处:

• 网络传输数据量小,因为一个完整的页面是通过两次请求获取的
• 模板在前端,因此可以通过请求不同的数据改变页面显示结果,
• 进而减少后端渲染时,每次请求都会返回模板解析后的结果
• 不占用服务器资源

前端渲染的坏处:

• 前端资源消耗较多,因为模板的解析和数据的处理都是需要前端处理
• 对于SEO优化不是特别的友好, 因为搜索引擎蜘蛛获取的是页面模板,没法分析页面全部内容

4.前端路由阶段

前端路由阶段也就是单页面富应用阶段(SPA),

• 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
• 也就是前端来维护一套路由规则.

前端路由的核心是什么呢？

• 改变URL，但是页面不进行整体的刷新。

通过 vue-router实现url和页面的映射关系,后面的文章会详细介绍.

4.1 前端路由的概念

• 前端路由是指通过一定的技术手段,在跳转路由时不在向服务器发送请求, 而在在浏览器端进行处理,

• 通过不同的url映射到页面不同的DOM元素,不同的url显示不同的页面内容

也就是说

• 后端路由是url地址映射到服务器上的某些资源

• 前端路由是url地址映射到浏览器上的某些资源

4.2 单页面开发的优缺点

优点: 用户体验好
说明

• 单页面只有一个页面,在第一次加载时,就已经将所有资源从服务下载
• 在通过前端路由切换页面时,不是像服务器发送的请求,我们只是通过url决定哪些资源显示
• 因为不用向服务器发送请求,所以请求/响应造成的等待时间就会大大减少,提高了响应速度.

缺点:

• 不利于SEO优化(单页面应用,只有一个页面会被百度收录,其他的页面都是虚拟的)
• 使用浏览器的前进后退键的时候会重新发请求,没有合理的利用缓存
• 单页面无法记住之前滚动条的位置,无法在前进,后退的时候记住滚动的位置

4.3 什么时候使用到前端路由?

在我们开发单页面应用的时候,会常使用到前端路由

• 以前后端路由不同的url地址会返回不同的HTML页面,也就是说整个项目不止一个HTML页面
• 单页面是指整个项目只有一个页面, 页面显示的内容被抽离为一个一个小的组件
• 通过前端路由,让url地址的改变来映射到不同的组件, 通过url的改变来决定组件的显示与否

几点说明:

1. 前端路由和前后端分离的区别?

• 前后端分离的静态资源服务器中存放了好几套html+css+js
• 前端路由中只有一个html页面,页面的内容被分离成组件,通过url的映射来改变页面内容.

2. 什么是前后端分离?

• 后端只负责提供数据,不负责页面显示的任何内容
• url输入后想姿态资源服务器请求一套html+css+js
• 浏览器直接将html+css渲染到页面中
• 浏览器执行js的过程中遇到API接口
• 然后向提供API接口的服务器请求数据
• 结合请求到的数据,执行js代码,将最终效果渲染到页面中