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

原创

Yeats_Liao

发布于 2025-09-18 10:59:48

2540

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

6 开发中的注意事项

6.1 安全方面的考虑

别用GET做修改操作

GET请求可能被浏览器预加载、缓存，或者留在浏览历史里。修改数据要用POST、PUT、DELETE。

敏感数据要加密

不管用什么HTTP方法，敏感数据传输都要用HTTPS。

做好认证和授权

OAuth、JWT这些认证机制要用起来，确保只有合法用户能访问和修改数据。

6.2 性能优化建议

异步处理

前端用Ajax异步请求，避免页面刷新，用户体验更好。后端也可以用异步编程处理耗时操作。

缓存策略

静态资源和不常变的数据要设置缓存，ETag、Last-Modified、Cache-Control这些HTTP头要用好。

分页和懒加载

大量数据要分页显示，需要时再加载，减少首次加载时间。

数据压缩

开启GZIP压缩，特别是文本数据，能明显减少传输量。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#自选日志

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#自选日志

登录后参与评论

0 条评论

热度