axios/qs/vue-axios安装及使用步骤

首先我们要下载三个依赖包，方便后面的开发使用需要：

npm install axios -S   axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。

npm install qs -S   qs 是用来转换格式的

npm install vue-axios -S  是一个插件基于axios

npm install element-ui -S 下载element-ui模块（因为之前下过了所以这里就没截图啦）

既然下载了那么在项目中也要引用相对应的依赖

action.js(简单来说就是连接后台的方法)

/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER': 'http://localhost:8080/T216_SSH', //服务器
'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载
'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}

http.js(连接后台的关键)

/**
* vue项目对axios的全局配置
*/
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};

// 请求拦截器
axios.interceptors.request.use(function(config) {
// var jwt = window.vm.$store.getters.getJwt;
// config.headers['jwt'] = jwt;
return config;
}, function(error) {
return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
// debugger;
// var jwt = response.headers['jwt'];
// if(jwt){
// window.vm.$store.commit('setJwt',{jwt:jwt});
// }
return response;
}, function(error) {
return Promise.reject(error);
});

// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// config => {
// //config.data = JSON.stringify(config.data);
// //config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// //config.headers['Token'] = 'abcxyz';
// //判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// // if (cookie.get("token")) {
// // //用户每次操作，都将cookie设置成2小时
// // cookie.set("token", cookie.get("token"), 1 / 12)
// // cookie.set("name", cookie.get("name"), 1 / 12)
// // config.headers.token = cookie.get("token");
// // config.headers.name = cookie.get("name");
// // }
// return config;
// },
// error => {
// return Promise.reject(error.response);
// });

// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// response => {
// if (response.data.resultCode == "404") {
// console.log("response.data.resultCode是404")
// // 返回 错误代码-1 清除ticket信息并跳转到登录页面
// // cookie.del("ticket")
// // window.location.href='http://login.com'
// return
// } else {
// return response;
// }
// },
// error => {
// return Promise.reject(error.response) // 返回接口返回的错误信息
// });
export default axios;

既然前后连接完了，咱就来玩玩联合登陆吧

先给登陆页面来个它该有的亚子，这里楼楼从element框架里面复制过来改了一下

就长这样，还不错吧简单大气

Login.vue

在这里要提一下提交方式，众所周知最普遍使用的就是get和post方法所以我现在也是来给你们看一下两种提交方式的不同

Post提交方式

axios.post(url, qs.stringify(this.ruleForm)).then((response) => {

              console.log(response);  
              if (response.data.code == 1) {  
                this.$message({  
                  message: response.data.msg,  
                  type: 'success'  
                });  
              } else {  
                this.$message({  
                  showClose: true,  
                  message: response.data.msg,  
                  type: 'error'  
                });  
              }

            }).catch(function(error) {

              console.log(error);

            });

别找了 我Login.vue里面用的就是get提交

大家都知道vue好就好在他是Spa路由模式，所以还要给他配置一下路径（让它可以一个页面跳转多个页面）

这可别找错了 router==>index.js

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/view/Login' //登陆
import Reg from '@/view/Reg' //注册
Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Reg',
name: 'Reg',
component: Reg
}
]
})

配置入口文件 main.js

在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
import Vue from 'vue'

import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前

import App from './App'
import router from './router'

Vue.use(ElementUI) //新添加3
Vue.config.productionTip = false

　　注意：要在指定位置！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})

问题：

注1：axios跨域问题
会一直报错：“http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header”
因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，
tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头
Access-Control-Allow-Origin即可
httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80");

Access-Control-Allow-Origin:* #则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:https://www.fujieace.com #允许特定的域名访问

注2：axios.get提交没有问题，axios.post提交后台接收不到数据
因为POST提交的参数的格式是Request Payload，这样后台取不到数据的(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”)，
解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'

注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“api/http.js”
axios.defaults.baseURL = 'https://api.example.com';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头，添加认证令牌
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”

注5：^_^~~~~为进一步简化开发，将action.js的URL地址封装到axios.urls属性上

谢谢观看！