最近有做一个Vue的小项目，其中用到了尤大大推荐使用的axios，但是使用的过程中遇到了各种各样的问题，所以这次也是将一些心得分享出来。
安装的流程我就简单说一下下吧，在一个自己新建的文件夹中命令行中，输入以下命令，当然这边是默认大家已经安装了node.js
npm install vue --save 对Vue的安装
vue init webpack studentchoose 初始化项目，生成webpack文件，基本就默认下来就可以了
cd studentchoose 进入此项目
npm install 下载依赖
npm install axios --save 下载axios并配置到package.json
npm start 开启服务
然后按照控制台的提示就可以看到一开始的界面了，一般默认的端口是8080
我新建了一个文件夹专门用来存放自己封装的函数，在这里新建一个文件myRequest.js
myRequest.js
1 import axios from "axios"; 2 import qs from "qs"; 3 export function axiosGet(url, data, callback) { 4 console.log("get"); 5 axios 6 .get("/api" + url, { 7 params: qs.stringify(data) 8 }) 9 .then(function (res) {10 callback(res, true);11 })12 .catch(function (error) {13 callback(err, false);14 });15 }16 export function axiosPost(url, data, callback) {17 axios18 .post(19 "/api" + url,20 qs.stringify(data)21 )22 .then(function (res) {23 callback(res, true);24 })25 .catch(function (error) {26 callback(err, false);27 });28 } 29 export default axiosGet
导入当然是必要的，qs.stringify()的作用是用来将数据绑到请求的url上
var a = {courseName:‘jobs‘,age:21};
console.log(qs.stringify(a))//输出courseName=jobs&age=21
有的同学可能已经注意到了，我的请求的url前，还有一个"/api"，这又是什么呢？这是因为axios是本身不支持跨域的，但我们日常的项目，大部分是要前后端解耦合的，所以跨域是需要考虑的部分
解决方法
进入config文件夹下的index.js，重写dev里面的proxyTable部分，改为(初始的时候是空的)
proxyTable: { ‘/api‘: { target: ‘http://localhost:5000‘,//设置你调用的接口和端口号 changeOrigin: true, pathRewrite: { ‘^/api‘: ‘‘//用”/api“来代替target里面的地址 } } },
然后在你调用的接口前加上“/api”就可以跨域了。
服务器端
1 server.js 2 var express = require("express"); 3 var app = express(); 4 const listenNumber = 5000; 5 var course = require(‘../router/course‘) 6 app.post("/course", (req, res) => { 7 course.CoursePost(req,res); 8 }) 9 10 app.get("/course", (req, res) => {11 course.CourseGet(req,res);12 })13 14 app.listen(listenNumber)
然后下面是我的router文件(说是函数封装也OK诶)
1 var formidable = require("formidable"); 2 var url = require(‘url‘); 3 4 var CoursePost = function (req, res) { 5 var form = new formidable.IncomingForm(); 6 form.parse(req, (err, fields, files) => { 7 console.log(fields) 8 res.json(fields); 9 });10 }11 12 13 var CourseGet = function (req, res) {14 let params = url.parse(req.url, true).query[0];15 let Arr = params.split("&");16 let resultObj = {}; 17 for(item of Arr){18 let key = item.split("=")[0];19 let value = decodeURI(item.split("=")[1]);20 resultObj[key] = value;21 }22 res.json(resultObj);23 }24 25 module.exports.CoursePost = CoursePost;26 module.exports.CourseGet = CourseGet;
这里POST的话我使用的是formidable进行表单的处理，而Get请求有些奇怪，大家可以试着传中文字符串过去，其实是会被转码的
就像 %e4%b9%94%e5%b8%83%e6%96%af 这样
一开始我以为是BUG，后来才知道是为了字符串中的特殊字符不会引起歧义，所以这里我们将每一个value都要进行进行decodeURL()进行转码。
最后插一句，formidable也是要 npm install formidable进行安装的，node服务这边我讲得比较散，大家有什么建议都可以和我提，加油
