Java大前端java
Spring Boot + Vue 前后端接口交互全流程详解
Spring Boot 与 Vue 的前后端接口交互流程。涵盖架构概览、REST 控制器实现、DTO 设计、全局异常处理；前端 Axios 封装、API 模块化及组件调用；参数传递方式、跨域配置、文件上传；JWT 认证、接口限流；Swagger 文档生成；以及缓存、分页等性能优化方案。提供完整代码示例与常见问题解决方案，助力高效安全开发。
Spring Boot 与 Vue 的前后端接口交互流程。涵盖架构概览、REST 控制器实现、DTO 设计、全局异常处理；前端 Axios 封装、API 模块化及组件调用；参数传递方式、跨域配置、文件上传；JWT 认证、接口限流；Swagger 文档生成；以及缓存、分页等性能优化方案。提供完整代码示例与常见问题解决方案，助力高效安全开发。
@RestController
@RequestMapping("/api/users")
@CrossOrigin // 处理跨域，生产环境应配置具体域名
public class UserController {
@Autowired
private UserService userService;
// 获取用户列表
@GetMapping
public ResponseEntity<List<UserDTO>> getUsers(@RequestParam(required = false) String name) {
List<UserDTO> users = userService.findUsers(name);
return ResponseEntity.ok(users);
}
// 获取单个用户
@GetMapping("/{id}")
public ResponseEntity<UserDTO> getUser(@PathVariable Long id) {
UserDTO user = userService.getUserById(id);
return ResponseEntity.ok(user);
}
// 创建用户
@PostMapping
public ResponseEntity<UserDTO> createUser(@Valid @RequestBody UserCreateRequest request) {
UserDTO newUser = userService.createUser(request);
return ResponseEntity.status(HttpStatus.CREATED).body(newUser);
}
// 更新用户
@PutMapping("/{id}")
public ResponseEntity<UserDTO> updateUser(@PathVariable Long id, @Valid @RequestBody UserUpdateRequest request) {
UserDTO updatedUser = userService.updateUser(id, request);
return ResponseEntity.ok(updatedUser);
}
// 删除用户
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteUser(@PathVariable Long id) {
userService.deleteUser(id);
return ResponseEntity.noContent().build();
}
}
用户创建请求 DTO：
@Data
public class UserCreateRequest {
@NotBlank(message = "用户名不能为空")
@Size(max = 50, message = "用户名最长 50 个字符")
private String username;
@NotBlank(message = "密码不能为空")
@Size(min = 6, max = 20, message = "密码长度 6-20 位")
private String password;
@Email(message = "邮箱格式不正确")
private String email;
@Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确")
private String phone;
}
用户响应 DTO：
@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class UserDTO {
private Long id;
private String username;
private String email;
private String phone;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime createTime;
}
@RestControllerAdvice
public class GlobalExceptionHandler {
// 处理验证异常
@ExceptionHandler(MethodArgumentNotValidException.class)
public ResponseEntity<ErrorResponse> handleValidationException(MethodArgumentNotValidException ex) {
List<String> errors = ex.getBindingResult()
.getFieldErrors()
.stream()
.map(error -> error.getField() + ": " + error.getDefaultMessage())
.collect(Collectors.toList());
ErrorResponse response = new ErrorResponse("VALIDATION_FAILED", "参数验证失败", errors);
return ResponseEntity.badRequest().body(response);
}
// 处理业务异常
@ExceptionHandler(BusinessException.class)
public ResponseEntity<ErrorResponse> handleBusinessException(BusinessException ex) {
ErrorResponse response = new ErrorResponse(ex.getCode(), ex.getMessage(), null);
return ResponseEntity.status(ex.getStatus()).body(response);
}
}
// src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 添加 token
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + store.getters.token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 业务错误处理
if (res. && res. !== ) {
({ : res. || , : , : * })
(res. === ) {
}
.( (res. || ))
} {
res
}
},
{
({ : error., : , : * })
.(error)
}
)
service
// src/api/user.js
import request from '@/utils/request'
// 获取用户列表
export function getUsers(params) {
return request({ url: '/api/users', method: 'get', params })
}
// 获取用户详情
export function getUser(id) {
return request({ url: `/api/users/${id}`, method: 'get' })
}
// 创建用户
export function createUser(data) {
return request({ url: '/api/users', method: 'post', data })
}
// 更新用户
export function updateUser(id, data) {
return request({ url: `/api/users/${id}`, method: 'put', data })
}
// 删除用户
export function deleteUser(id) {
return ({ : , : })
}
<template>
<div>
<el-table :data="userList">
<!-- 表格内容 -->
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form :model="userForm" :rules="rules" ref="userForm">
<!-- 表单内容 -->
</el-form>
</el-dialog>
</div>
</template>
<script>
import { getUsers, createUser } from '@/api/user'
export default {
data() {
return {
userList: [],
dialogVisible: false,
userForm: {
username: '',
password: '',
email: '',
phone: ''
},
rules: {
username: [
{ required: true, : , : },
{ : , : , : }
],
}
}
},
() {
.()
},
: {
() {
{
{ data } = ({ : . })
. = data
} (error) {
.(, error)
}
},
() {
...( valid => {
(valid) {
{
(.)
..()
. =
.()
} (error) {
.(, error)
}
}
})
}
}
}
| 参数类型 | 前端传递方式 | 后端接收方式 |
|---|---|---|
| URL 路径参数 | /users/123 | @PathVariable Long id |
| URL 查询参数 | /users?name=John&age=20 | @RequestParam String name |
| 请求体 JSON 参数 | {name:"John",age:20} | @RequestBody UserDTO user |
| 表单参数 | FormData对象 | @ModelAttribute UserForm form |
| 请求头参数 | headers: {Authorization: ...} | @RequestHeader String token |
Spring Boot 配置类：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:8080", "https://yourdomain.com")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
后端接收：
@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
throw new BusinessException("文件不能为空");
}
String fileName = fileStorageService.storeFile(file);
return ResponseEntity.ok(fileName);
}
前端上传：
// 使用 FormData 上传文件
const formData = new FormData()
formData.append('file', file)
uploadFile(formData).then(response => {
// 处理响应
})
Spring Security 配置：
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()))
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS);
}
}
Vue 前端处理：
// 登录示例
login({ username, password }).then(response => {
const { token } = response.data
commit('SET_TOKEN', token)
localStorage.setItem('token', token)
// 设置 axios 默认携带 token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
})
@RestController
@RequestMapping("/api/products")
public class ProductController {
@RateLimiter(value = 10, key = "product_list") // 10 次/秒
@GetMapping
public List<Product> listProducts() {
return productService.findAll();
}
}
Spring Boot 配置：
@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket api() {
return new Docket(DocumentationType.SWAGGER_2)
.select()
.apis(RequestHandlerSelectors.basePackage("com.example.controller"))
.paths(PathSelectors.any())
.build()
.apiInfo(apiInfo());
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("电商系统 API 文档")
.description("前后端接口定义")
.version("1.0")
.build();
}
}
@Api(tags = "用户管理")
@RestController
@RequestMapping("/api/users")
public class UserController {
@ApiOperation("获取用户列表")
@ApiImplicitParams({
@ApiImplicitParam(name = "name", value = "用户名", paramType = "query")
})
@GetMapping
public ResponseEntity<List<UserDTO>> getUsers(String name) {
// ...
}
}
@Cacheable(value = "users", key = "#id")
@GetMapping("/{id}")
public UserDTO getUser(@PathVariable Long id) {
return userService.getUserById(id);
}
后端实现：
@GetMapping
public PageResult<UserDTO> getUsers(
@RequestParam(defaultValue = "1") int page,
@RequestParam(defaultValue = "10") int size) {
Pageable pageable = PageRequest.of(page - 1, size);
Page<UserDTO> userPage = userService.findUsers(pageable);
return new PageResult<>(userPage.getContent(), userPage.getTotalElements());
}
前端调用：
getUsers({ page: this.currentPage, size: this.pageSize }).then(response => {
this.userList = response.data.list
this.total = response.data.total
})
后端配置：
# application.yml
spring:
jackson:
time-zone: GMT+8
date-format: yyyy-MM-dd HH:mm:ss
前端处理：
import moment from 'moment'
// 格式化日期
moment(user.createTime).format('YYYY-MM-DD HH:mm:ss')
后端处理：
@JsonSerialize(using = ToStringSerializer.class)
private Long id;
@RestController
@RequestMapping("/api/v1/users")
public class UserControllerV1 {
// v1 版本接口
}
@RestController
@RequestMapping("/api/v2/users")
public class UserControllerV2 {
// v2 版本接口
}
通过以上方案，Spring Boot 和 Vue 可以实现高效、安全的前后端接口交互。实际开发中应根据项目需求选择合适的传参方式、安全策略和性能优化方案。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online