近期在做前后端分离的项目，前端计划采用VUE框架，后端采用Spring Cloud。
前端请求采用VUE整合axios方案，闲话不多说，开始！
目录
1. 安装axios：
安装axios前，先采用vue-cli脚手架，创建一个vue的webpack项目，创建完成后形如下图：
安装axios，在package.json的目录启动命令行，进行安装：
cnpm install axios --save安装后可在package.json中看到axios
2. 全局注册axios
为了使用axios，在各个组件中引入就可以使用，在main.js中引入axios
import axios from axios此时如果在其他的组件中是无法使用axios命令的，需要改写Vue的原因属性
Vue.prototype.$axios = axios new Vue({ el: #app, router, axios, components: { App }, template: <App/> })3. 使用axios
通过上述步骤，则可直接在之后的vue组件script中直接使用axios组件，例如下面的代码
methods: { submitForm(formName) { this.loginForm.message = console.log(this.loginForm.username + : + this.loginForm.password); this.$refs[formName].validate((valid) => { if (valid) { this.$axios({ method: post, url: :9999/sys/userinfo/login, params: { username: this.loginForm.username, password: this.loginForm.password } }).then(function (response) { if(response.data[success]){ console.log(response.data) this.loginForm.message = 登录成功! }else{ this.loginForm.message = response.data[msg]; } }.bind(this)).catch(function (response) { this.loginForm.message = 登录异常，请重新登录!; }.bind(this)); } else { return false; } }); } }需要注意的事，上面axios中传递参数采用的是
params: { username: this.loginForm.username, password: this.loginForm.password }此种参数传递即为requestparam，如果是采用requestbody的方式则应采用如下参数传递形式
data: { username: this.loginForm.username, password: this.loginForm.password }详细说明可参照下面注释
{ //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url url: /user, // 请求方法同上 method: get, // default // 基础url前缀 baseURL: transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装） data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {X-Requested-With: XMLHttpRequest}, //parameter参数 params: { ID: 12345 }, //post参数，使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象，否则会报错 data: { firstName: Fred }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: json, // default }另外需要注意的地方是，在请求结束后的then后续才做中，是无法直接获取vue视力中的数据的，需要进行数据绑定，即：
.then(function (response) { ... }.bind(this))4. 结束
暂时写到此处，持续更新