Axios学习笔记

最新推荐文章于 2023-09-20 15:48:24 发布

差妙

最新推荐文章于 2023-09-20 15:48:24 发布

阅读量157

点赞数

分类专栏： SpringBoot 文章标签：学习前端 java

本文链接：https://blog.csdn.net/LBC904922811/article/details/129331022

版权

SpringBoot 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概述

是一个基于 promise(内部封装了ajax) 的 HTTP 库，用与在内部简化异步调用。
传统的ajax的操作有"回调地狱问题" （由于业务复杂,导致多重的ajax进行嵌套. 如果中间出现任何问题.则导致整个ajax调用失败.）

二、前提准备

后端

1、Controller的注解要使用@RestController、@CrossOrigin
分别用于接受JSON数据及解决跨域
2、mappers的配置文件只在做复杂数据库操作才能用到

前端

二、基础操作

1、入门案例

需求：在前端控制台打出"vue的ajax异步调用"
流程：前端发起Axios请求，后端拦截并返回给前端，前端通过回调函数接受在控制台打出"vue的ajax异步调用"

    @GetMapping("/hello")
    public String hello(){
        return "vue的ajax异步调用";
    }

	let url = "http://localhost:8090/hello"
	axios.get(url)
		 .then(function(result){
			 console.log(result.data)
		 })

和ajax方式对比

2、GET / DELETE请求

用于拦截前端请求并做出响应

2-1、带参数写法

获取参数打印到控制台，注意路径不要带？后的参数

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

    @GetMapping("/axios")
    public String getaxios(Integer id){
        return "动态获取参数："+id;
    }

2-2、Result风格

指直接/后跟参数，请求更加简洁，同时参数更加方便
@PathVariable注解的用法和作用

在这里插入图片描述

2-3、 Params方法

注意params的写法：先写{}，再写params：{}，注意p小写。其实就是把参数用params包装起来了

axios.get("http://localhost:8090/axiosParams",{
		params: {
			id:300
		}
	}).then(function(result){
			   console.log(result.data)
	})

    @GetMapping("/axiosParams")
    public String params(Integer id){
        return "Params接受参数："+id;
    }

3、POST / PUT请求

用于页面向服务器提交数据
提交的数据是JSON格式，后端接收需要将其转通过@RequestBody换成对象解析
使用箭头函数进行简写

3-1、对象传参

提交的是JSON格式

在这里插入图片描述

3-2、Form表单传参

以表单方式传输则不是JSON，是一个对象

let params = new URLSearchParams();
			params.append("id",200)
			params.append("name","jeryy")
			
			axios.post("http://localhost:8090/addAxiosForm",params)
				 .then(result=>{
					 console.log(result.data)
				 })

    @PostMapping("/addAxiosForm")
    public User addAxiosForm(User user){
        return user;
    }

三、实际案例

配合vue实现增删改查操作

3-1、前端准备

创建表格、准备好点击事件，遍历数据集UserList
创建Vue对象准备好对应data、methods
mounted方法用于渲染完成时执行，这里是为了每次执行完刷新下页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		   <!--准备一个表格-->
		   用户编号：<input type="text" disabled  v-model="user.id" />
		   用户性名：<input type="text" v-model="user.name" /><br>
		   用户年龄：<input type="text" v-model="user.age"/>
		   用户性别：<input type="text" v-model="user.sex"/>
		  <button @click="addUser">新增</button>
		   <button @click="updataUser">更新</button>
		   
			<table id="userTable" border="1px" align="center" width="800px">
				<tr align="center">
					<td colspan="5"><h3>用户列表</h3></td>
				</tr>
				<tr align="center">
					<td>ID</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<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 @click="btnupdata(user)">修改</button>
						<button @click="deleteUser(user)" >删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script src="js/axios.js"></script>
		<script src="js/vue.js"></script>
		<script>
			const  app = new Vue({
				el: "#app",
				data: {
					userList : [],
					user:{
						id : '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods:{
					getUserList(){ 
						
					},
					addUser(){
						
					},
					deleteUser(user){
						
					},
					btnupdata(user){
					
					},
					updataUser(){
						
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

3-2、查看所有用户

后端User要绑定数据库表名 @TableName(“demo_user”)
遍历UserList得到的User对象要再data处定义
前端通过回调函数获取数据展示在页面

    @GetMapping("/axiosUser/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

async getUserList(){ 
	//data：对象中的属性
	//value：表示接收返回值的结果
	const {data: value}	= await axios.get("http://localhost:8090/axiosUser/findAll")
	//将结果给data中定义的属性，再去遍历展现
	this.userList = value
},

3-3、新增用户

注意是将前端数据提交到后端存储，故要用put方法

async addUser(){
	await axios.put("http://localhost:8090/axiosUser/addUser",this.user)	
	//刷新页面
	this.getUserList()					
},

@PutMapping("/axiosUser/addUser")
public void addUser(@RequestBody User user) {
    userService.addUser(user);
}

3-4、删除用户

请求、注解都有对应的delete方法

async deleteUser(user){
	await axios.delete("http://localhost:8090/axiosUser/deleteUser",{
		params:{
			id : user.id
		}
	})
	this.getUserList()
},

@DeleteMapping("/axiosUser/deleteUser")
public void deleteUser(Integer id){
    userService.deleteUserById(id);
}

3-5、修改用户

1、先点击按钮能选中用户

btnupdata(user){
		//需要外界传入用户给data数据赋值
		this.user = user
},

2、前端发送数据给后端修改注意前端传的是JSON类型的对象

	async updataUser(){
		await axios.put("http://localhost:8090/axiosUser/updataUser",this.user)
		this.getUserList()
	}

    @PutMapping("/axiosUser/updataUser")
    public void finupdataUser(@RequestBody User user){
        userService.updataUser(user);
    }

差妙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Axios学习笔记

axios基础调用及应用
复制链接

扫一扫

专栏目录