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

• • • 2.1 axios 基本配置

• 2.2 axios 实例

• • 2.2.1 GET 请求
• • 一、不带参数的 get 请求

• 二、带参数的 get 请求

• 三、请求路径中带参数

• 2.2.2 POST 请求

• • 一、以实体类的形式接收参数

• 2.2.3 PUT 请求

• 2.2.4 DELETE 请求

在 RestFul API 中，前后端是分离的，后端不在负责视图的渲染，只负责返回指定的前端请求后端 Rest 风格的 API，后端接收到前端的请求之后，会根据请求方法类型，参数执行一些对应的操作。然后返回 JSON 格式的数据给前端。前端使用 ajax 技术发送 http 请求，可以使用原生的 API，比如 xhr、fetch、Promise API。Jquery 中的 $.ajax，以及现在常用的第三方 http 库 axios

一、SpringBoot 编写后端 API

====================================================================================

1.1 编写一个最简单 API 服务

我在 application.yml 中定义的端口是 3030，所以之后的请求都会以 http://localhost:3030 作为根路径，在下面我写好了一个最简单的 API，然后我们启动项目

@CrossOrigin

@RestController

public class StartController {

@RequestMapping(“/”)

public String Test() {

return “hello”;

}

}

如果你看到这个页面，说明项目启动成功了。

接下来给大家解释一下这个项目的注解

• @CrossOrigin 前后端分离的项目一定会遇到这个问题，使用这个注解解决跨域请求

• @RestController 使用这个注解，我们返回的数据会以 JSON 格式自动返回给前端

• @RequestMapping(“/”) 这个注解表示配置请求的路径，我们没有指定请求方法，所以任何方法都可以接受

1.2 常见接收参数的方式

其他的请求方式都是一样的，这里我们以 GET 请求为示例

// 不带参数，一般获取参数所有数据

@GetMapping(“/get”)

public String testGet() {

return “我是 GET 请求”;

}

// 携带请求参数，携带参数获取数据

@GetMapping(“/get/params”)

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

return “名称” + name;

}

// RestAPI，获取请求路径中的数据。 一般用来请求单条数据

@GetMapping(“/get/{id}”)

public String testGet1(@PathVariable(“id”) Integer id) {

return “id:” + id;

}

// 接收实体参数，只要与实体的属性一一对应，就可以接收。 以实体类的形式接受参数

@GetMapping(“/get/model”)

public Map<String,Object> testGet2(@ModelAttribute User user) {

Map<String,Object> map = new HashMap<>();

map.put(“user”,user);

map.put(“code”,200);

map.put(“msg”,“请求成功~”);

return map;

}

// 接受 JSON格式的实体类

@GetMapping(“/get/json/data”)

public Map<String,Object> testGet3(@RequestBody User user) {

Map<String,Object> map = new HashMap<>();

map.put(“user”,user);

map.put(“code”,200);

map.put(“msg”,“请求成功~”);

return map;

}

二、使用 axios 完成 ajax 请求

====================================================================================

axios 基本使用

2.1 axios 基本配置

我们看下官网的使用说明

实例方法

以下是可用的实例方法。指定的配置将与实例的配置合并。

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

实例配置

{

url: ‘/user’,

methods: ‘GET’,

data: {

“username”: “abc”,

“password”: “123321”

}

…

}

示例：

// 直接请求 GET

axios.get(‘/user’)

// 请求参数会在 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’

}

})

console.log(res1)

get 请求携带参数，我们可以发现请求路径的变化，请求参数是可以看得到的

响应结果

三、请求路径中带参数

补充说明，这种请求路径携带参数的方式是标准的 Restful API 格式，一般在 get 请求中获取 单个数据，或者 delete 方法中删除 一条记录使用的比较多

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。