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压缩，特别是文本数据，能明显减少传输量。
