【vue】利用axios发送请求

news2024/12/22 23:20:46

这里写目录标题

  • 一、项目环境配置
  • 二、利用axios发送POST请求登录
  • 三、异步实现：利用axios发送POST请求登录（json）
  • 四、异步实现：利用axios发送POST请求登录（表单）
  • 五、token存储
  • 六、token使用
  • 七、全局的axios配置
    • 1、方式一
    • 2、方式二
  • 八、请求拦截器和响应拦截器

一、项目环境配置

根组件App.vue
在这里插入图片描述
路由配置
在这里插入图片描述
main.js配置
固定写法，复制粘贴即可

在这里插入图片描述

二、利用axios发送POST请求登录

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'



	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			submitLogin(){
				console.log('点击了登录,',this.loginForm)
				// 点击了登录如何发送http请求？axios
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const res = axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('res',res)

				// 设置回调函数，接收返回的响应对象
				// 异步操作成功时，执行的回调函数
				res.then(response=>{
					console.log('请求成功:')
					console.log('respnse',response)
				})
				// 异步操作失败时，执行的回调函数
				res.catch(error=>{
					console.log('请求失败:')
					// console.log('error:',error)
					console.log('请求失败响应对象获取',error.response)
				})
			}
		}
	}

</script>

<style>

</style>

请求失败时，控制台输出的对象
在这里插入图片描述
请求成功时，控制台输出的对象
在这里插入图片描述

三、异步实现：利用axios发送POST请求登录（json）

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'



	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
				}
			},

		}
	}

</script>

<style>

</style>

四、异步实现：利用axios发送POST请求登录（表单）

在这里插入图片描述

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'


	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				// axios发送表单格式的请求
				const params = qs.stringify(this.loginForm)
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
				}
			},

		}
	}

</script>

<style>

</style>

五、token存储

保存登录返回的token
获取token
const token=response.data.token
保存到LocalStorage中：永久存储，只有不手动删除，永久保存到LocalStorage中
window.localStorage.setItem(‘token’,token)
保存到sessionStorage中：关闭浏览器之后，删除内容
window.sessionStorage.setItem(‘token’,token)
保存到cookie中：
window.cookieStore.set(‘token’,token) 

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'


	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				// axios发送json格式的请求
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
					// 保存登录返回的token
					// 获取token
					const token=response.data.token
					// 保存到LocalStorage中
					// window.localStorage.setItem('token',token)
					// // 保存到sessionStorage中
					// window.sessionStorage.setItem('token',token)
					// 保存到cookie中
					window.cookieStore.set('token',token)
				}
			},

		}
	}

</script>

<style>

</style>

六、token使用

<template>
	<h1>index页面</h1>
	<el-button @click="getAllProject">获取项目数据</el-button>

	<h3>{{pros}}</h3>
</template>

<script>
import axios from 'axios'

	export default{
		data(){
			return{
				pros:{

				}
			}
		},
		methods:{
			async getAllProject(){
				// 发送请求
				const url="http://82.156.178.247:5001/projects/"
				const response=await axios.get(url,{
					headers:{
						'Authorization':'JWT ' + window.sessionStorage.getItem('token')
					}
				});
				console.log('response',response);
				this.pros=response.data
			}
		}
	}
</script>

<style>
</style>

在这里插入图片描述

七、全局的axios配置

在api/index.js中对axios对后端请求进行统一封装
在这里插入图片描述

1、方式一

// 针对axios对后端请求进行统一封装（方便后期维护管理）
import axios from "axios"

// 方式一：直接配置axios对象，进行相关的封装
// 设置全局的baseURL
axios.defaults.baseURL='http://82.156.178.247:5001'
axios.defaults.headers.common['kobe']='0924'

export const login=(params)=>{
	axios.post('/login',params)
}

export const getALLPro=()=>{
	axios.get('/login')
}

2、方式二

// 方式二：使用axios创建实例进行相关的配置和封装(适用于微服务的架构)

const http=axios.create({
	// 配置baseURL
	baseURL:'http://82.156.178.247:5001',
	// 配置请求成功的http响应状态码的范围（全部当作成功的处理）
	validateStatus:function(status){
		return true;
	}
})

export default{
	login(params){
		return http.post('/login/',params)
	},
	getAllProject(){
		return http.get('/projects/')
			
}
}

在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用
$api为属性名称
在这里插入图片描述

八、请求拦截器和响应拦截器

// 设置请求拦截器
http.interceptors.request.use(function (config){
	// config为请求对象
	// 如果不是登录接口，那么在请求头中加上Authorization
	if(config.url!=='/login/'){
		config.headers['Authorization']='JWT ' + window.sessionStorage.getItem('token')
	}

	// 每个请求发送之前都会执行该方法，并且会将请求配置对象传到该方法中
	console.log('请求拦截器：',config)
	
	// 在发送请求之前
	return config
});


// 响应拦截器:每个接口请求
http.interceptors.response.use(function(response){
	// 对响应数据做点什么
	console.log('响应拦截器：',response)
	// 在此处对项目中接口调用失败，做统一处理
	return response;
	
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1041410.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于springboot地方废物回收机构管理系统springboot11

基于springboot地方废物回收机构管理系统springboot11

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…
阅读更多...
2023-9-25 排队打水

2023-9-25 排队打水

题目链接&#xff1a;排队打水 #include <iostream> #include <algorithm>using namespace std;typedef long long LL;const int N 100010;int n; int t[N];int main() {scanf("%d", &n);for(int i 0; i < n; i ) scanf("%d", &t…
阅读更多...
服务接口调用OpenFeign_入门案列

服务接口调用OpenFeign_入门案列

构建cloud-consumer-feign-order80工程 修改POM文件 <!-- 引入OpenFeign依赖 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency>编写YML文件…
阅读更多...
Linux 处理文件（ touch 命令、cp 命令、mv 命令、rm 命令）

Linux 处理文件（ touch 命令、cp 命令、mv 命令、rm 命令）

Linux 处理文件 创建文件&#xff08; touch 命令&#xff09;&#xff0c;复制文件&#xff08; cp 命令&#xff09;&#xff0c;重命名文件&#xff08; mv 命令&#xff09;&#xff0c;删除文件&#xff08;rm 命令&#xff09; 文章目录 Linux 处理文件一、创建文件&…
阅读更多...
【Linux】【网络】传输层协议：TCP

【Linux】【网络】传输层协议：TCP

文章目录 TCP 协议1. TCP 协议段格式2. TCP 报头解析3. TCP 的可靠性4. 面向字节流5. 粘包问题6. 连接队列维护 TCP 的 确认应答机制TCP 的 超时重传机制TCP 的 三次握手TCP 的 四次挥手setsockopt 函数&#xff1a;设置套接字选项&#xff0c;解决 TIME_WAIT 状态引起的 bind …
阅读更多...
力扣2861 补9.21

力扣2861 补9.21

2861. 最大合金数 好蛮好蛮&#xff0c;我连题目都读不懂了&#xff0c;丝毫不明白咋做。 看了灵神题解&#xff0c;嗯&#xff0c;就好家伙&#xff0c;所有合金都需要由同一台机器制造。题目老是看漏&#xff0c;也就是只能选择其中一个机器造合金&#xff0c;这题能用二分也…
阅读更多...
电脑WIFI突然消失

电脑WIFI突然消失

文章目录 1. 现象2. 解决办法1&#xff1a;重新启用无线网卡设置3. 解决办法2&#xff1a;更新无线网卡驱动4. 解决办法3&#xff1a;释放静电5. 解决办法4&#xff1a;拆机并重新插拔无线网卡 1. 现象 如下图&#xff1a;电脑在使用过程中WIFI消失 设备管理器中的无线网卡驱…
阅读更多...
Redis安装部署与数据类型

Redis安装部署与数据类型

目录 一、数据库类型 二、Redis简介 三、Redis 的优点 Redis 具有以下几个优点&#xff1a; Redis为什么这么快&#xff1f; 四、Redis安装部署 五、Redis 数据库常用命令 Redis 多数据库常用命令 六、Redis数据类型 String数据类型 List数据类型 Hash数据类型&…
阅读更多...
【Python基础】常用模块学习：sys|os|pytest

【Python基础】常用模块学习：sys|os|pytest

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
数据库原理与分析实验三

数据库原理与分析实验三

目录 1、实验目的 2、实验预习与准备 3、实验内容及步骤 本博客为数据库课布置的实验二的作业。 1、实验目的 &#xff08;1&#xff09; 掌握Select子句的功能和检索数据的方法 &#xff08;2&#xff09; 掌握对查询结果排序的方法 2、实验预习与准备 &#xf…
阅读更多...
Python爬虫技术系列-02HTML解析-xpath与lxml

Python爬虫技术系列-02HTML解析-xpath与lxml

Python爬虫技术系列-02HTML解析-xpath与lxml 2 XPath介绍与lxml库2.1 XPath概述2.2 lxml库介绍2.2.1 lxml库安装2.2.2 lxml库基本使用2.2.3 lxml案例a.读取数据并补全b.读取数据并选取节点&#xff1a; 2 XPath介绍与lxml库 参考连接&#xff1a; XPath教程 https://www.w3sch…
阅读更多...
85、Redis连接相关的命令， key相关命令

85、Redis连接相关的命令， key相关命令

本次讲解要点&#xff1a; Redis连接相关的命令&#xff0c; key相关命令&#xff0c; 启动redis服务器&#xff1a; 打开小黑窗&#xff1a; C:\Users\JH>e: E:>cd E:\install\Redis6.0\Redis-x64-6.0.14\bin E:\install\Redis6.0\Redis-x64-6.0.14\bin>redis-serve…
阅读更多...
「UG/NX」Block UI 选择单元SelectElement

「UG/NX」Block UI 选择单元SelectElement

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#
阅读更多...
SpringBoot 学习（三）Web 开发

SpringBoot 学习（三）Web 开发

3. SpringBoot Web 开发 3.1 导入静态资源 (1) webjars 导入 jquery 依赖 <dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.6.0</version> </dependency>访问 jquery.js 文件 http:/…
阅读更多...
python将中文标点符号转换成英文标点符号然后再替换成回车符实现换行

python将中文标点符号转换成英文标点符号然后再替换成回车符实现换行

一段文字如下&#xff1a; 你发现没,杭州亚运会首个比赛日上午&#xff0c;中国体育代表团竟然狂揽11金&#xff01;这一壮丽景象背后&#xff0c;是中国体育事业的坚实基础和精湛训练的见证。 标点符号都是中文状态下的。现在要替换成英文标点符号。参考了文章&#xff1a; …
阅读更多...
Linux基本命令总结练习（过命令关）

Linux基本命令总结练习（过命令关）

1.新建网卡配置文件的软连接NIC1 [rootserver ~]# ln /etc/NetworkManager/system-connections/ens160.nmconnection NIC1 [rootserver ~]# stat /etc/NetworkManager/system-connections/ens160.nmconnection [rootserver ~]# stat NIC1 2.使用普通账户新建如下结构的2个目录&…
阅读更多...
Vue中如何进行跨域处理

Vue中如何进行跨域处理

Vue中的跨域请求处理&#xff1a;解决前端开发中的常见问题 跨域请求是前端开发中常见的问题之一。Vue.js是一款流行的前端框架&#xff0c;如何在Vue中处理跨域请求是每个Vue开发者都需要了解的重要课题。本文将深入探讨什么是跨域请求&#xff0c;为什么它会出现&#xff0c…
阅读更多...
burpsuite只有intruder中文乱码

burpsuite只有intruder中文乱码

burpsuite 只有intruder模块中文乱码 现象&#xff1a;解决方案 现象&#xff1a; 在proxy、repeater等模块下中文均可正常显示&#xff0c;如下图&#xff1a; 在intruder模块&#xff0c;中文显示乱码 解决方案 在payloads标签下payload processing中添加“Decode”
阅读更多...
【跟小嘉学 Rust 编程】三十、Rust 使用 Slint UI

【跟小嘉学 Rust 编程】三十、Rust 使用 Slint UI

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…
阅读更多...
聊聊并发编程——多线程之synchronized

聊聊并发编程——多线程之synchronized

目录 一.多线程下数据不一致问题 二.锁和synchronized 2.1 并发编程三大特性 2.2引入锁概念 三.synchronized的锁实现原理 3.1 monitorenter和monitorexit 3.2synchronized 锁的升级 3.2.1偏向锁的获取和撤销 3.2.2轻量级锁的加锁和解锁 自适应自旋锁 轻量级锁的解锁…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023