欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+Vue 前后端接口交互的項目實踐

 更新時間：2025年07月03日 15:20:13   作者：Leaton Lee  
Spring Boot和Vue可以實現(xiàn)高效、安全的前后端接口交互,實際開發(fā)中應根據(jù)項目需求選擇合適的傳參方式、安全策略和性能優(yōu)化方案,具有一定的感興趣的可以了解一下

一、前后端交互架構概覽

二、Spring Boot 后端接口實現(xiàn)

2.1 基礎REST控制器

@RestController
@RequestMapping("/api/users")
@CrossOrigin // 處理跨域，生產環(huán)境應配置具體域名
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);
    }

    // 創(chuàng)建用戶
    @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();
    }
}

2.2 DTO設計示例

用戶創(chuàng)建請求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;
}

2.3 全局異常處理

@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", 
                "參數(shù)驗證失敗", 
                errors);
        
        return ResponseEntity.badRequest().body(response);
    }

    // 處理業(yè)務異常
    @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);
    }
}

三、Vue 前端接口調用

3.1 Axios 封裝

// src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

// 創(chuàng)建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
    
    // 業(yè)務錯誤處理
    if (res.code && res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      
      // 特定狀態(tài)碼處理
      if (res.code === 401) {
        // 跳轉登錄
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // HTTP錯誤處理
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

3.2 API模塊化封裝

// 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'
  })
}

// 創(chuàng)建用戶
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 request({
    url: `/api/users/${id}`,
    method: 'delete'
  })
}

3.3 Vue組件中調用示例

<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, message: '請輸入用戶名', trigger: 'blur' },
          { max: 50, message: '長度不超過50個字符', trigger: 'blur' }
        ],
        // 其他驗證規(guī)則...
      }
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    // 獲取用戶列表
    async fetchUsers() {
      try {
        const { data } = await getUsers({ name: this.searchName })
        this.userList = data
      } catch (error) {
        console.error('獲取用戶列表失敗:', error)
      }
    },
    
    // 提交表單
    submitForm() {
      this.$refs.userForm.validate(async valid => {
        if (valid) {
          try {
            await createUser(this.userForm)
            this.$message.success('創(chuàng)建成功')
            this.dialogVisible = false
            this.fetchUsers() // 刷新列表
          } catch (error) {
            console.error('創(chuàng)建用戶失敗:', error)
          }
        }
      })
    }
  }
}
</script>

四、接口交互關鍵點詳解

4.1 請求參數(shù)傳遞方式

參數(shù)類型前端傳遞方式后端接收方式
URL路徑參數(shù)/users/123@PathVariable Long id
URL查詢參數(shù)/users?name=John&age=20@RequestParam String name
請求體JSON參數(shù){name:"John",age:20}@RequestBody UserDTO user
表單參數(shù)FormData對象@ModelAttribute UserForm form
請求頭參數(shù)headers: {Authorization: ...}@RequestHeader String token

4.2 跨域解決方案

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);
    }
}

4.3 文件上傳處理

后端接收：

@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 => {
  // 處理響應
})

五、接口安全增強

5.1 JWT認證實現(xiàn)

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}`
})

5.2 接口限流防護

@RestController
@RequestMapping("/api/products")
public class ProductController {
    
    @RateLimiter(value = 10, key = "'product_list'") // 10次/秒
    @GetMapping
    public List<Product> listProducts() {
        return productService.findAll();
    }
}

六、接口文檔生成

6.1 Swagger集成

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("電商系統(tǒng)API文檔")
                .description("前后端接口定義")
                .version("1.0")
                .build();
    }
}

6.2 接口注釋示例

@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) {
        // ...
    }
}

七、性能優(yōu)化建議

7.1 接口緩存策略

@Cacheable(value = "users", key = "#id")
@GetMapping("/{id}")
public UserDTO getUser(@PathVariable Long id) {
    return userService.getUserById(id);
}

7.2 分頁查詢優(yōu)化

后端實現(xiàn)：

@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
})

八、常見問題解決方案

8.1 日期時間處理

后端配置：

# 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')

8.2 大數(shù)字精度丟失

后端處理：

@JsonSerialize(using = ToStringSerializer.class)
private Long id;

8.3 接口版本管理

@RestController
@RequestMapping("/api/v1/users")
public class UserControllerV1 {
    // v1版本接口
}

@RestController
@RequestMapping("/api/v2/users")
public class UserControllerV2 {
    // v2版本接口
}

通過以上方案，Spring Boot和Vue可以實現(xiàn)高效、安全的前后端接口交互。實際開發(fā)中應根據(jù)項目需求選擇合適的傳參方式、安全策略和性能優(yōu)化方案。

到此這篇關于SpringBoot+Vue 前后端接口交互的項目實踐的文章就介紹到這了,更多相關SpringBoot Vue 前后端接口交互內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Java兩整數(shù)相除向上取整的方式詳解(Math.ceil())

    Java兩整數(shù)相除向上取整的方式詳解(Math.ceil())

    在調外部接口獲取列表數(shù)據(jù)時,需要判斷是否已經取完了所有的值,因此需要用到向上取整,下面這篇文章主要給大家介紹了關于Java兩整數(shù)相除向上取整的相關資料,需要的朋友可以參考下
    2022-06-06
  • SpringBoot接口中如何直接返回圖片數(shù)據(jù)

    SpringBoot接口中如何直接返回圖片數(shù)據(jù)

    這篇文章主要介紹了SpringBoot接口中如何直接返回圖片數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • javax.persistence中@Column定義字段類型方式

    javax.persistence中@Column定義字段類型方式

    這篇文章主要介紹了javax.persistence中@Column定義字段類型方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-11-11
  • IDEA在Maven項目中使用本地jar包的方法

    IDEA在Maven項目中使用本地jar包的方法

    我們在拿到舊項目的時候,經常會遇到一種情況,就是這個項目的maven中依賴了一個本地的jar包,這種情況就需要引入這個jar包,所以本文給大家介紹了IDEA在Maven項目中使用本地jar包的方法,需要的朋友可以參考下
    2024-04-04
  • 如何使用SpEL表達式實現(xiàn)動態(tài)分表查詢

    如何使用SpEL表達式實現(xiàn)動態(tài)分表查詢

    這篇文章主要介紹了如何使用SpEL表達式實現(xiàn)動態(tài)分表查詢,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-12-12
  • Java如何接收XML格式參數(shù)并轉換為JSON

    Java如何接收XML格式參數(shù)并轉換為JSON

    在 Java 應用程序中,處理 XML 數(shù)據(jù)并將其轉換為 JSON 格式是很常見的任務,這篇文章為大家整理了一下具體的實現(xiàn)方法,希望對大家有所幫助
    2025-03-03
  • Java受檢異常的一些思考

    Java受檢異常的一些思考

    受檢異常是否真的有必要？這是一個爭論了很久的問題，至今仍然沒有一個確定的答案。Java的受檢異常，被很多人吐槽，也被很多人喜愛，當然他們都可以拿出很多的理由來證明自己的觀點。
    2020-12-12
  • Java中RocketMQ的流量削峰詳解

    Java中RocketMQ的流量削峰詳解

    這篇文章主要介紹了Java中RocketMQ的流量削峰詳解,MQ的主要特點為解耦、異步、削峰,該文章主要記錄與分享個人在實際項目中的RocketMQ削峰用法,用于減少數(shù)據(jù)庫壓力的業(yè)務場景,需要的朋友可以參考下
    2023-09-09
  • Java數(shù)據(jù)結構貪心算法的實現(xiàn)

    Java數(shù)據(jù)結構貪心算法的實現(xiàn)

    本文主要介紹了Java數(shù)據(jù)結構貪心算法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2007-03-03
  • Spring項目XML文件使用小結

    Spring項目XML文件使用小結

    這篇文章主要介紹了Spring項目XML文件使用常見介紹,主要包括項目pom文件，項目初始IOC容器及項目需要自動裝配的代碼詳解，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
    2022-07-07

最新評論