1、基本思路:
首先将axios导出,再将axios导入到一个独立的api文件夹中,在api文件夹j建立一个js文件,在这个js文件中将登录,增删改查操作封装起来,在这些封装起来的方法中传入部分参数,然后在所需要这些方法的地方将这个js文件引入即可;
2、核心代码实现:
(1)axios:
import axios from 'axios'
import {Message} from 'element-ui'
// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'http://123.57.7.108:1024/emall',
timeout:'3000'
});
//定义拦截器
//给创建的实例添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
var token=window.localStorage.getItem("token");
if(token){
config.headers['Authorization']="Bearer "+token;
}
//例子
if(config.methods=='post'){
config.headers[' contentType']='application/json;charset=utf-8'
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 给创建的实例添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
const data=response.data;//从数据接口中返回的json对象
switch(data.code){
case 200:
case 201:
case 204:
//收到以上端口号信息进入.then
return data;//返回的是data,而不是respons
default:
//其它情况,弹框就可以了,进入.catch
Message({
message: data.message,
type: 'warning'
});
return Promise.reject(data.message);
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
//导出实例,供其他模块导入使用
export default instance;
(2)api里面的封装方法的js:
import axios from '../util/axios.js'
export default{
/**
* 登录方法
* @param {*} params
*/
__api_login:function(params){
return axios({
url:"/login",
method:'post',
data:params
});
},
__api_register:function(){
return axios({
url:"/users",
method:'POST',
data:params
});
},
__api_listUers:function(){
return axios({
});
}
}
(3)在所需要的地方引入封装好方法的js:
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户登录</span>
</div>
<div >
<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="pass">
<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">提交</el-button>
<el-button >重置</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
export default {
data(){
return{
ruleForm:{
username:" ",
password:" "
}
}
},
methods:{
login:function(){
var _this=this;
/* _this.$axios({
method:"post",
url:"http://123.57.7.108:1024/emall/login",
data:{
username:this.ruleForm.username,
password:this.ruleForm.password
}
}).then(function(response){
if(response.data.code=="200"){
window.localStorage.setItem("token",response.data.data.token);//永久存储令牌
_this.$message({
message: '登录成功',
type: 'info'
});
}else{
_this.$message({
showClose: true,
message: '用户名或者密码错误',
type: 'warning'
});
}
}).catch(function(error){
_this.$alert(error);
});*/
//改写axios
//data就是从数据接口中获取数据对象
_this.$api.__api_login( _this.ruleForm).then(function(data){
_this.$message({
message:'登录成功哦',
type:'info'
});
}).catch(function(error){
_this.$message({
message:'我是catch,登录失败',
type:'info'
});
});
}
}
}
</script>
<style >
.box-card{
width: 500px;
}
</style>