前后端分离之交互(1)

之前写过一篇文章讲到我对目前技术发展趋势的一些看法：我理解的技术发展趋势，里面其实有提到，现在比较流行MVVM，越来越多的公司开始采用前后端分离的开发模式。在前后端不分离的时代，比如ASP、JSP、PHP等开发模式，前端就是负责切图和编写静态页面模板，然后后端将数据渲染到前端提供的静态页面模板中，最后将页面渲染到浏览器就完成整个前后端交互过程。这个时代的前端是DOM的时代，你学会一个JQuery就可以统御前端了。

我们现在所说的前后端分离，其实不只是简单的把前后端代码进行分离。前后端分离其实最根本是为了提升我们技术人员的协同合作效率，所以首先需要摆脱前后端架构的依赖，所以需要对前后端项目进行单独的部署，通过接口进行传递数据，这样后端服务器只负责通过接口传递数据，不负责页面的渲染，会大大减轻后端服务器的压力。最重要的是同一个后端接口，我们可以供PC端，移动端多个终端进行使用，而不必为每一个终端单独实现一个接口。

前后端分离后的前端，不再是一个简单的HTML文件，而是一个完整的网站应用。前端数据的来源是通过后端接口进行获取的。而我们最简单的方式就是前端使用ajax请求连接后端接口，取得需要的数据，然后在前端进行渲染。本篇文章我们先讲讲如何使用JQuery发起ajax请求后端接口获取到数据。

首先，我们在全局安装express-generator,这是一个express应用生成器，可以快速搭建一个express项目，我们可以使用npm install express-generator -g在全局安装。

安装完成express-generator应用生成器，可以使用express 项目名快速生成一个express项目。

可以看到我们express项目已经生成了，接下来我们按照红框提示进入项目根目录，然后安装依赖，最后启动项目。

可以看到我们的express项目已经在3000端口运行了，我们可以访问试试

首先，我们写一个前端登录界面，效果如下：

因为我们使用JQuery，所以需要引入JQuery的包

后端开发接口时，为了保证后端接口的数据安全性，保证数据不会被篡改或者重复调用，一般来说需要对需要传递的参数添加当前时间戳参数进行加密生成签名，前后端采用一样的加密算法生成签名，如果前后端生成的签名一致则安全性验证成功，则后端接口给前端返回正确的数据，如果前后端签名不一致则签名验证失败则返回报错信息。这样可以提高接口数据的安全性。一般接口有两种：

1.注册登录接口：比如注册登录接口，一般登陆成功后端接口要返回一个用户的登录凭证token。

2.通用接口：比如用户登录成功需要查询个人信息，就需要携带登陆成功后端提供的token请求后端接口，后端先解析token，token如果能反向解析成个人数据才表示身份验证成功。

不管什么接口，都需要对参数加密生成签名前后端同时校验签名。我们继续拿登录接口做示例，在登陆接口很明显我们需要传递的数据只有账号和密码，加密生成签名算法可以自己设计，我的签名算法具体逻辑为：

1、则将真实请求json中除sign参数以外的key、value按key的ASCII值顺序组成字符串str

2、在字符串str的前后各加上secret组成待加密字符串waitStr

3、将字符串waitStr进行MD5加密得到字符串waitSign

4、将字符串waitSign转成小写作为sign

我们需要账号密码参数加上当前时间戳进行加密生成签名sign，然后将账号，密码，当前时间戳以及sign参数传递给后端接口进行同样算法的加密，最后匹配签名sign是否一致，如果一致则返回前端需要的数据。既然我们说为了提高接口安全性，那我们按照这个逻辑密码等于明文传输，想想GitHub被劫持的后果，还是有必要对密码字段进行加密传输，所以整套前后端交互逻辑具体如下：

1.前端获取用户输入的账号密码，点击登录按钮时获取当前时间戳，单位为毫秒

2.将用户密码进行AES加密，密钥key和偏移向量iv前后端统一。算法模式采用CBC模式，秘钥长度选择128位。

3.将账号，经过AES加密后的密码，获取到的当前时间戳按照按key的ASCII值顺序组成字符串str，然后str左右拼接一个加密值secret，secret字符串具体取值前后端统一。

4.对str进行MD5加密，然后将加密后的结果转化为纯小写形成sign.

5.将账号，经过AES加密后的密码，当前时间戳以及加密得到的签名sign通过json格式提交请求后端提供的登录接口，在后端使用同样的算法对签名sign进行验证

6.后端签名sign验证成功，则需要对经过AES加密的密码进行解密，得到解密后的密码，然后对密码进行MD5加密去数据库进行匹配，看看账号密码是否匹配。

7.将登录结果返回给前端，整套前后端逻辑全部完成。

现在我们登录界面设计完成，第一步在用户点击登录按钮取到用户登录的当前时间戳。我们在登陆按钮的点击事件中取得用户输入的手机号密码以及当前时间戳

然后进入第二步，对密码进行AES加密

对密码进行AES加密成功，需要对这三个参数进行签名

可以看到我们已经对三个参数经过指定算法的加密生成签名sign，下一步发起ajax请求后端接口

后端已经成功获取到前端传过来的值，然后使用相同的算法进行签名sign加密

首先我们要允许前端的跨域请求，进行签名加密验证的最主要目的就是防止安全隐患，为了防止黑客直接抓包提交到接口，所以需要对当前时间戳限制为2分钟，如果前端传递的当前时间戳time超过当前时间2分钟则判定为超时操作，这样可以有效防止黑客直接抓包进行提交。然后进行和前端一样的签名加密验证，将加密后的签名与前端进行对比，如果一致则验证通过。接下来需要将前端传递的经过AES加密的密码进行反向解密，得到用户输入的原密码

得到用户的原密码，因为数据库密码一般是经过MD5进行加密，所以需要对原密码进行md5加密。

到这里签名sign验证成功并且用户密码反向解密成功。接下来需要去数据库去查询用户账号是否匹配。

可以看到我们输入数据库匹配的账号密码，可以成功跳转到个人中心界面。到这里前后端交互就结束了。其实前后端交互理解起来很简单，因为登录接口涉及到密码字段，所以使用AES加密对密码进行加密，然后将参数加上当前时间戳通过指定算法加密生成签名，然后后端使用相同算法对前端的参数进行加密生成签名，判定签名是否匹配，匹配成功则对密码进行AES反向解密，最后执行对应的逻辑处理。一般情况登录成功后端需要使用指定算法生成一个用户登录凭证token,返回给前端，在这里我只要讲前后端交互就不具体讲token了。接下来几篇文章会比代码进行进一步的优化。本篇文章就讲到这里，谢谢观看。

本篇文章源码已经同步到码云：https://gitee.com/mqzuimeng/test_code.git，可以自行下载测试