你不知道的前后端分离之交互(2)

上一篇文章前后端分离之交互(1)我们讲到了如何使用JQuery发起ajax请求，从后端接口获取前端需要的数据。JQuery封装好的ajax请求确实很好用，对比原生ajax的使用简直就是鸿沟的差距。

我们可以看到，通过JQuery发起ajax请求就这么简单，但是JQuery整个项目非常之大。我在我理解的技术发展趋势中有讲过JQuery的优势现在正逐步被超越，现在更流行MVVM模式，前端开发大多数程序员会更倾向于使用Vue,Angular，React去进行前端项目的开发。那么假如我们使用Vue去开发前端，为了简化发起ajax请求的操作，我们引入整个JQuery是非常不合理的。所以有了新的替代JQuery方案，就是Axios,其实Axios和JQuery的ajax都是对原生XmlHttpRequest的封装，但是Axios是基于Promise的实现版本，符合最新的ES规范。而且Vue比较轻量，适合小型项目的开发。接下来我们来将上一篇文章的内容使用Vue + Axios来调取后端接口取得数据。首先我们需要搭建一个vue脚手架，可以快速搭建起我们的vue项目。使用npm install vue-cli -g在全局安装vue脚手架。

然后在我们选择项目将要放置的路径，使用vue init webpack 项目名快速利用vue-cli搭建vue项目

到这里我们的vue项目创建成功了，我们按照最底下的提示进入项目然后启动项目，就可以将vue项目跑起来了

我们可以访问下测试项目目前效果

、首先我们先来看看vue项目的目录结构

config主要是我们项目的一些基本配置，node_modules我们安装的依赖包都在该文件夹下，src我们主要是针对这个文件夹进行路由的编写，static文件夹主要防止静态资源。

首先，我们一样先写一个vue版的登录界面，其实之前我有讲过了React、Angular、Vue三个现代框架与JQuery的差别，最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，动画、ajax等等都是jQuery为前端开发人员来带的好处。对于大部分喜欢使用jQuery的前端工程师来说，能够快速选取DOM节点，这个无疑是一个重要的原因。现在React 、Vue 、Angular框架，将操作DOM的事留给框架去做，这比传统jQuery开发效率高，代码可维护性强，性能好。所以现在越来越多的公司前端开发都会选在使用三大现代框架去进行开发，而Vue是三个现代前端框架中非常热门，而且学习难度最低的一个框架。对于Vue基础我就不去介绍了，Vue入门特别简单，我们看看我们登陆界面代码：

我们将页面设计写在template当中：

js操作写在<script>标签当中：

将样式写在<style>标签当中：

然后我们运行看看效果：

到这里一个简单的登录界面设计完成，下一步我们需要搭建一个后端项目来实现后端接口，如何使用express应用生成器快速搭建express项目在上一篇文章已经说过了。首先建立一个express项目，然后安装依赖启动项目：

接下来实现一个后端接口实现用户登录，逻辑和上一篇一样的逻辑

本篇文章既然是对上篇文章的改进，所以代码风格当然得改进。首先我们将上一篇那些加密的公共方法封装到一个公共文件中

将针对mysql的数据库基本配置封装到config.js下：

将mysql的连接配置等方法全部封装到db/mysql_db.js下：

到这里我们就把上节课直接写入接口中的公共方法分离出来了。接下来登录逻辑如下：

1.接收前端的传参，使用相同签名算法生成签名sign校验sign是否一致

2.签名校验成功，使用AES解密前端加密后的密码原文，再使用MD5加密密码。

3.进行数据库校验判断账号密码是否一致，给前端返回登录结果

首先调用封装好的方法进行签名：

然后进行解密password:

解密成功则调取数据库查询账号及密码是否匹配：

我们可以测试下结果：

可以看到我们现在后端接口是可以正常运行的。接下来我们回到前端项目，开头说过了，JQuery的ajax确实挺方便的，但是我们不能为了发起ajax请求而把整个JQuery引入项目当中，这是极度不合理的操作。目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，接下来我们看看axios如何去进行使用。

首先，使用npm install axios --save-dev安装axios

然后将axios改写成vue的原型属性

前端对password进行AES加密：

然后对参数进行签名：

然后发起post请求刚才我们实现的后端接口

查看控制台可以看到我们成功取得了后端接口的响应：

所以我们可以看到，其实在vue这种现代框架我们并不提倡引入JQuery发起ajax，因为为了发起一个ajax请求而引入JQuery，是得不偿失的。而axios我们可以看到，使用非常简单，而且性能比之ajax毫不逊色。所以使用现代框架更适合使用axios去发起请求，当然axios还有另一种方法：结合vue-axios进行使用，这种方式才是真正推荐大家去进行使用的，本篇文章主要改善了后端代码，下一篇会重点改善前端代码，将axios请求封装成一个公共文件，进一步优化前端代码，以及用算法生成登录凭证token。