前端路由和后端路由(浅聊)
1.什么是路由
简单的说,路由是根据不同的 url 地址展示不同的内容或页面;
2、什么是前端路由?
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据 url 的不同返回不同的页面实现的;
3、什么是后端路由?
(参考链接http://www.cnblogs.com/yuqing6/p/6731980.html)
通过用户请求的url导航到具体的html页面;每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,然后和模板组合,返回HTML,也可以是直接返回模板HTML,然后由前端js再去请求数据,使用前端模板和数据进行组合,生成想要的HTML。
4、前端路由的两种实现原理
(参考链接https://segmentfault.com/a/1190000007238999)
①、History API
重点说其中的两个新增的API history.pushState 和 history.replaceState;
②、hash
根据监听哈希变化触发的事件 —— hashchange 事件;
5、前端路由优缺点
优点:
1.从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。
2.在某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户就不能复制到想要的地址,用前端路由做单页面网页就很好的解决了这个问题。
缺点:
使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。
6、前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。
(参考链接http://web.jobbole.com/84644/)
①、AngularJS
Angular 是流行的企业级框架,许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气非常高,包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展,用来构建复杂的 web 应用程序。
Angular 是一个 MVC 类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时,两边自动更新。 它使你能够构建可复用的视图组件。它提供了一个服务框架,使得后端-前端服务通信更容易。最后,它只是普通的 JavaScript。
②、React
React 自称是一个用于构建用户界面的 JavaScript 库。React 主要是 MVC 中的 V。它的重点完全在 MVC 的 V 部分,忽视应用程序架构的其余部分。它提供了一个组件层,使得创建 UI 元素,组合元素变得更容易。它使用虚拟 DOM,因此优化了渲染,且允许从 node.js 渲染 React。此外,它实现了单向响应的数据流,因此比其他框架更容易理解和使用。
③、Backbone
Backbone 提供一个完整的 MVC 框架以及路由。模型允许键-值绑定和数据变化的事件处理,Backbone 是我创建简单 web 应用程序的首选框架。
.....(参考链接http://web.jobbole.com/84644/)
转载于:https://www.cnblogs.com/code-ChickenSoup/p/7138440.html
前端路由和后端路由(浅聊)相关推荐
- 路由【前端路由和后端路由】(在这吹不出褶皱的平静日子,你也在闪闪发光)
1.路由:程序开发的路由顾名思义:分为前端路由和后端路由. 2.后端路由:常说的后端路由通过用户请求的url分布到具体的处理程序,服务器接受到之后,返回HTML页面或直接渲染HTNL模板 简单点来说: ...
- 前端发展历程,前端路由和后端路由,到底有什么区别?
路由是什么? 路由这个词语其实最开始的时候是网络工程里面一个专业的术语,当然随着随着我们生活中路由器的使用,我们最熟悉的可能就是路由器这个物品了. 事实上路由器主要维护的就是一个映射表,映射表则会决定 ...
- 前端路由 与 后端路由
欢迎学习交流!!! 持续更新中- 文章目录 前端路由 后端路由 二者比较 前端路由的两种模式 hash histroy 二者比较 路由:路由是根据不同的 url 地址展示不同的内容或页面,是指分组从源 ...
- 学习随笔1——前端路由和后端路由
一.后端路由阶段:后端处理URL和页面之间的映射关系. 后端渲染,即服务器渲染(早期): 例如jsp:java server page(html+css+java:从数据库中读取数据,并将它动态的放在 ...
- 前端学习(2167):前端路由和后端路由
- 前端路由||路由的基本概念与原理||在开发中,路由分为: 后端路由 前端路由
前端路由 路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航 基于vue ...
- # Vue 配置前端后端路由地址
Vue 配置前端后端路由地址 前端路由配置 配置项目地址 修改 config/index.js的配置文件 proxyTable: {'/api': { //使用"/api"来代替t ...
- 浅聊前端程序员,后端程序员,全栈程序员的工作
浅聊前端程序员,后端程序员,全栈程序员的工作区别 很多时候,编程小白都在思考这样一个问题,找工作到底是选前端,还是后端,今天我们就来看看什么是前端开发,后端开发.为什么美国大多数程序员是全栈程序员? ...
- 【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言 本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
- 「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言 学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲 一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个 文件夹,内容如下: ...
最新文章
- 用matlab实现感知机学习算法,训练分类器并解决井字游戏
- Minimal安装CentOS 7使用yum报This system is not registered to Red Hat Subscription Management.
- 想要成为JAVA高手的25个学习目标
- 【Jackson】jackson 语法介绍 关键字
- 软件测试薪资标准新鲜出炉,你达标了吗?
- 第一周周二一天工作总结和周三工作计划——PM(李忠)
- 最小化安装CentOS-7-x86_64-Minimal-1511图文教程
- Audio播放流程(三)---NuPlayer流程之setAudioStreamType以及prepare
- 用EasyChm制作chm文档
- Java程序员技术栈
- 水滴IP告诉你:IP是什么?动态IP和静态IP有什么区别?
- R语言函数(1)-par()函数
- Ubuntu中解压缩命令
- 游戏服务器经常被DDOS攻击应该怎么办?
- 项目记录-手机号码限制频次
- iOS开发脚踏实地学习day14-绘图
- 哈工大SCIR倾力打造NLP新书,详解预训练语言模型
- WordPress数据库文章表(字段说明)
- MFC-CListCtrl重绘,添加按钮到单元格
- python 在线教程-python教程在线
热门文章
- JS getElementsByClassName
- 微信小程序——图片打马赛克
- 如何借助log4j把日志写入数据库中
- Linux下Oracle进程CPU使用率过高处理方式
- linux环境判断nginx是否已经启动
- vlc插件怎么用 wpf_使用Vlc.DotNet在我的WPF项目中添加vlc的问题。
- linux rvm,RVM 实用指南
- python selenium click 动态加载_python selenium:不要等到click()命令之后加载页面
- 16. Django实战:云笔记项目
- ElementUI:使input自动聚焦的两种方法