当前位置：首页 > news >正文

Axios与Java Spring构建RESTful API服务集成指南

news 2025/9/18 5:44:49

1 前后端分离时代的技术选择

现在的Web开发，前后端分离已经不是什么新鲜事了。前端用什么？很多团队选择Axios。后端呢？Java Spring依然是企业级应用的首选。

Axios这个JavaScript库确实好用，Promise-based的设计让异步请求变得简单。Java Spring框架在后端领域的地位就更不用说了，稳定、功能强大，特别是Spring Boot出现后，配置工作量大幅减少。

本文会详细讲解Axios怎么发请求，Spring怎么接收处理，涵盖常见的CRUD操作、搜索功能，还有批量处理这些实际开发中经常遇到的场景。

1.1 为什么选择Axios

Axios在前端HTTP库中算是佼佼者，原因很简单：

异步数据交互方面，Axios让Ajax请求变得轻松，和后端RESTful API对接毫无压力。跨域请求支持是原生的，不用额外配置就能处理CORS问题。

请求/响应拦截器这个功能特别实用，可以在请求发出前统一添加token，或者在响应回来后统一处理错误。API设计也很人性化，上手快，配置选项丰富。

1.2 Spring框架的企业级优势

Spring Boot的出现改变了Java后端开发的游戏规则。

约定优于配置这个理念让开发者从繁琐的XML配置中解脱出来。想要RESTful API？几个注解就搞定。需要集成数据库、安全认证、消息队列？各种Starter POMs让这些变得简单。

配合Spring Cloud，微服务架构也不再是难题。这就是为什么这么多企业选择Spring的原因。

2 HTTP方法与RESTful设计

理解HTTP方法是做好RESTful API的基础。每个方法都有自己的用途和特点。

2.1 核心HTTP方法解析

GET - 获取数据用的，参数放在URL里，幂等且安全，但不适合传敏感信息，浏览器会缓存
POST - 提交数据，创建资源，数据放在请求体里，非幂等
PUT - 更新资源，替换整个资源，幂等
DELETE - 删除资源，幂等

这些方法对应着数据的增删改查操作，遵循RESTful设计原则。

3 Axios与Spring Boot基础对接

3.1 Axios快速上手

安装很简单：

npm install axios
# 或者
yarn add axios

基本用法：

import axios from 'axios';axios.get('http://localhost:8080/api/data').then(response => {console.log(response.data);}).catch(error => {console.error("获取数据失败", error);});

3.2 Spring Boot项目搭建

环境要求：JDK 8+，Maven或Gradle。

用Spring Initializr (https://start.spring.io/) 生成项目骨架最方便。

写个简单的Controller：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class DataController {@GetMapping("/api/data")public String getData() {return "Hello from Spring Boot!";}
}

运行项目：mvn spring-boot:run 或 gradlew bootRun

4 实战场景详解

4.1 删除单个资源（路径参数）

这是最标准的RESTful删除方式。

前端代码：

axios.delete(`/delete/${id}`).then(response => {console.log('删除成功', response.data);}).catch(error => {console.error('删除失败', error);});

后端代码：

@DeleteMapping("/delete/{id}")
public ResponseEntity<String> deleteResource(@PathVariable("id") Long id) {service.deleteById(id);return ResponseEntity.ok("ID为 " + id + " 的资源已删除");
}

4.2 删除资源（查询参数方式）

有时候需要通过查询参数传递ID。

前端代码：

axios.get('/delete', { params: { id: 11 } }).then(response => {console.log('删除成功', response.data);}).catch(error => {console.error('删除失败', error);});

后端代码：

@GetMapping("/delete")
public ResponseEntity<String> deleteResourceById(@RequestParam("id") Long id) {service.deleteById(id);return ResponseEntity.ok("ID为 " + id + " 的资源已删除");
}

注意： 实际项目中别用GET做删除操作，不符合REST规范，而且有安全风险。

4.3 更新资源（POST方式）

前端代码：

axios.post('/update', { id: 1 }).then(response => {console.log('更新成功', response.data);}).catch(error => {console.error('更新失败', error);});

后端代码：

@PostMapping("/update")
public ResponseEntity<String> updateResource(@RequestBody ResourceUpdateRequest request) {Long id = request.getId();service.updateResource(id);return ResponseEntity.ok("ID为 " + id + " 的资源已更新");
}

4.4 完整更新资源（PUT方式）

PUT用于完整替换资源。

前端代码：

axios.put('/update', { id: 1, newName: '新名称' }).then(response => {console.log('更新成功', response.data);}).catch(error => {console.error('更新失败', error);});

后端代码：

@PutMapping("/update")
public ResponseEntity<String> updateResourceCompletely(@RequestBody ResourceUpdateRequest request) {Long id = request.getId();String newName = request.getNewName();service.updateResourceCompletely(id, newName);return ResponseEntity.ok("ID为 " + id + " 的资源已完全更新");
}

4.5 创建新资源

前端代码：

axios.post('/create', { name: '新资源' }).then(response => {console.log('创建成功', response.data);}).catch(error => {console.error('创建失败', error);});

后端代码：

@PostMapping("/create")
public ResponseEntity<ResourceCreatedResponse> createNewResource(@RequestBody NewResourceRequest request) {String resourceName = request.getName();ResourceCreatedResponse response = service.createNewResource(resourceName);return ResponseEntity.status(HttpStatus.CREATED).body(response);
}

4.6 搜索功能实现

搜索通常用GET请求，参数通过URL传递。

前端代码：

axios.get('/search', { params: { keyword: '关键词' } }).then(response => {console.log('搜索结果:', response.data);}).catch(error => {console.error('搜索失败', error);});

后端代码：

@GetMapping("/search")
public ResponseEntity<List<Resource>> searchResources(@RequestParam("keyword") String keyword) {List<Resource> results = service.searchByKeyword(keyword);return ResponseEntity.ok(results);
}

4.7 批量删除操作

批量操作需要传递多个ID，用DELETE请求体。

前端代码：

axios.delete('/batchDelete', { data: [{ id: 1 }, { id: 2 }] }).then(response => {console.log('批量删除成功', response.data);}).catch(error => {console.error('批量删除失败', error);});

后端代码：

@DeleteMapping("/batchDelete")
public ResponseEntity<String> batchDeleteResources(@RequestBody List<Long> ids) {service.batchDelete(ids);return ResponseEntity.ok("ID为 " + ids + " 的资源已批量删除");
}

提醒： Axios的delete方法默认不支持请求体，要用axios({ method: 'delete', url: '/...', data: yourData })这种写法。

5 HTTP方法与注解对应关系

5.1 各种请求的处理方式

GET请求 - 获取资源或搜索，用@GetMapping + @PathVariable或@RequestParam
POST请求 - 创建资源或提交数据，用@PostMapping + @RequestBody
PUT请求 - 完整更新资源，用@PutMapping + @RequestBody
DELETE请求 - 删除资源，用@DeleteMapping + @PathVariable或@RequestBody