node-07-前端路由和后端路由

六-前端路由和后端路由

1 基本概念

什么是路由？举个例子，GET 或 POST 请求时，服务端会维护一个正则配置表，当请求匹配到某一条具体 URL 路径时，就会分发到不同的 Controller，处理完成后，将 HTML 或数据返回给前端，这样就完成了一次 IO 交互操作。这就是目前绝大多数网站所使用的方案，这种方案叫做后端路由，即多页面应用。

对于没有开发过后端，也没有开发过 SPA 的前端来说，「路由」这个名词可能会让人比较困惑，这里的路由并不是指「硬件路由」，也不是网络七层协议中的「网络层路由」，但是其思想原理是一样的。我尽量简单通俗的介绍一下。

假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：
http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat
那么其路径就分别是 /，/about，/concat。

当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URI 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。

2 后端路由

好处：

服务端渲染后，可以直接返回给浏览器。
SEO 友好。
SEO （ Search Engine Optimization ）：汉译为搜索引擎优化 。 指的是，利用搜索引擎的规则来提高网站在有关搜索引擎内的自然排名 。 它的目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益； SEO 包含站外 SEO 和站内 SEO 两方面；为了从搜索引擎中获得更多的免费流量，从网站结构 、 内容建设方案 、 用户互动传播 、 页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力 。

缺点：

因为模板是由后端编写与维护的，所以前端开发者需要学习 Java 等后端语言，并安装后端服务开发环境。
页面、数据与逻辑混合在一起，维护困难。

3 前端路由

前端路由是单页面富应用（SPA）的核心。SPA 就是在前后端分离的基础上，再加上一层后端路由。路由规则由前端来维护。

它有两种实现方式：

利用 URL 的 hash，即锚点（#），JavaScript 利用 hashChange 事件来监听 URL 是否被改变。此方法在 IE7 及之前的版本需要通过轮询来实现。
HTML5 的 Histroy 模式，它可以让 URL 以 “/” 分隔， 却不会让页面发生跳转（服务端会把接收到的所有请求，都指向同一个 HTML 页面）。
这样 SPA 就只有一个 HTML 页面 ，网站的所有内容都指向这个页面。

优点：

页面持久性

前后端分离

4 注册路由

通俗的说就是写接口

例如

const express = require('express');

const app = express();

//注册post
app.post('/regiter',(req,res)=>{
    //注册逻辑
    res.send('注册成功!');
});
//登录post
app.post('/login',(req,res)=>{
    //登录逻辑
    res.send('登录成功!');
});
//登出get
app.get('/logout',(req,res)=>{
    //登出逻辑
    res.send('登出成功!');
});
//新增post
app.post('/add',(req,res)=>{
    //新增逻辑
    res.send('新增成功!');
});
//删除get
app.get('/delete',(req,res)=>{
    //删除逻辑
    res.send('删除成功!');
});



app.listen(3000,()=>{
    console.log('success');
});