一、概述
是一个基于 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);
}