GET request
Example one:
- server code
@GetMapping("/f11")
public String f11(Integer pageNum, Integer pageSize) {
return pageNum + " : " + pageSize;
}
- front-end code
<template>
<div class="home">
<button @click="getFun1">发送get请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
methods: {
getFun1 () {
axios.get('http://localhost/blog/f11?pageNum=12&pageSize=8').then(res => {
console.log(res)
})
}
}
}
</script>
Example two:
- server code
@GetMapping("/f12")
public String f12(Integer pageNum, Integer pageSize, HttpServletRequest request) {
String token = request.getHeader("token");
return pageNum + " : " + pageSize + " : " + token;
}
- front-end code
<template>
<div class="home">
<button @click="getFun2">发送get请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
methods: {
getFun2 () {
axios.get('http://localhost/blog/f12', {
params: {
pageNum: 12,
pageSize: 8
},
headers: {
token: 'asdf123456'
}
}).then(res => {
console.log(res)
})
}
}
}
</script>
The GET method adopts the interface method to carry parameters. For example, the url of the final request server in the above example is:
POST request
Example one:
- server code
@PostMapping("/f21")
public String f21(@RequestBody String param) {
return param;
}
- front-end code
<template>
<div class="home">
<button @click="postFun1">发送post请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
data () {
return {
queryInfo1: {
query: {
username: 'zhangsan',
password: '1234'
}
}
}
},
methods: {
postFun1 () {
let _this = this
axios.post('http://localhost/blog/f21', _this.queryInfo1).then(res => {
console.log(res)
})
},
}
}
</script>
result:
Example two:
- server code
@PostMapping("/f21")
public String f21(@RequestBody String param) {
return param;
}
- front-end code
<template>
<div class="home">
<button @click="postFun2">发送post请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
data () {
return {
queryInfo2: {
username: 'zhangsan',
password: '1234'
}
}
},
methods: {
postFun2 () {
let _this = this
axios.post('http://localhost/blog/f21', {
data: _this.queryInfo2
}).then(res => {
console.log(res)
})
}
}
}
</script>
result:
Example three:
- server code
@PostMapping("/f23")
public String f23(Integer aa, Integer bb,@RequestBody String query) {
return aa + ": " + bb + ": " + query;
}
- front-end code
<template>
<div class="home">
<button @click="postFun3">发送post请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
data () {
return {
queryInfo2: {
username: 'zhangsan',
password: '1234'
}
}
},
methods: {
postFun3 () {
let _this = this
axios.post('http://localhost/blog/f23', _this.queryInfo2, {
params: {
//params表示url中传递的参数，它会拼接在url后面
aa: 11,
bb: 22
}
}).then(res => {
console.log(res)
})
}
}
}
</script>
The requested url is: http://localhost/blog/f23?aa=11&bb=22, the result:
Note that the username and password parameters passed to the background in the above three examples cannot be obtained by the background in the following way:
@PostMapping("/f22")
public String f22(String username, String password) {
return username + " : " + password;
}
The reason is that axios.post transmits data to the background in JSON format by default. By setting the POST request header, you can tell the server that the data format of the request body is in the form of kv, for example: a=aaaa&b=bbbb.
Example: Formatting a POST request
- code behind
@PostMapping("/f21")
public String f21(@RequestBody String param) {
return param;
}
- front-end code
<template>
<div class="home">
<button @click="postFun1">发送post请求</button>
<button @click="postFun2">发送post请求</button>
</div>
</template>
<script>
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
import qs from 'qs'
export default {
name: 'Home',
methods: {
postFun1 () {
let params = new URLSearchParams()
params.append('username', 'zhangsan')
params.append('password', '1234')
axios.post('http://localhost/blog/f22', params).then(res => {
console.log(res)
})
},
postFun2 () {
let params = qs.stringify({
'username': 'zhangsan',
'password': 1234
})
axios.post('http://localhost/blog/f22', params).then(res => {
console.log(res)
})
},
}
}
</script>
The front end will send the parameter to the background in the form of kv string: username=zhangsan&password=1234. The request in the front-end webpage of the above example can also be received by the following controller:
@PostMapping("/f22")
public String f22(String username, String password) {
return username + " : " + password;
}
Put
Example one:
- front end
let _this = this
_this.$axios.put(`/user/${
user.id}/status`).then(res => {
//注意，此处使用的是反斜杠
console.log(res)
})
- rear end
@PutMapping("/user/{userId}/status")
public Result changStatus(@PathVariable("userId") Integer userId){
}
Example two:
- front end
const param = {
userId:1
}
_this.$axios.put('/user/update',param).then(res=>{
console.log(res)
})
- rear end
@PutMapping("/user/update")
public Result changStatus(@PathVariable("userId") Integer userId){
}
patch
front end
const param={
ids:[1,3,5,8]
}
_this.$axios.patch('/user/p',param).then(res=>{
console.log(res)
}),
Delete
front end
_this.$axios.delete('/user/delete',{
params:{
id:1
}
}).then(res=>{
console.log(res)
})