vue - axios -登录退出显示用户资料小案例

大脸胖柴

已于 2022-08-14 13:07:50 修改

阅读量594

点赞数

文章标签： vue.js javascript 前端

于 2022-07-28 23:54:33 首次发布

本文链接：https://blog.csdn.net/tky666/article/details/126046399

版权

登录退出显示用户资料小案例（post方法）

一、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、使用（在App.vue中）

this.$axios.xxx

登录退出显示用户资料小案例（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;
})