1. 什么是路由

在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是URL到函数的映射。

2. router和route的区别

route就是一条路由,它将一个URL路径和一个函数进行映射,例如:

/users -> getAllUsers()

/users/count -> getUsersCount()

这就是两条路由,当访问/users的时候,会执行getAllUsers()函数;当访问/users/count的时候,会执行getUsersCount()函数。

而router可以理解为一个容器,或者说一种机制,它管理了一组route。简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函数,这个过程是由router来处理的。一句话概括就是 “The router routes you to a route”。

3. 服务器端路由

对于服务器来说,当接收到客户端发来的HTTP请求,会根据请求的URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。

以Express为例,

app.get('/', (req, res) => {
res.sendFile('index')
}) app.get('/users', (req, res) => {
db.queryAllUsers()
.then(data => res.send(data))
})

这里定义了两条路由:

  • 当访问/的时候,会返回index页面
  • 当访问/users的时候,会从数据库中取出所有用户数据并返回

不仅仅是URL

在router匹配route的过程中,不仅会根据URL来匹配,还会根据请求的方法来看是否匹配。例如上面的例子,如果通过POST方法来访问/users,就会找不到正确的路由。

4. 客户端路由

对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。客户端路由最常见的有以下两种实现方案:

  • 基于Hash
  • 基于History API

(1) 基于Hash

我们知道,URL中#及其后面的部分为hash。例如:

const url = require('url')
var a = url.parse('http://example.com/a/b/#/foo/bar')
console.log(a.hash)
// => #/foo/bar

hash仅仅是客户端的一个状态,也就是说,当向服务器发请求的时候,hash部分并不会发过去。

通过监听window对象的hashChange事件,可以实现简单的路由。例如:

window.onhashchange = function() {
var hash = window.location.hash
var path = hash.substring(1) switch (path) {
case '/':
showHome()
break
case '/users':
showUsersList()
break
default:
show404NotFound()
}
}

(2) 基于History API

通过HTML5 History API可以在不刷新页面的情况下,直接改变当前URL。详细用法可以参考:

Manipulating the browser history
Using the HTML5 History API
我们可以通过监听window对象的popstate事件,来实现简单的路由:

window.onpopstate = function() {
var path = window.location.pathname switch (path) {
case '/':
showHome()
break
case '/users':
showUsersList()
break
default:
show404NotFound()
}
}

但是这种方法只能捕获前进或后退事件,无法捕获pushState和replaceState,一种最简单的解决方法是替换pushState方法,例如:

var pushState = history.pushState
history.pushState = function() {
pushState.apply(history, arguments) // emit a event or just run a callback
emitEventOrRunCallback()
}

不过,最好的方法还是使用实现好的history库。

(3) 两种实现的比较

总的来说,基于Hash的路由,兼容性更好;基于History API的路由,更加直观和正式。

但是,有一点很大的区别是,基于Hash的路由不需要对服务器做改动,基于History API的路由需要对服务器做一些改造。下面来详细分析。

假设服务器只有如下文件(script.js被index.html所引用):

/-
|- index.html
|- script.js

基于Hash的路径有:

http://example.com/
http://example.com/#/foobar

基于History API的路径有:

http://example.com/
http://example.com/foobar

当直接访问http://example.com/的时候,两者的行为是一致的,都是返回了index.html文件。

当从http://example.com/跳转到http://example.com/#/foobar或者http://example.com/foobar的时候,也都是正常的,因为此时已经加载了页面以及脚本文件,所以路由跳转正常。

当直接访问http://example.com/#/foobar的时候,实际上向服务器发起的请求是http://example.com/,因此会首先加载页面及脚本文件,接下来脚本执行路由跳转,一切正常。

当直接访问http://example.com/foobar的时候,实际上向服务器发起的请求也是http://example.com/foobar,然而服务器端只能匹配/而无法匹配/foobar,因此会出现404错误。

因此如果使用了基于History API的路由,需要改造服务器端,使得访问/foobar的时候也能返回index.html文件,这样当浏览器加载了页面及脚本之后,就能进行路由跳转了。

5. 动态路由

上面提到的例子都是静态路由,也就是说,路径都是固定的。但是有时候我们需要在路径中传入参数,例如获取某个用户的信息,我们不可能为每个用户创建一条路由,而是在通过捕获路径中的参数(例如用户id)来实现。

例如在Express中:

app.get('/user/:id', (req, res, next) => {
// ... ...
})
在Flask中: @app.route('/user/<user_id>')
def get_user_info(user_id):
pass

6. 严格路由

在很多情况下,会遇到/foobar/foobar/的情况,它们看起来非常类似,然而实际上有所区别,具体的行为也是视服务器设置而定。

在Flask的文档中,提到,末尾有斜线的路径,类比于文件系统的一个目录;末尾没有斜线的路径,类比于一个文件。因此访问/foobar的时候,可能会重定向到/foobar/,而反过来则不会。

如果使用的是Express,默认这两者是一样的,也可以通过app.set来设置strict routing,来区别对待这两种情况。

[转] 理解Web路由的更多相关文章

  1. 理解Web路由(浅谈前后端路由与前后端渲染)

    1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...

  2. AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER

    深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人 ...

  3. 深入理解 web 协议(一)- http 包体传输

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/WlT8070LlrnSODFRDwZsUQ作者:吴越 开坑这个系列的原因,主要是在大前端学习的 ...

  4. 从文件下载视角来理解Web API

    一.问题源起 从Web From过来的人应该会比较熟悉以下下载文件的代码: [HttpPost] [Route("Download")] public void Download( ...

  5. 深入理解Web标准(网站标准)

    深入理解Web标准(网站标准)   我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...

  6. 理解Web标准(网站标准)

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  7. HTML与CSS入门——第一章 理解Web的工作方式

    知识点: 1.万维网的简史 2."网页"的含义,以及该术语不能反映所涉及的所有内容的原因 3.如何从你的个人计算机进入别人的浏览器 4.选择Web托管提供商的方法 5.不同的Web ...

  8. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  9. 理解Web应用程序的代码结构和运行原理(3)

    1.理解Web应用程序的运行原理和机制 Web应用程序是基于浏览器/服务器模式(也称B/S架构)的应用程序,它开发完成后,需要部署到Web服务器上才能正常运行,与用户交互的客户端是网页浏览器. 浏览器 ...

随机推荐

  1. 注解 和 xml 配置的优缺点【转】

    java annotation(注解) 的优点缺点 Annotation和xml各自作为配置项的优点与缺点. Annotation 一.Annotation 的优点 1.保存在 class 文件中,降 ...

  2. 致敬Python 2.7! 致敬unicode函数!

    致敬Python 2.7! 致敬unicode函数! 终于下定决心放弃python 2.7, 拥抱Python 3.x的阵营了. 因为老是被中文编码虐待, 受够了. 同时也把机器里的widows XP ...

  3. winform,WPF 释放内存垃圾,减少资源占用方法

    [System.Runtime.InteropServices.DllImport("kernel32.dll")]        public static extern boo ...

  4. MSVCR120.dll丢失问题

    一.问题:丢失MSVCR120.dll 二.解决方法 到官网下载vcredist_x86.exe安装即可 地址:https://www.microsoft.com/en-us/download/det ...

  5. TypeError: Only valid with DatetimeIndex, TimedeltaIndex or PeriodIndex, but got an instance of 'Index'

    这个问题说的很清楚,就是类型不对,需要转化类型,首先讲一下这个问题是在使用pandas的resample函数激发的,官方文档解释的较为清楚,如下: Convenience method for fre ...

  6. Django-Model操作数据库(增删改查、连表结构)

    一.数据库操作 1.创建model表         基本结构 1 2 3 4 5 6 from django.db import models     class userinfo(models.M ...

  7. PHP二叉树

    <?php /******************************************************** * 我写的PHP都是从C语言的数据结构中演化而来********* ...

  8. Prometheus 监控 Nginx 流量 (三)

    介绍 基于Openresty和Prometheus.Consul.Grafana设计的,实现了针对域名和Endpoint级别的流量统计,使用Consul做服务发现.KV存储,Grafana做性能图展示 ...

  9. MHA-手动Failover流程(传统复制&GTID复制)

    本文仅梳理手动Failover流程.MHA的介绍详见:MySQL高可用架构之MHA 一.基本环境 1.1.复制结构 VMware10.0+CentOS6.9+MySQL5.7.21 ROLE HOST ...

  10. Java 二进制I/O处理

    在Java中如何处理文本I/O 使用Scanner类读取文本数据,使用PrintWriter类写文本数据 例子: public class IO { public static void main(S ...