VUE前后台交互

最近项目个人觉得比较难得地方，在这里分享下

项目描述：
1.此项目为一个前后端分离的外卖 Web App (SPA)
2.包括商家, 商品, 购物车, 用户等多个功能子模块
3.使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术
4.采用模块化、组件化、工程化的模式开发

分享的阶段是测试完后台接口，则需要写前后台交互的ajax文件 ，在src/api文件夹下新建index.js与ajax.js首先需要安装axios

npm install axios--save

一.下面封装ajax请求函数

为了实现统一向后端发送请求数据，所以需要封装一个ajax请求函数

bk1.png

通过对axios返回的promise对象再包装一层Promise的方法，来简化外部的调用

二.封装接口请求函数

有了发送请求数据的ajax函数，还需要封装一些与后台交互的接口函数
根据接口文档来定义接口请求函数

bk2.png

三.配置代理并测试接口实现ajax跨域请求

除了设置让服务器允许跨域的方法之外，还可以通过配置代理实现跨域请求

1.在项目config文件夹下的index.js文件里设置代理配置表

bk3.png

2.修改api文件夹index.js里接口函数的请求路径

bk2.png

3.因为修改了项目的config文件，所以需要重启项目
npm run dev

4.此时可以在控制台看到跨域请求到的数据{code: 0, data: Array(16)}

暂时就这些，饿了，去吃饭