SpringBoot + Vue （axios）实现 Restful API 交互

// 请求参数会在 url 中显示： /user?username=admin&password=123456

axios.get(“/user”,{

params: {

“username” : “admin”,

“password”: “123456”

}

})

// 使用配置的方式配置请求参数, 请求参数会以 JSON 字符串的形式传递，如果 header 中设置了 Content-Type 为 form 表单，就可以使用普通的参数接收

axios({

url: ‘/user’,

methods: ‘post’,

data: {

“username”: “admin”,

“password”: “123321”

},

},{

headers: {

“token”: “123321”

}

})

2.2 axios 实例

2.2.1 GET 请求

一、不带参数的 get 请求

后端代码接收不带参数的 get 请求

// 不带参数

@GetMapping(“/get”)

public String testGet() {

return “我是 GET 请求”;

}

前端编写 ajax

async function testGetAsync() {

// GET 请求，不带参数

const {data: res} = await this.axios.get(“http://localhost:3030/get”)

console.log(res)

}

运行结果

二、带参数的 get 请求

• SpringBoot 中 RequestParam 注解就是用来接收 url 中 键值对中的数据

后端代码：

// 携带请求参数

@GetMapping(“/get/params”)

public String test (@RequestParam(“name”) String name) {

return “名称” + name;

}

前端 ajax 代码

// GET 请求，携带参数

const {data: res1} = await this.axios.get(‘http://localhost:3030/get/params’,{

params: {

name: ‘coco’

}

})

co