前端路由和后端路由的对比及优劣

r囧r小猫 2022-04-13 11:16 467阅读 0赞

**目录**

前言

路由

后端路由

前端路由

--------------------

## 前言 ##

本篇主要从web应用中页面跳转方式来说明目前web开发技术中常见的两种页面路由方式及对应的技术，然后根据不同的路由方式对应的技术来阐述不同技术的优劣以及在我认为未来web开发的技术发展趋势。

## 路由 ##

什么是路由？提到路由，可能第一反应是无线路由器，但这里的路由指的是页面跳转的规则，我们常见的网站，从A页面跳转到B页面是如何定义的，页面内容如何回显，这些都可以算作是web路由的一部分。路由分为前端路由和后端路由，早在2014年之前做web开发我用的最多的是jsp，和jsp相当的还有asp、C\#，那时候前端路由的概念几乎不存在。随着后来的react、vue、angular(应该很早就有了，我个人没接触过)前端框架的兴起，nodeJs越来越火，前端路由、js一统江湖的呼声越来越高。我原本对这些前端技术不感冒，总觉得html、js这些解释性语言没什么意思。但是后来去了解了下模块化开发、vue、组件化开发这些知识，发现前端技术真是日新月异，尤其单页应用的概念更是刷新了我对web开发的认知。我认为不管是从开发角度、编码角度、还是从产品的用户体验来说，前端路由单页应用的优势都非常明显。

## 后端路由 ##

**一般情况后端路由的项目有以下几个特点：**

1.前端的页面资源和后端服务是在一个项目中，发布部署的时候也是在一块

2.页面请求的url全部要通过后端服务的过滤器进行过滤和处理，即：所有请求会先走后端服务

3.前端浏览器显示的页面信息是通过后端服务直接response的，页面的内容是后端进行加工和处理的

**使用后端路由进行开发的一些优势：**

1.强大的jstl标签，jsp标准库的应用让开发效率大大提升

2.代码编写自由度高

我实在是想不到更多的优势了，然后之前一直用jsp。

**说一下我认为的缺点：**

1.前后端代码耦合比较深

2.体验不够好，每次请求都要重新向服务器发起请求，慢。

3.必须运行在java的web容器里

4.大的web项目在开发和管理上比较麻烦

项目中可能引入的js文件或者css文件多的时候可能有10几个以上，每一个文件都是要消耗网络请求的时间的，这对用户体验有很大的影响。而每次页面的跳转都会重新进行这些请求，越大的项目，用户体验越差。

## 前端路由 ##

我对前端路由的认识主要是通过vue-router，简单来说，前端路由的宗旨是模拟浏览器的前进后退，即让你可以通过点击返回和前进进行页面的跳转，但是重点在于，页面的跳转和切换可以简单的理解为div的切换。相比较原来的后端路由，现在的前端路由就没有原来意义上的页面跳转，全部都是div的动态切换。

这也就意味着，页面的跳转和切换，只需要请求数据，关注接口数据的改变即可。不会再去重新请求js文件及css文件，这种体验可以说是质的飞跃啊。

仔细想想，这就是原生APP开发的理念。

写到这里，在搜索相关知识的时候，发现网上有各路大大写的关于这方面的博文，写的非常好，[参考这里][Link 1]，我就不班门弄斧了。下面记录下自己个人的一些理解和认知。

1.移动互联网的兴起，APP的开发，让前后端分离开发的方式变的越来越主流，我在2015年的时候，就尝试过让团队内部进行前后端分离开发，后端只负责数据，负责接口，负责高并发请求。前端只负责数据展示、html、css这些。前后端的开发只通过接口文档进行耦合和对接，后端对自己的接口按照接口文档进行自测，保证接口出参正确。前端自己模拟接口出参进行页面开发，然后是联调对接，按照这种方式，联调对接成功率几乎是100%，只要接口文档没有发生变化就行。

但是当时的方式有点虽然说前后端分离，但是前端的开发还是很原始，我们只是使用html进行开发，页面的跳转全部使用location.href进行跳转，这种方式依旧有前面提到的问题，每次页面跳转都会涉及到js/css的重新请求，对于用户体验非常不好。

2.新的单页应用却是质的不同。开发的时候，进行组件化开发，所有的样式和功能都能封装为一个独立的组件，复用性、独立性都非常好，而且降低耦合。最关键的是，在打包发布的时候，整个前端项目只有一个js文件，一个html文件。页面只有在第一次进入的时候会请求一次js和html，后面所有的页面跳转及渲染，都只是异步的数据请求。这种用户体验可以说是质的提升。

[Link 1]: https://blog.csdn.net/bntx2jsqfehy7/article/details/80589580