本文介绍了axios作为Ajax库的使用，包括其特点、安装步骤、在Vue中的全局挂载，以及通过一个登录退出显示用户资料的案例展示了post方法的运用。还涵盖了axios的便捷方法、基础方法、执行结果处理、配置axios以及RESTful接口设计原则。通过实例展示了如何在main.js中导入和挂载axios，并在组件中调用进行登录、退出操作。
目录
一、 devServer.proxy代理配置
前言：在vue中发起Ajax请求一般使用第三方库axios来完成，但是在使用前要在vue中配置代理devServer.proxy，代理搭配axios来完成数据请求。
所以在vue项目中使用axios发送请求前要先配置代理。
devServer.proxy官方案例链接
代理配置演示：
在vue.config.js中添加如下配置：
module.exports = defineConfig({
// 代理方式一
/*devServer: {
proxy: 'http://localhost:4000'
},*/
// 代理方式二
devServer: {
proxy: {
'/api': {
target: 'http://192.xxx.xxx.xxx:30080',
ws: true, // 用于支持websocket
changeOrigin: true, // 用于控制请求头中的host值
// 一般是需要rewrite重写，去除请求地址中多余的/api字段，若是服务器端做了处理，则不需要rewrite处理
pathRewrite:{'^/api':''}
},
}
}
})二、axios是什么
axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。
三、axios的特点
- 前后端都可以使用
- 不依赖dom
- 拦截扩展强大
- 可封装复用性强
四、axios安装
打开cmd命令窗口 cd到项目目录
输入命令： npm i axios -S
然后运行项目
五、在vue全局挂载
1、导入（在mian.js中）
import axios from 'axios'2、挂载（在mian.js中）
Vue.prototype.$axios = axios;3、使用（在任意需要发送数据请求的组件中）
get请求
axiosGet() {
this.$axios({
url: '/api/url',
method: 'get',
headers: {
xxx: xxx,
},
params: {
xxx: xxx
}
}).then(result => {
if (result.data.success) {
console.log(result.data)
} else {
this.$message.error(result.data.message);
console.log("请求失败")
}
})
},
post请求
axiosPost(data) {
this.$axios({
url: "/api/url",
method: "post",
headers: {
xxx: xxx,
},
data: data,
}).then((result) => {
if (result.data.success) {
this.$message.success("请求成功");
console.log(result.data)
} else {
this.$message.error(result.data.message);
console.log("请求失败")
}
});
},登录退出显示用户资料小案例（post方法）
<template>
<!-- 登录退出小案例 -->
<!-- 试用账号：奇酷彭于晏 密码：qkpyy -->
<div>
<!-- 通过判断本地存储token来切换显示容器 -->
<div v-if="token">
<p>姓名：{{userInfo.name}}</p>
<p>等级：{{userInfo.rank}}</p>
<p>积分：{{userInfo.score}}</p>
<button type="button" @click="loginout">退出</button>
</div>
<div v-else>
<h1>登录页面</h1>
用户名<input type="text" v-model="user.name" /><br>
密码<input type="password" v-model="user.password" />
<button type="button" @click="login">登录</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {//此处对象名必须与下侧 axios方法中请求数据名称一致吗？？？
name: '',
password: ''
},
// 从本地获取用户信息 parse把json字符串转换为js对象
userInfo: JSON.parse(localStorage.getItem("userInfo")||"{}"),//用户数据
// 从本地获取token,字符串不需要pase转
token: localStorage.getItem("token"),//token
}
},
methods: {
// 登录方法
login() {
this.$axios.post(
"http://dida100.com:8888/api/login",//请求的地址
this.user,//请求数据 //此处对象名必须与上侧侧 data中自定义双向绑定数据一致吗？？？
)
// 成功回调函数
.then(res => {
// 网络请求成功
if (res.data.code === 200) {
alert("登录成功")
// 将请求到的数据转为JSON字符串存储起来
localStorage.setItem("userInfo", JSON.stringify(res.data.user));
localStorage.setItem("token", res.data.token);
// 更新数据
this.userInfo = res.data.user;
this.token = res.data.token;
console.log(res.data)
} else {
alert("登录失败")
}
})
.catch(err => {
console.error(err)
})
},
// 退出登录
loginout(){
// 清空用户信息与token
this.userInfo={};
this.token=null;
localStorage.removeItem("userInfo")
localStorage.removeItem("token")
alert("退出成功")
}
}
}
</script>
六、axios便捷方法
- post(url , data , config)
- get(url , config)
- .delete(url,config) 删除
- .put(url,data,config) 修改
七、axios基础方法
axios({
url,//请求的地址
method,//请求方法 get,post,put,dalete
data,post请求的数据
params,//get请求的数据
headers,//请求头配置
})
实例：
sendMsg() {
// 基础方法
this.$axios({
url: "/api/feed",
method: "post",
data: {
msg: this.msg
}
})
.then(res => {
// alert(res.data.msg);
if (res.data.code == 0) {
// 让页面回归第一1
this.current = 1;
// 获取评论列表
this.getFeed();
// 清空评论框
this.msg = '';
}
})
},八、axios执行结果
网络请求成功
.then(res=>{
res.data 请求返回的数据
}
请求失败
.catch(err=>{
err.response.data 返回失败数据
}
九、config axios配置
配置请求头信息
"Authorization": 'Bearer ' + localStorage.getItem('token')
实例：
// 给每个请求拦截一下，添加请求Token信息
axios.interceptors.request.use(function(config){
config.headers.Authorization = 'Bearer '+localStorage.getItem("token");
return config;
})十、restFul
1.接口的设计风格
2.强调每个url地址都是一个资源
3.可以通过get，post，put，delete操作资源
4.get获取，post新增，put修改，delete删除
8144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
