java开发web网站的路由设计_理解Web路由（浅谈前后端路由与前后端渲染）

1.什么是路由?

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

路由的概念最开始是由后端提出来的，在以前用模板引擎开发页面的时候，是使用路由返回不同的页面，

大致流程可以看成这样：

(1)浏览器发出请求

(2)服务器端监听到80端口或者443有请求过来，并解析url路径

(3)根据服务器的路由配置，返回相应信息(可以是html文件，json数据，也可以是图片)

(4)浏览器根据数据包的content-type来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径来请求不同的资源，请求不同的页面是路由的其中一项功能。

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的显示和隐藏操作。这样，当访问不同的路径的时候，会显示不同的页面组件。客户端路由最常见的有以下两种实现方案：

(1)基于Hash

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

const url = require('url')var a = url.parse('http://example.com/#/foo/bar')

console.log(a.hash)//=> #/foo/bar

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

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