分布式系统架构：技术栈详解与快速进阶
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1.2　前后端分离交互模式

前后端分离交互主要是由HTML页面与服务器端MVC模式进行交互，如图2-3所示。

030-1

图2-3　前后端分离交互

这里页面和服务器端已经分开部署，页面全部采用静态HTML。优化了传统交互模式。

1）废弃了传统交互模式中的同工程部署方式，优点在于可以减少服务器端的压力，同时可扩展性明显增强。

2）废弃了JSP动态页面交互技术，全面采用HTML静态页面，通过JS动态获取服务器端数据进行展示。

如图2-3所示，前后端分离交互整体流程如下：

1）浏览器需访问到静态页面；

2）静态页面加载时会加载JS、CSS等资源；

3）JS会采用Ajax异步交互技术与服务器端进行数据交互；

4）服务器端处理完毕后返回数据至HTML页面；

5）HTML页面进行渲染构建并返回至浏览器。

前后端分离交互模式从根本上解决了传统交互模式的“痛点”，它的优势如下：

1）前后端解耦、分开部署编译打包，降低依赖性；

2）H5静态页面可存放CDN进行加速；

3）H5可以部署多份，负载均衡；

4）H5和服务器端可同时进行开发，Mock数据，提高开发效率；

5）H5可打包、拆包、压缩容量，提供轻量级的应用；

6）页面无须刷新，异步加载数据，提高用户体验。

前后端分离交互模式带来的问题

设计初期，主要后端根据业务需求设计和定义接口，由于沟通不到位、开发流程不完整等问题，在前端处理过程中才发现接口不符合预期展示效果并提出更改，浪费许多时间。

由于前后端分开部署，通过接口获取数据存在安全问题，前后端需约定好授权机制，用于签名和认证，如JWT机制。JWT即JSON Web Token，是Web交互过程中一种传递紧凑和自包括的JSON的数据格式。

  • 紧凑：传输数据小，JWT可以通过在GET、POST请求过程中存放在HTTP的Header来增加安全性，同时也因为小才能传送得更快。
  • 自包括：Payload中能够包含用户的信息，避免数据库的查询。

JWT包括请求头部（header）、内容体（Payload）、密钥（Signature）等，它能确保不会被篡改，即意味着前后端交互是安全的。

下面介绍工作原理。在用户使用证书或者账号密码登入时，服务端会生成一个JSON Web Token并返回，同时存储它的信息，客户端后续调用接口时，需要把Token信息存放在请求头header中，由服务器端对客户端的请求进行Token校验，验证请求是否有权限访问到接口。

由于前后端分开部署存在跨域等问题，即客户端和服务端部署不在同一个域名下，服务端需要对接口进行跨域处理，让客户端请求能正常进来、处理并返回。

可以用前端框架Vue调用后端代码，具体如代码清单2-5所示。

代码清单2-5　前端框架Vue调用后端代码

import axios from 'axios'
Vue.prototype.$ajax = axios
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.baseURL = '服务端接口地址';

new Vue({
        data:{
            title: this.$refs.title
        },
        methods:{
            query:function () {
                this.$http.post('query',data ,{emulateJSON:true}).then(function(res){
                    console.log(res.data);
                },function(res){
                    console.log(res.status);
                });
            }
        },
        created:function(){
        }
    })
上一章目录下一章