3-6.restFul传递方式/Axios

单个参数传递

url地址: http://localhost:8090/getUserById/100
getMapping("/getUserById/{id}")
public String getUserById(@PathVariable Integer id){return “好”;}

对象参数传递

url地址: http://localhost:8090/getUserById/tom/18/男
getMapping("/getUserById/{name}/{age}/{sex}")
//如果传递参数名与类里的属性名一致,可以用User进行传参,省略@PathVariable标签
public String getUserById(User user){return “好”;}

restFul

特点:

1. 参数需要使用/ 进行分割
2. 参数的位置是固定的.
3. restFul请求方法路径不能出现动词

RestFul风格实现CURD操作:

1.查询: http://localhost:8090/user/100 type:GET
2.新增: http://localhost:8090/user/tomcat/18/男 type:POST
3.删除: http://localhost:8090/user/100 type:DELETE
4.更新: http://localhost:8090/user/mysql/100 type:PUT

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
为解决回调地狱问题,对异步访问的优化

回调地狱问题(了解)

说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.
例子: 请求 参数A --1–结果B/参数B—2–结果C/参数C—3— 结果D

操作

Axios-Get-简单参数

Axios-Get-resultFul结构

Axios-Get 对象方式

url:“http://localhost:8080/axios/user/getUserObj”

方式一

方式二

delete请求方式

不带参数的删除
axios.delete(“url位置”).then(function(result){…})
携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){…})
restFul方式
axios.delete(“url地址/100”).then(function(result){…})
对象方式
let user={name:“tom”,age=18,sex=“男”}
axios.delete(“url地址”,params:封装的对象).then(function(result){…})

post请求方式

let user={name:“tom”,age=18,sex=“男”}
axios.post(“url地址”,对象).then(function(result){…})
//注意:post提交的是json串,后台接收需要用json串的方式接收
@RequestBody 将json串转换成对象(@ResponseBody 将对象转换成json串)

分类A
1.get 请求类型 查询
2.delete 请求类型 删除
分类B
1.post 请求类型 form表单提交 新增操作
2.put 请求类型 更新操作

Axios-post-restFul结构

let url2 = “http://localhost:8090/axios/user/redis/18/男”
axios.post(url2)
.then(function(result){
console.log(result.data)
})
postMapper("/axios/{name}/{age}/{sex}")
public User insertUserRest(User user){
return user;
}

箭头函数

主要简化回调函数的写法
重复的 固定的可以简化
如果参数只有一个,小括号可以省略
axios.post(url)
.then(result =>{
console.log(result.data)
})

async-await用法

async 定义一个函数 返回值是一个promise对象
await发送ajax请求
async function getUser(){
let {data: result}=await axios.get(url)
console.log(result)
}