Axios介绍_day07-08

最新推荐文章于 2024-05-12 11:30:00 发布
最新推荐文章于 2024-05-12 11:30:00 发布
阅读量170 收藏
点赞数
分类专栏： SpringBoot学习笔记 文章标签： java vue spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qfbeqhbviq/article/details/119254470
版权

1. Axios

1.1介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

结构说明:
	1. JS中原生提供了Ajax操作.  弊端: 操作特别的复杂 易用性较差.
	2. jQuery中的Ajax    封装了原生的JS Ajax    提高了开发的效率  
	3. Axios是VUE中默认支持的Ajax的请求的方式.

1.2 调用步骤

<body>
		<script src="../js/axios.js"></script>	
		<script>
		// 1、Axios将原来的嵌套结构改为链式结构
		// 2、回调中的返回值,被忽视服务器的返回值,而是promise对象
			axios.get("http://localhost:8090/axios")
			.then(function(data){
				console.log(data.data)
			})
		</script>
</body>

1.3 Axios的传参方式

1.3.1 Axios-Get的简单传参方式

前端:

axios.get("http://localhost:8090/axios/getUserID?id=100")
			.then(function(result){
				console.log(result.data)
			})

后端:

 @GetMapping("/axios/getUserID")
    public String getUserID(Integer id){
        return  "返回信息id:"+id;
    }

1.3.2 Axios-Get的RestFul传参方式

前端:

axios.get("http://localhost:8090/axios/getUserID/200")
			.then(function(result){
				console.log(result.data)
			})

           /**
			 * restFul风格实现业务传参
			 * 模板函数作用:保留代码原始结构+为参数动态赋值
			 * (不需要再getUserID/"+name+"/"+age,简化了)
			 */
			let name="张三"
			let age=22
			axios.get(`http://localhost:8090/axios/getUserID/${name}/${age}`)
			.then(function(result){
				console.log(result.data)
			})

后端:

 @GetMapping("/axios/getUserID/{id}")
    public String getUserID2(@PathVariable  Integer id){
        return  "返回信息id:"+id;
    }


@GetMapping("/axios/getUserID/{name}/{age}")
    public String getUserID3(@PathVariable  String name,@PathVariable Integer age){
        return  "返回信息name:"+name+",age:"+age;
    }

1.4 Axios四种请求方式(Get、Post、Delete、Put)

1.4.1 Get的对象传参

前端:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/axios.js"></script>	
		<script>
		 let user={ id:1002,name:"张三",age:23,sex:"男"}
		 axios.get("http://localhost:8090/run/getObj",{
			 params:user
		 })
		 .then(function(result){
			 console.log(result.data)
		 })
			
		</script>
	</body>
</html>

后端:

  @GetMapping("/run/getObj")
    public User test2(User user){
        return user;
   }

1.4.2 Delete请求

前端:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 语法:一般用户通过Delete请求做删除操作,
		删除的语法与Get请求语法一致
		请求方式: 
		 1.不带参数点的请求 .delete("url地址") 
		 2.携带个别参数 .delete("url地址?id=100") 
		 3.restFul结构 .delete("url地址/*/*/*/*") 
		 4.采用对象方式进行参数传递
		 -->
		<script src="../js/axios.js"></script>	
		<script>
		// 1.不带参数的请求
		 axios.delete("http://localhost:8090/run/delete")
		 .then(function(result){
			 console.log(result.data)
		 })
		 
		 // 2.携带个别参数
		 axios.delete("http://localhost:8090/run/delete2?id=100")
		 .then(function(result){
		 			 console.log(result.data)
		 })
		 
		 //3.restFul结构
		 let id=1008
		 let name="张三"
		 let age=23
		 let sex="男"
		 axios.delete(`http://localhost:8090/run/delete/${id}/${name}/${age}/${sex}`)
		 .then(function(result){
		 		console.log(result.data)	 
		 })
		 
		// 4.采用对象方式进行参数传递 
		let user={ id:1009,name:"张三",age:23,sex:"男"}
		axios.delete("http://localhost:8090/run/delete3",{
			params:user
		})
		.then(function(result){
				console.log(result.data)		 
		})
		</script>
	</body>
</html>

后端:

 //不接收参数
    @DeleteMapping("run/delete")
    public String test6()
    {
        return  "不接收参数";
    }

//接收个别参数
    @DeleteMapping("run/delete2")
    public String test5(Integer id)
    {
        return  "接受的参数为:"+id;
    }

//restFul参数格式
@DeleteMapping("run/delete/{id}/{name}/{age}/{sex}")
    public User test7(User user)
    {
        return  user;
    }


//对象参数格式
@DeleteMapping("run/delete3")
    public User test8(User user)
    {
        return user;
    }

1.4.3 Post请求

1、post的对象传参

前端:

<!-- post主要用于pom表单的提交,保护秘密信息 -->
		<!-- 总结如果需要对象传参:
		 1.get采用{params:对象}
		 2.post采用  axios.post(url,对象)-->
		<script src="../js/axios.js"></script>	
		<script>
		 let user={ id:1005,name:"张三",age:23,sex:"男"}
		 let url="http://localhost:8090/run/post"
		 axios.post(url,user)
		 .then(function(result){
			 console.log(result.data)
		 })

后端:

 /**
     * post提交传过来的是JSON串,不能直接用对象接参
     * 解决方法:
     * 1.JSON串->对象  @RequestBody ✔
     * 2.独对象->JSON串 @ResponseBody
     */
    @PostMapping("run/post")
    public User test4(@RequestBody  User user)
    {
        return user;
    }

2、post的restFul传参方式

前端:

<!-- post请求restFul写法 -->
		 let url2="http://localhost:8090/run/post2/1005/赵四/44/男"
		 axios.post(url2)
		 .then(function(result){
		 	console.log(result.data)
		 })

后端:

  @PostMapping("run/post2/{id}/{name}/{age}/{sex}")
    public User test3(User user)
    {
        return user;
    }

1.5 async-await用法-箭头函数

1.5.1 概念解释

1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中

1.5.2 箭头函数

 /**
		* axios的get请求语法
		* 知识点:
		* 		1.箭头函数 主要简化回调函数的写法
		* 		思路: 重复的 固定的可以简化
		* 		规则: 如果参数只有一个则括号可以省略
		*/
		let url = "http://localhost:8090/axios/getUserID?id=100"
		axios.get(url)
		 .then( result => {
			 alert(result.data)
			})

1.5.3 async-await 操作

  // 2.async--await简化 
  // await: 标识ajax请求
  // async: 标识函数
async function getUserID(){
		 let url="http://localhost:8090/axios/getUserID?id=100"
		 // let promise=await axios.get(url)
		 // console.log(promise)
		 // console.log(promise.data)
		 
		 let {data: resultData,status: code}=await axios.get(url)
		 console.log(resultData)
		 console.log(code)
		 }
		 getUserID()

1.5.4 配置axios请求路径

// 定义ajax请求的路径,为ajax请求添加前缀
		axios.defaults.baseURL="http://localhost:8090"

		
		 async function getUserID(){
		 let url="/axios/getUserID?id=100"
		 // let promise=await axios.get(url)
		 // console.log(promise)
		 // console.log(promise.data)
		 
		 let {data: resultData,status: code}=await axios.get(url)
		 console.log(resultData)
		 console.log(code)
		 }
		 getUserID()

1.6 Axios练习

1.6.1VUE+Axios 需求分析

说明:

  1. 利用VUE.js构建页面
  2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
  3. 完成页面数据的删除操作
  4. 完成页面数据的修改操作

前端效果展示:
在这里插入图片描述

绘制前端页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		
			<h1 align="center">修改信息</h1>
			 <div align="center">
				 <table border="0px" width="50%" align="center">
					<tr align="center">
						<td align="absmiddle">ID号:<a v-text="upUser.id"></a></td>
					</tr> 
					<tr align="center">
						<td>姓名:<input  v-model.trim="upUser.name" type="text"/></td>
					</tr>
					<tr align="center">
						<td>年龄:<input  v-model.number="upUser.age" type="text"/></td>
					</tr>
					<tr align="center">
						<td>性别:<input  v-model.trim="upUser.sex" type="text"/></td>
					</tr>
					<tr align="center">
						<td ><button type="button" @click="updateUser()">提交</button></td>
					</tr>
				 </table>
			 
			<h1>新增信息</h1>
			ID:<input type="text" v-model.number="user.id"/>
			name:<input type="text" v-model.trim="user.name"/>
			age:<input type="text" v-model.number="user.age"/>
			sex:<input type="text" v-model.trim="user.sex"><br />
			<button  @click="addUser()">提交</button>
			</div>
			<br />
			<table border="2px" align="center" width="80%">
				<tr align="center">
					<td colspan="5"><h1>信息展示列表</h1></td>
				</tr>
				<tr>
					<th>ID</th>
					<th>name</th>
					<th>age</th>
					<th>sex</th>
					<th>action</th>
				</tr>
				<tr v-for="user in userList" align="center">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button type="button" @click="delUser(user.id)">删除</button>|
						<button type="button" @click="getUpUser(user)">修改</button>
					</td>
				</tr>
			</table>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
		axios.defaults.baseURL="http://localhost:8090"
		const APP=new Vue({
			el:"#app",
			data:{
				userList:[],
				user:{id:0,name:'',age:0,sex:''},
				upUser:{id:0, name:'',age:0,sex:''}
			},
			// 调用生命周期函数
			methods:{
				async addUser(){
					alert("添加成功!")
					await axios.post("/vue/addUser",this.user)
					this.getUserList()
				},
				async getUserList(){
					// alert("展示成功!")
					let{data: result}=await axios.get("/vue/getUserList")
					this.userList=result
				},
				async delUser(id){
					alert("删除成功!")
					await axios.delete(`/vue/delUser?id=${id}`)
					this.getUserList()
				},
				async getUpUser(clickUser){
				
					this.upUser.id=clickUser.id
					this.upUser.name=clickUser.name
					this.upUser.age=clickUser.age
					this.upUser.sex=clickUser.sex
				},
				async updateUser(){
					alert("修改成功!")
					await axios.put("/vue/updateUser",this.upUser)
					this.getUserList()
				}
			},
			mounted() {
				this.getUserList()
			}
		})
		</script>
	</body>
</html>

后端配置:

@RestController
@CrossOrigin
@RequestMapping("/vue/")//包含全部类型
public class VUEController {
    @Autowired
    private UserService userService;

    @GetMapping("getUserList")
    public List<User> getUerList(){
        return userService.getUerList();
    }

    @PostMapping("addUser")
    public void addUser(@RequestBody User user){
         userService.addUser(user);
    }
    @DeleteMapping("delUser")
    public void delUser(Integer id){
           userService.delUser(id);
    }
    @PutMapping("updateUser")
    public void  updateUser(@RequestBody  User user){
           userService.updateUser(user);
    }

}
博客新生儿~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
311_wk1_day2_axios
03-15
另外，请注意，已经为您提供了所有axios调用的URL，但是您需要在src/index.js文件的顶部require axios才能使所有内容正常工作。 让我们完成以下功能： discoverMovie 初始调用将通过键入axios(url) Axios是一个...
@PathVariable、@PathParam、@RequestBody接收axios传递的请求参数；后端接收前端传递过来的参数
weixin_72388638的博客
05-21 2980
@PathVariable、@PathParam、@RequestBody接收axios传递的请求参数；后端接收前端传递过来的参数；后端使用@PathParam 接收时候出现 null；
关于axios请求java接口中的@RequestParam、@PathVariable及@RequestBody不同接参类型的用法
hmwz0001的博客
07-25 1714
后端接口路径+属性值;路径后面有反斜杠/，注意不要写漏了，不然value就会变成路径的一部分，请求路径就会变成/sys/test后面跟上value的值，从而导致404。二、axios使用restful规范的get请求，后端使用@PathVariable接参。一、前端传json对象，后端指定接收json对象中的哪个参数。（1）、后端接口（接参方式）
解决axios发送post请求，springMVC接收不到数据问题
最新发布
svygh123的专栏
05-12 1077
SpringMVC 中 @PathVariable、@RequestBody、@RequestParam的使用场景以及对应的前端axios写法是什么呢？
使用axios进行接口请求和使用Java进行接收
m0_64284147的博客
03-19 8714
1、axios普通get请求 //axios普通get请求 //方法名为test,传入数据value function test(value) { axios({ //请求方式 method:'get', //后端接口路径 url:'/sys/test', //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能和post配合使用 params: { //attributeName为属性名
Axios发送异步请求解决跨域问题
qq_55272229的博客
10-17 1211
前后端分离,vue配置axios的动态代理解决跨域
【知识整理】Axios-如何发送一个GET请求
热门推荐
qq_19891827的博客
12-18 4万+
一.发送一个GET请求 1.将请求参数挂载到请求的url中的形式： axios.get('/user?id=123&lpage=1').then(function(response){ console.log(response);//请求正确时执行的代码 }).catch(function (response){ console.log(response);//发生错误时执行的代码 });
web-day-54-react-bootstarp-material-ui-axios-rechart
03-08
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
day07_API02.zip
09-12
【描述】"day07_API02" 提供的信息较少，但我们可以推测这可能是一个连续学习计划的一部分，其中“day07”表示这是第七天的学习内容，而“API02”可能代表API的第二个主题或模块，说明前一个部分已经介绍了API的基础...
react-day4-server-starter
03-19
【React Day 4 Server Starter】项目是一个基于JavaScript的前端开发框架，主要针对的是React应用的服务器端渲染（Server-Side Rendering, SSR）场景。在React Day 4的学习中，这个项目提供了一个起点，帮助开发者...
React-Weather-5-day-Forecast-
04-17
React-Weather-5-day-Forecast 是一个基于React技术构建的天气预报应用，它能够提供未来五天的天气预测信息。这个项目可以帮助开发者学习如何在实际应用中整合React与开放天气API来创建交互式Web应用。 React是...
vue 通过axios实现get请求、post请求-----各2种方式
xcc_2269861428的博客
09-23 1856
通过vue实现get请求、post请求-----------各2种方式 axiso文档：http://www.axios-js.com/zh-cn/docs/index.html 使用GET请求 第一种使用纯url拼接方式 get1_:function() { axios.get('/ajax/get?id=1&name=xcc') ...
关于get请求的前端axios、后端java写法
luxiaopengyou的博客
09-30 1236
前端 Axios(){ let a = {params:{ID:"hehe"}}; let url = 'erobot/Axios/getData'; axios.get(url, a).then(res=>{ console.log(res.data); }) } 后端 @RequestMapping(value="getData", method = RequestMethod.GET,produces={"
基于axios前后端数据交互
m0_45155436的博客
12-06 4282
基于axios前后端数据交互 一、get 1、前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/axios.js"></script> <script type="text/j
axios远程调用
m0_60477159的博客
11-03 587
什么是跨域？ 说明:浏览器解析Ajax时要求浏览器的网址,与Ajax请求的网址,必须满足三要素. 要素: 1.协议相同 2.域名相同 3.端口号相同如果上述的三要素都满足,则叫同域访问,如果三要素有一项不满足,则称为跨域访问 协议不同： 域名不同： http默认的端口号是80： https默认的端口号是443： 域名不同，端口号不同： ...
axios的传参方式
weixin_44152684的博客
08-08 5727
或者直接把参数拼接在地址后面。delete和get一样。注解，不然接收不到参数。还有一种情况是后端用。put和post一样。
axios的各种传参方式（转载）及Spring boot处理方式
muziyouyouli的博客
08-11 565
https://www.cnblogs.com/liangweiping/p/11533162.html（转载）
@PathVariable用法
涵山韵海的博客
06-03 5323
在开发中，路径里面带参数的情况很少，但遇到了还要写，备记一下。 前端页面发送请求： function backdata(){ window.location.href="${pageContext.request.contextPath}/auth/queryAuthhospitalcity?id=10&orgLevel=2&signature="+s...
E:\2023前端Vue2+Vue3\2、Vue2+Vue3全套教程\Vue2\资料\day6\code1\dome-3>npm i axios -S npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/eslint-config-standard@6.1.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0 npm ERR! node_modules/eslint-plugin-vue npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\NYH\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\NYH\AppData\Local\npm-cache\_logs\2023-07-16T11_48_37_888Z-debug-0.log
07-17
1. 强制安装：你可以尝试使用 `npm install axios -S --force` 命令来强制安装依赖，但请注意这可能会导致其他潜在的依赖问题。 2. 使用旧版本：你可以尝试将 @vue/eslint-config-standard 的版本降级到兼容 eslint...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值