從前端Vue到后端Java防重復提交的全面解決方案
更新時間：2025年05月14日 10:27:37 作者：qzw1210
這篇文章主要給大家介紹了關于從前端Vue到后端Java防重復提交的全面解決方案,通過示例講解了包括禁用提交按鈕、表單令牌、防抖與節(jié)流等前端技術,以及表單令牌驗證、數(shù)據(jù)庫唯一約束、事務隔離與鎖機制等后端技術,需要的朋友可以參考下
一、重復提交問題概述
在Web應用開發(fā)中，表單重復提交是一個常見問題，可能導致：
- 數(shù)據(jù)庫中出現(xiàn)重復記錄
- 重復執(zhí)行業(yè)務邏輯（如多次扣款）
- 系統(tǒng)資源浪費
- 用戶體驗下降
本文將從前端Vue和后端Java兩個層面，詳細介紹防止重復提交的多種解決方案。
二、前端防重復提交（Vue.js）
1. 禁用提交按鈕方案
最基本的防重復提交方法是在表單提交后禁用提交按鈕，直到請求完成。
案例實現(xiàn)：
<template>
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">方案一：禁用提交按鈕</h2>
<form @submit.prevent="submitForm" class="space-y-4">
<div>
<label for="username" class="block text-sm font-medium mb-1">用戶名</label>
<input
id="username"
v-model="formData.username"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="email" class="block text-sm font-medium mb-1">郵箱</label>
<input
id="email"
v-model="formData.email"
type="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<button
type="submit"
class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
:disabled="isSubmitting"
>
<span v-if="isSubmitting">提交中...</span>
<span v-else>提交</span>
</button>
</div>
<div v-if="message" :class="[success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
{{ message }}
</div>
</form>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const formData = reactive({
username: '',
email: ''
});
const isSubmitting = ref(false);
const message = ref('');
const success = ref(false);
async function submitForm() {
// 如果已經(jīng)在提交中，直接返回
if (isSubmitting.value) {
return;
}
try {
// 設置提交狀態(tài)為true
isSubmitting.value = true;
message.value = '';
// 模擬API請求
await new Promise(resolve => setTimeout(resolve, 2000));
// 請求成功
success.value = true;
message.value = '表單提交成功！';
// 重置表單
formData.username = '';
formData.email = '';
} catch (error) {
// 請求失敗
success.value = false;
message.value = '提交失?。? + (error.message || '未知錯誤');
} finally {
// 無論成功失敗，都將提交狀態(tài)設為false
isSubmitting.value = false;
}
}
</script>
優(yōu)點：
- 實現(xiàn)簡單，適用于大多數(shù)場景
- 用戶體驗良好，提供明確的視覺反饋
缺點：
- 如果用戶刷新頁面，狀態(tài)會丟失
- 不能防止用戶通過其他方式（如API工具）重復提交
2. 提交狀態(tài)與加載指示器方案
增強用戶體驗，添加加載指示器，讓用戶知道請求正在處理中。
案例實現(xiàn)：
<template>
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">方案二：提交狀態(tài)與加載指示器</h2>
<form @submit.prevent="submitForm" class="space-y-4">
<div>
<label for="title" class="block text-sm font-medium mb-1">標題</label>
<input
id="title"
v-model="formData.title"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="content" class="block text-sm font-medium mb-1">內容</label>
<textarea
id="content"
v-model="formData.content"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
rows="4"
required
></textarea>
</div>
<div>
<button
type="submit"
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors relative"
:disabled="isSubmitting"
>
<span v-if="isSubmitting" class="flex items-center justify-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
處理中...
</span>
<span v-else>發(fā)布文章</span>
</button>
</div>
<div v-if="submitStatus.show" :class="[submitStatus.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
{{ submitStatus.message }}
</div>
</form>
<!-- 全屏加載遮罩 -->
<div v-if="isSubmitting" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<svg class="animate-spin h-10 w-10 text-blue-600 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<p class="text-gray-700">正在提交您的文章，請稍候...</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const formData = reactive({
title: '',
content: ''
});
const isSubmitting = ref(false);
const submitStatus = reactive({
show: false,
success: false,
message: ''
});
async function submitForm() {
if (isSubmitting.value) {
return;
}
try {
isSubmitting.value = true;
submitStatus.show = false;
// 模擬API請求
await new Promise(resolve => setTimeout(resolve, 3000));
// 請求成功
submitStatus.success = true;
submitStatus.message = '文章發(fā)布成功！';
submitStatus.show = true;
// 重置表單
formData.title = '';
formData.content = '';
} catch (error) {
// 請求失敗
submitStatus.success = false;
submitStatus.message = '發(fā)布失?。? + (error.message || '服務器錯誤');
submitStatus.show = true;
} finally {
isSubmitting.value = false;
}
}
</script>
優(yōu)點：
- 提供更豐富的視覺反饋
- 防止用戶在請求處理過程中進行其他操作
缺點：
- 仍然不能防止用戶刷新頁面后重新提交
- 不能防止惡意用戶通過其他方式重復提交
3. 表單令牌方案
使用唯一令牌標識每個表單實例，確保同一表單只能提交一次。
案例實現(xiàn)：
<template>
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">方案三：表單令牌</h2>
<form @submit.prevent="submitForm" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium mb-1">姓名</label>
<input
id="name"
v-model="formData.name"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="phone" class="block text-sm font-medium mb-1">電話</label>
<input
id="phone"
v-model="formData.phone"
type="tel"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="address" class="block text-sm font-medium mb-1">地址</label>
<input
id="address"
v-model="formData.address"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<!-- 隱藏的表單令牌 -->
<input type="hidden" name="formToken" :value="formToken" />
<div>
<button
type="submit"
class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-md transition-colors"
:disabled="isSubmitting"
>
<span v-if="isSubmitting" class="flex items-center justify-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
提交中...
</span>
<span v-else>提交訂單</span>
</button>
</div>
<div v-if="resultMessage" :class="[isSuccess ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
{{ resultMessage }}
</div>
<div v-if="isTokenUsed" class="p-3 bg-yellow-100 text-yellow-800 rounded-md">
<p>檢測到此表單已提交過，請勿重復提交！</p>
<button
@click="resetForm"
class="mt-2 px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-md"
>
重置表單
</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
const formData = reactive({
name: '',
phone: '',
address: ''
});
const isSubmitting = ref(false);
const resultMessage = ref('');
const isSuccess = ref(false);
const isTokenUsed = ref(false);
const formToken = ref('');
// 生成唯一令牌
function generateToken() {
return Date.now().toString(36) + Math.random().toString(36).substring(2);
}
// 檢查令牌是否已使用
function checkTokenUsed(token) {
const usedTokens = JSON.parse(localStorage.getItem('usedFormTokens') || '[]');
return usedTokens.includes(token);
}
// 標記令牌為已使用
function markTokenAsUsed(token) {
const usedTokens = JSON.parse(localStorage.getItem('usedFormTokens') || '[]');
usedTokens.push(token);
localStorage.setItem('usedFormTokens', JSON.stringify(usedTokens));
}
// 重置表單和令牌
function resetForm() {
formData.name = '';
formData.phone = '';
formData.address = '';
formToken.value = generateToken();
isTokenUsed.value = false;
resultMessage.value = '';
}
async function submitForm() {
// 檢查令牌是否已使用
if (checkTokenUsed(formToken.value)) {
isTokenUsed.value = true;
return;
}
if (isSubmitting.value) {
return;
}
try {
isSubmitting.value = true;
resultMessage.value = '';
// 模擬API請求
await new Promise(resolve => setTimeout(resolve, 2000));
// 標記令牌為已使用
markTokenAsUsed(formToken.value);
// 請求成功
isSuccess.value = true;
resultMessage.value = '訂單提交成功！';
} catch (error) {
// 請求失敗
isSuccess.value = false;
resultMessage.value = '提交失敗：' + (error.message || '服務器錯誤');
} finally {
isSubmitting.value = false;
}
}
onMounted(() => {
// 組件掛載時生成令牌
formToken.value = generateToken();
});
</script>
優(yōu)點：
- 可以防止同一表單多次提交
- 即使用戶刷新頁面，也能檢測到表單已提交
缺點：
- 本地存儲的令牌可能被清除
- 需要后端配合驗證令牌
4. 防抖與節(jié)流方案
使用防抖（debounce）或節(jié)流（throttle）技術防止用戶快速多次點擊提交按鈕。
案例實現(xiàn)：
<template>
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">方案四：防抖與節(jié)流</h2>
<form @submit.prevent class="space-y-4">
<div>
<label for="search" class="block text-sm font-medium mb-1">搜索關鍵詞</label>
<input
id="search"
v-model="searchTerm"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
placeholder="輸入關鍵詞..."
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<button
@click="normalSubmit"
class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors"
>
普通提交
</button>
<div class="mt-2 text-xs text-gray-500">
點擊次數(shù): {{ normalClickCount }}
</div>
</div>
<div>
<button
@click="debouncedSubmit"
class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
>
防抖提交
</button>
<div class="mt-2 text-xs text-gray-500">
實際提交次數(shù): {{ debounceSubmitCount }}
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-4">
<div>
<button
@click="throttledSubmit"
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors"
>
節(jié)流提交
</button>
<div class="mt-2 text-xs text-gray-500">
實際提交次數(shù): {{ throttleSubmitCount }}
</div>
</div>
<div>
<button
@click="resetCounts"
class="w-full py-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-md transition-colors"
>
重置計數(shù)
</button>
</div>
</div>
<div class="mt-4 p-3 bg-gray-100 rounded-md">
<h3 class="font-medium mb-2">日志:</h3>
<div class="h-40 overflow-y-auto text-sm">
<div v-for="(log, index) in logs" :key="index" class="mb-1">
{{ log }}
</div>
</div>
</div>
</form>
</div>
</template>
<script setup>
import { ref, onUnmounted } from 'vue';
const searchTerm = ref('');
const normalClickCount = ref(0);
const debounceSubmitCount = ref(0);
const throttleSubmitCount = ref(0);
const logs = ref([]);
// 添加日志
function addLog(message) {
const now = new Date();
const timeStr = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}.${now.getMilliseconds()}`;
logs.value.unshift(`[${timeStr}] ${message}`);
}
// 普通提交
function normalSubmit() {
normalClickCount.value++;
addLog(`普通提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}
// 防抖函數(shù)
function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 節(jié)流函數(shù)
function throttle(func, limit) {
let inThrottle = false;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, limit);
}
};
}
// 防抖提交處理函數(shù)
function handleDebouncedSubmit() {
debounceSubmitCount.value++;
addLog(`防抖提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}
// 節(jié)流提交處理函數(shù)
function handleThrottledSubmit() {
throttleSubmitCount.value++;
addLog(`節(jié)流提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}
// 創(chuàng)建防抖和節(jié)流版本的提交函數(shù)
const debouncedSubmit = debounce(handleDebouncedSubmit, 1000); // 1秒防抖
const throttledSubmit = throttle(handleThrottledSubmit, 2000); // 2秒節(jié)流
// 重置計數(shù)
function resetCounts() {
normalClickCount.value = 0;
debounceSubmitCount.value = 0;
throttleSubmitCount.value = 0;
logs.value = [];
addLog('計數(shù)已重置');
}
// 組件卸載時清除定時器
onUnmounted(() => {
// 這里應該清除定時器，但由于我們的防抖和節(jié)流函數(shù)是閉包形式，
// 實際項目中應該使用更完善的實現(xiàn)方式，確保定時器被正確清除
});
</script>
優(yōu)點：
- 有效防止用戶快速多次點擊
- 減輕服務器負擔
- 適用于搜索、自動保存等場景
缺點：
- 不適用于所有場景，如支付等需要精確控制的操作
- 需要合理設置延遲時間
三、后端防重復提交（Java）
1. 表單令牌驗證方案
后端驗證前端提交的表單令牌，確保同一令牌只能使用一次。
案例實現(xiàn)：
// Controller層
@RestController
@RequestMapping("/api")
public class FormController {
private final FormTokenService tokenService;
private final FormService formService;
public FormController(FormTokenService tokenService, FormService formService) {
this.tokenService = tokenService;
this.formService = formService;
}
@PostMapping("/submit")
public ResponseEntity<?> submitForm(@RequestBody FormRequest request,
@RequestHeader("X-Form-Token") String token) {
// 驗證令牌是否有效
if (!tokenService.isValidToken(token)) {
return ResponseEntity
.status(HttpStatus.BAD_REQUEST)
.body(new ApiResponse(false, "無效的表單令牌"));
}
// 驗證令牌是否已使用
if (tokenService.isTokenUsed(token)) {
return ResponseEntity
.status(HttpStatus.TOO_MANY_REQUESTS)
.body(new ApiResponse(false, "表單已提交，請勿重復提交"));
}
try {
// 標記令牌為已使用（在處理業(yè)務邏輯前）
tokenService.markTokenAsUsed(token);
// 處理表單提交
String formId = formService.processForm(request);
return ResponseEntity.ok(new ApiResponse(true, "表單提交成功", formId));
} catch (Exception e) {
// 發(fā)生異常時，可以選擇是否將令牌標記為未使用
// tokenService.invalidateToken(token);
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "表單提交失敗: " + e.getMessage()));
}
}
}
// 令牌服務接口
public interface FormTokenService {
boolean isValidToken(String token);
boolean isTokenUsed(String token);
void markTokenAsUsed(String token);
void invalidateToken(String token);
}
// 令牌服務實現(xiàn)（使用內存緩存）
@Service
public class FormTokenServiceImpl implements FormTokenService {
// 使用Caffeine緩存庫
private final Cache<String, Boolean> usedTokens;
public FormTokenServiceImpl() {
// 創(chuàng)建緩存，24小時后過期
this.usedTokens = Caffeine.newBuilder()
.expireAfterWrite(24, TimeUnit.HOURS)
.maximumSize(10_000)
.build();
}
@Override
public boolean isValidToken(String token) {
// 簡單驗證：非空且長度合適
return token != null && token.length() >= 8;
}
@Override
public boolean isTokenUsed(String token) {
return usedTokens.getIfPresent(token) != null;
}
@Override
public void markTokenAsUsed(String token) {
usedTokens.put(token, Boolean.TRUE);
}
@Override
public void invalidateToken(String token) {
usedTokens.invalidate(token);
}
}
// 請求和響應類
public class FormRequest {
private String name;
private String email;
private String content;
// getters and setters
}
public class ApiResponse {
private boolean success;
private String message;
private Object data;
public ApiResponse(boolean success, String message) {
this.success = success;
this.message = message;
}
public ApiResponse(boolean success, String message, Object data) {
this.success = success;
this.message = message;
this.data = data;
}
// getters
}
優(yōu)點：
- 可靠地防止重復提交
- 可以設置令牌過期時間
- 適用于各種表單提交場景
缺點：
- 需要前后端配合
- 緩存管理可能增加系統(tǒng)復雜性
2. 數(shù)據(jù)庫唯一約束方案
利用數(shù)據(jù)庫唯一約束防止重復數(shù)據(jù)插入。
案例實現(xiàn)：
// 實體類
@Entity
@Table(name = "orders",
uniqueConstraints = @UniqueConstraint(columnNames = {"order_number"}))
public class Order {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "order_number", unique = true, nullable = false)
private String orderNumber;
@Column(name = "customer_name")
private String customerName;
@Column(name = "amount")
private BigDecimal amount;
@Column(name = "created_at")
private LocalDateTime createdAt;
// getters and setters
}
// 倉庫接口
@Repository
public interface OrderRepository extends JpaRepository<Order, Long> {
boolean existsByOrderNumber(String orderNumber);
}
// 服務實現(xiàn)
@Service
public class OrderServiceImpl implements OrderService {
private final OrderRepository orderRepository;
public OrderServiceImpl(OrderRepository orderRepository) {
this.orderRepository = orderRepository;
}
@Override
@Transactional
public String createOrder(OrderRequest request) {
// 生成訂單號
String orderNumber = generateOrderNumber();
// 檢查訂單號是否已存在
if (orderRepository.existsByOrderNumber(orderNumber)) {
throw new DuplicateOrderException("訂單號已存在");
}
// 創(chuàng)建訂單
Order order = new Order();
order.setOrderNumber(orderNumber);
order.setCustomerName(request.getCustomerName());
order.setAmount(request.getAmount());
order.setCreatedAt(LocalDateTime.now());
try {
orderRepository.save(order);
return orderNumber;
} catch (DataIntegrityViolationException e) {
// 捕獲唯一約束違反異常
throw new DuplicateOrderException("創(chuàng)建訂單失敗，可能是重復提交", e);
}
}
private String generateOrderNumber() {
// 生成唯一訂單號的邏輯
return "ORD" + System.currentTimeMillis() +
String.format("%04d", new Random().nextInt(10000));
}
}
// 控制器
@RestController
@RequestMapping("/api/orders")
public class OrderController {
private final OrderService orderService;
public OrderController(OrderService orderService) {
this.orderService = orderService;
}
@PostMapping
public ResponseEntity<?> createOrder(@RequestBody OrderRequest request) {
try {
String orderNumber = orderService.createOrder(request);
return ResponseEntity.ok(new ApiResponse(true, "訂單創(chuàng)建成功", orderNumber));
} catch (DuplicateOrderException e) {
return ResponseEntity
.status(HttpStatus.CONFLICT)
.body(new ApiResponse(false, e.getMessage()));
} catch (Exception e) {
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "創(chuàng)建訂單失敗: " + e.getMessage()));
}
}
}
// 異常類
public class DuplicateOrderException extends RuntimeException {
public DuplicateOrderException(String message) {
super(message);
}
public DuplicateOrderException(String message, Throwable cause) {
super(message, cause);
}
}
優(yōu)點：
- 在數(shù)據(jù)庫層面保證數(shù)據(jù)唯一性
- 即使應用服務器出現(xiàn)問題，也能保證數(shù)據(jù)一致性
- 適用于關鍵業(yè)務數(shù)據(jù)
缺點：
- 只能防止數(shù)據(jù)重復，不能防止業(yè)務邏輯重復執(zhí)行
- 可能導致用戶體驗不佳（如果沒有適當?shù)腻e誤處理）
3. 事務隔離與鎖機制方案
使用數(shù)據(jù)庫事務隔離級別和鎖機制防止并發(fā)提交。
案例實現(xiàn)：
// 服務實現(xiàn)
@Service
public class PaymentServiceImpl implements PaymentService {
private final PaymentRepository paymentRepository;
private final AccountRepository accountRepository;
public PaymentServiceImpl(PaymentRepository paymentRepository,
AccountRepository accountRepository) {
this.paymentRepository = paymentRepository;
this.accountRepository = accountRepository;
}
@Override
@Transactional(isolation = Isolation.SERIALIZABLE)
public String processPayment(PaymentRequest request) {
// 檢查是否存在相同的支付請求
if (paymentRepository.existsByTransactionId(request.getTransactionId())) {
throw new DuplicatePaymentException("該交易已處理，請勿重復支付");
}
// 獲取賬戶（使用悲觀鎖）
Account account = accountRepository.findByIdWithLock(request.getAccountId())
.orElseThrow(() -> new AccountNotFoundException("賬戶不存在"));
// 檢查余額
if (account.getBalance().compareTo(request.getAmount()) < 0) {
throw new InsufficientBalanceException("賬戶余額不足");
}
// 扣減余額
account.setBalance(account.getBalance().subtract(request.getAmount()));
accountRepository.save(account);
// 創(chuàng)建支付記錄
Payment payment = new Payment();
payment.setTransactionId(request.getTransactionId());
payment.setAccountId(request.getAccountId());
payment.setAmount(request.getAmount());
payment.setStatus("SUCCESS");
payment.setCreatedAt(LocalDateTime.now());
paymentRepository.save(payment);
return payment.getTransactionId();
}
}
// 倉庫接口
@Repository
public interface AccountRepository extends JpaRepository<Account, Long> {
// 使用悲觀鎖查詢賬戶
@Lock(LockModeType.PESSIMISTIC_WRITE)
@Query("SELECT a FROM Account a WHERE a.id = :id")
Optional<Account> findByIdWithLock(@Param("id") Long id);
}
@Repository
public interface PaymentRepository extends JpaRepository<Payment, Long> {
boolean existsByTransactionId(String transactionId);
}
// 控制器
@RestController
@RequestMapping("/api/payments")
public class PaymentController {
private final PaymentService paymentService;
public PaymentController(PaymentService paymentService) {
this.paymentService = paymentService;
}
@PostMapping
public ResponseEntity<?> processPayment(@RequestBody PaymentRequest request) {
try {
String transactionId = paymentService.processPayment(request);
return ResponseEntity.ok(new ApiResponse(true, "支付成功", transactionId));
} catch (DuplicatePaymentException e) {
return ResponseEntity
.status(HttpStatus.CONFLICT)
.body(new ApiResponse(false, e.getMessage()));
} catch (Exception e) {
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "支付處理失敗: " + e.getMessage()));
}
}
}
優(yōu)點：
- 可以有效防止并發(fā)情況下的重復提交
- 保證數(shù)據(jù)一致性
- 適用于金融交易等高敏感度場景
缺點：
- 高隔離級別可能影響系統(tǒng)性能
- 鎖機制可能導致死鎖
- 實現(xiàn)復雜度較高
4. 分布式鎖方案
在分布式系統(tǒng)中使用分布式鎖防止重復提交。
案例實現(xiàn)（使用Redis實現(xiàn)分布式鎖）：
// 分布式鎖服務接口
public interface DistributedLockService {
boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit);
void unlock(String lockKey);
boolean isLocked(String lockKey);
}
// Redis實現(xiàn)的分布式鎖服務
@Service
public class RedisDistributedLockService implements DistributedLockService {
private final RedissonClient redissonClient;
public RedisDistributedLockService(RedissonClient redissonClient) {
this.redissonClient = redissonClient;
}
@Override
public boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit) {
RLock lock = redissonClient.getLock(lockKey);
try {
return lock.tryLock(waitTime, leaseTime, unit);
} catch (InterruptedException e) {
Thread.currentThread().interrupt();
return false;
}
}
@Override
public void unlock(String lockKey) {
RLock lock = redissonClient.getLock(lockKey);
if (lock.isHeldByCurrentThread()) {
lock.unlock();
}
}
@Override
public boolean isLocked(String lockKey) {
RLock lock = redissonClient.getLock(lockKey);
return lock.isLocked();
}
}
// 使用分布式鎖的服務實現(xiàn)
@Service
public class RegistrationServiceImpl implements RegistrationService {
private final DistributedLockService lockService;
private final UserRepository userRepository;
public RegistrationServiceImpl(DistributedLockService lockService,
UserRepository userRepository) {
this.lockService = lockService;
this.userRepository = userRepository;
}
@Override
public String registerUser(UserRegistrationRequest request) {
// 創(chuàng)建鎖鍵（基于用戶名或郵箱）
String lockKey = "user_registration:" + request.getEmail();
boolean locked = false;
try {
// 嘗試獲取鎖，等待5秒，鎖定30秒
locked = lockService.tryLock(lockKey, 5, 30, TimeUnit.SECONDS);
if (!locked) {
throw new ConcurrentOperationException("操作正在處理中，請稍后再試");
}
// 檢查用戶是否已存在
if (userRepository.existsByEmail(request.getEmail())) {
throw new DuplicateUserException("該郵箱已注冊");
}
// 創(chuàng)建用戶
User user = new User();
user.setUsername(request.getUsername());
user.setEmail(request.getEmail());
user.setPassword(encryptPassword(request.getPassword()));
user.setCreatedAt(LocalDateTime.now());
userRepository.save(user);
return user.getId().toString();
} finally {
// 釋放鎖
if (locked) {
lockService.unlock(lockKey);
}
}
}
private String encryptPassword(String password) {
// 密碼加密邏輯
return BCrypt.hashpw(password, BCrypt.gensalt());
}
}
// 控制器
@RestController
@RequestMapping("/api/users")
public class UserController {
private final RegistrationService registrationService;
public UserController(RegistrationService registrationService) {
this.registrationService = registrationService;
}
@PostMapping("/register")
public ResponseEntity<?> registerUser(@RequestBody UserRegistrationRequest request) {
try {
String userId = registrationService.registerUser(request);
return ResponseEntity.ok(new ApiResponse(true, "用戶注冊成功", userId));
} catch (DuplicateUserException e) {
return ResponseEntity
.status(HttpStatus.CONFLICT)
.body(new ApiResponse(false, e.getMessage()));
} catch (ConcurrentOperationException e) {
return ResponseEntity
.status(HttpStatus.TOO_MANY_REQUESTS)
.body(new ApiResponse(false, e.getMessage()));
} catch (Exception e) {
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "注冊失敗: " + e.getMessage()));
}
}
}
優(yōu)點：
- 適用于分布式系統(tǒng)環(huán)境
- 可以跨服務器防止重復提交
- 靈活的鎖定策略
缺點：
- 依賴外部系統(tǒng)（如Redis）
- 實現(xiàn)復雜度高
- 需要處理鎖超時和失效情況
四、前后端結合的完整解決方案
完整案例：訂單提交系統(tǒng)
下面是一個結合前端Vue和后端Java的完整訂單提交系統(tǒng)，綜合運用多種防重復提交技術。
前端實現(xiàn)（Vue.js）：
<template>
<div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
<h1 class="text-2xl font-bold mb-6 text-gray-800">訂單提交系統(tǒng)</h1>
<form @submit.prevent="submitOrder" class="space-y-6">
<!-- 客戶信息 -->
<div class="bg-gray-50 p-4 rounded-md">
<h2 class="text-lg font-medium mb-3">客戶信息</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="customerName" class="block text-sm font-medium mb-1">客戶姓名</label>
<input
id="customerName"
v-model="orderData.customerName"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="phone" class="block text-sm font-medium mb-1">聯(lián)系電話</label>
<input
id="phone"
v-model="orderData.phone"
type="tel"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
</div>
</div>
<!-- 訂單信息 -->
<div class="bg-gray-50 p-4 rounded-md">
<h2 class="text-lg font-medium mb-3">訂單信息</h2>
<div class="space-y-4">
<div>
<label for="productId" class="block text-sm font-medium mb-1">產(chǎn)品選擇</label>
<select
id="productId"
v-model="orderData.productId"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
>
<option value="">請選擇產(chǎn)品</option>
<option value="1">產(chǎn)品A - ￥100</option>
<option value="2">產(chǎn)品B - ￥200</option>
<option value="3">產(chǎn)品C - ￥300</option>
</select>
</div>
<div>
<label for="quantity" class="block text-sm font-medium mb-1">數(shù)量</label>
<input
id="quantity"
v-model.number="orderData.quantity"
type="number"
min="1"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
required
/>
</div>
<div>
<label for="address" class="block text-sm font-medium mb-1">收貨地址</label>
<textarea
id="address"
v-model="orderData.address"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
rows="2"
required
></textarea>
</div>
</div>
</div>
<!-- 訂單摘要 -->
<div class="bg-gray-50 p-4 rounded-md">
<h2 class="text-lg font-medium mb-3">訂單摘要</h2>
<div class="flex justify-between mb-2">
<span>產(chǎn)品價格:</span>
<span>￥{{ productPrice }}</span>
</div>
<div class="flex justify-between mb-2">
<span>數(shù)量:</span>
<span>{{ orderData.quantity || 0 }}</span>
</div>
<div class="flex justify-between font-bold">
<span>總計:</span>
<span>￥{{ totalPrice }}</span>
</div>
</div>
<!-- 隱藏的表單令牌 -->
<input type="hidden" name="orderToken" :value="orderToken" />
<!-- 提交按鈕 -->
<div>
<button
type="submit"
class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
:disabled="isSubmitting || isOrderSubmitted"
>
<span v-if="isSubmitting" class="flex items-center justify-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
訂單提交中...
</span>
<span v-else-if="isOrderSubmitted">訂單已提交</span>
<span v-else>提交訂單</span>
</button>
</div>
<!-- 結果消息 -->
<div v-if="resultMessage" :class="[isSuccess ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-4 rounded-md']">
<p class="font-medium">{{ resultMessage }}</p>
<p v-if="orderNumber" class="mt-2">
訂單號: <span class="font-mono font-bold">{{ orderNumber }}</span>
</p>
</div>
</form>
<!-- 確認對話框 -->
<div v-if="showConfirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
<h3 class="text-xl font-bold mb-4">確認提交訂單</h3>
<p class="mb-4">您確定要提交此訂單嗎？提交后將無法修改。</p>
<div class="flex justify-end space-x-4">
<button
@click="showConfirmDialog = false"
class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md"
>
取消
</button>
<button
@click="confirmSubmit"
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md"
>
確認提交
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
// 訂單數(shù)據(jù)
const orderData = reactive({
customerName: '',
phone: '',
productId: '',
quantity: 1,
address: ''
});
// 狀態(tài)變量
const isSubmitting = ref(false);
const isOrderSubmitted = ref(false);
const resultMessage = ref('');
const isSuccess = ref(false);
const orderNumber = ref('');
const orderToken = ref('');
const showConfirmDialog = ref(false);
// 計算屬性
const productPrice = computed(() => {
switch (orderData.productId) {
case '1': return 100;
case '2': return 200;
case '3': return 300;
default: return 0;
}
});
const totalPrice = computed(() => {
return productPrice.value * (orderData.quantity || 0);
});
// 生成唯一令牌
function generateToken() {
return Date.now().toString(36) + Math.random().toString(36).substring(2);
}
// 防抖函數(shù)
function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 提交訂單（顯示確認對話框）
function submitOrder() {
// 如果已提交或正在提交，直接返回
if (isSubmitting.value || isOrderSubmitted.value) {
return;
}
// 顯示確認對話框
showConfirmDialog.value = true;
}
// 確認提交（實際提交邏輯）
const confirmSubmit = debounce(async function() {
showConfirmDialog.value = false;
if (isSubmitting.value || isOrderSubmitted.value) {
return;
}
try {
isSubmitting.value = true;
resultMessage.value = '';
// 準備提交數(shù)據(jù)
const payload = {
...orderData,
totalPrice: totalPrice.value,
_token: orderToken.value
};
// 發(fā)送到后端
const response = await fetch('/api/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Order-Token': orderToken.value
},
body: JSON.stringify(payload)
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || '訂單提交失敗');
}
// 提交成功
isSuccess.value = true;
resultMessage.value = '訂單提交成功！';
orderNumber.value = data.data; // 訂單號
isOrderSubmitted.value = true;
// 生成新令牌（以防用戶想再次提交）
orderToken.value = generateToken();
} catch (error) {
// 提交失敗
isSuccess.value = false;
resultMessage.value = error.message;
} finally {
isSubmitting.value = false;
}
}, 300);
onMounted(() => {
// 組件掛載時生成令牌
orderToken.value = generateToken();
});
</script>
后端實現(xiàn)（Java Spring Boot）：
// 訂單實體
@Entity
@Table(name = "orders",
uniqueConstraints = @UniqueConstraint(columnNames = {"order_number"}))
public class Order {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "order_number", unique = true, nullable = false)
private String orderNumber;
@Column(name = "customer_name")
private String customerName;
@Column(name = "phone")
private String phone;
@Column(name = "product_id")
private Long productId;
@Column(name = "quantity")
private Integer quantity;
@Column(name = "address")
private String address;
@Column(name = "total_price")
private BigDecimal totalPrice;
@Column(name = "status")
private String status;
@Column(name = "created_at")
private LocalDateTime createdAt;
// getters and setters
}
// 訂單服務接口
public interface OrderService {
String createOrder(OrderRequest request);
}
// 訂單服務實現(xiàn)
@Service
@Transactional
public class OrderServiceImpl implements OrderService {
private final OrderRepository orderRepository;
private final OrderTokenService tokenService;
public OrderServiceImpl(OrderRepository orderRepository,
OrderTokenService tokenService) {
this.orderRepository = orderRepository;
this.tokenService = tokenService;
}
@Override
@Transactional(isolation = Isolation.SERIALIZABLE)
public String createOrder(OrderRequest request) {
// 驗證令牌
String token = request.getToken();
if (tokenService.isTokenUsed(token)) {
throw new DuplicateOrderException("訂單已提交，請勿重復提交");
}
try {
// 標記令牌為已使用
tokenService.markTokenAsUsed(token);
// 生成訂單號
String orderNumber = generateOrderNumber();
// 創(chuàng)建訂單
Order order = new Order();
order.setOrderNumber(orderNumber);
order.setCustomerName(request.getCustomerName());
order.setPhone(request.getPhone());
order.setProductId(request.getProductId());
order.setQuantity(request.getQuantity());
order.setAddress(request.getAddress());
order.setTotalPrice(request.getTotalPrice());
order.setStatus("PENDING");
order.setCreatedAt(LocalDateTime.now());
orderRepository.save(order);
// 異步處理訂單（示例）
processOrderAsync(order);
return orderNumber;
} catch (DataIntegrityViolationException e) {
// 捕獲數(shù)據(jù)庫唯一約束異常
throw new DuplicateOrderException("訂單創(chuàng)建失敗，可能是重復提交", e);
}
}
private String generateOrderNumber() {
return "ORD" + LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMddHHmmss")) +
String.format("%04d", new Random().nextInt(10000));
}
@Async
public void processOrderAsync(Order order) {
// 異步處理訂單的邏輯
try {
// 模擬處理時間
Thread.sleep(5000);
// 更新訂單狀態(tài)
order.setStatus("PROCESSED");
orderRepository.save(order);
} catch (Exception e) {
// 處理異常
order.setStatus("ERROR");
orderRepository.save(order);
}
}
}
// 令牌服務實現(xiàn)
@Service
public class OrderTokenServiceImpl implements OrderTokenService {
private final RedisTemplate<String, Boolean> redisTemplate;
public OrderTokenServiceImpl(RedisTemplate<String, Boolean> redisTemplate) {
this.redisTemplate = redisTemplate;
}
@Override
public boolean isTokenUsed(String token) {
Boolean used = redisTemplate.opsForValue().get("order_token:" + token);
return used != null && used;
}
@Override
public void markTokenAsUsed(String token) {
redisTemplate.opsForValue().set("order_token:" + token, true, 24, TimeUnit.HOURS);
}
@Override
public void invalidateToken(String token) {
redisTemplate.delete("order_token:" + token);
}
}
// 控制器
@RestController
@RequestMapping("/api/orders")
public class OrderController {
private final OrderService orderService;
private static final Logger logger = LoggerFactory.getLogger(OrderController.class);
public OrderController(OrderService orderService) {
this.orderService = orderService;
}
@PostMapping
public ResponseEntity<?> createOrder(@RequestBody OrderRequest request,
@RequestHeader("X-Order-Token") String token) {
// 設置令牌（以防請求體中沒有）
request.setToken(token);
try {
// 記錄請求日志
logger.info("Received order request with token: {}", token);
// 創(chuàng)建訂單
String orderNumber = orderService.createOrder(request);
// 記錄成功日志
logger.info("Order created successfully: {}", orderNumber);
return ResponseEntity.ok(new ApiResponse(true, "訂單提交成功", orderNumber));
} catch (DuplicateOrderException e) {
// 記錄重復提交日志
logger.warn("Duplicate order submission: {}", e.getMessage());
return ResponseEntity
.status(HttpStatus.CONFLICT)
.body(new ApiResponse(false, e.getMessage()));
} catch (Exception e) {
// 記錄錯誤日志
logger.error("Error creating order", e);
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "訂單提交失敗: " + e.getMessage()));
}
}
}
五、最佳實踐與總結
最佳實踐
多層防護：
前端：禁用按鈕 + 視覺反饋 + 表單令牌
后端：令牌驗證 + 數(shù)據(jù)庫約束 + 事務隔離
分布式系統(tǒng)：分布式鎖 + 冪等性設計
前端防護：
禁用提交按鈕，防止用戶多次點擊
提供明確的加載狀態(tài)反饋
使用防抖/節(jié)流限制快速點擊
添加確認對話框增加用戶確認步驟
生成并使用表單令牌
后端防護：
驗證前端提交的令牌
使用數(shù)據(jù)庫唯一約束
選擇合適的事務隔離級別
實現(xiàn)冪等性API設計
使用分布式鎖（在分布式系統(tǒng)中）
記錄詳細日志，便于問題排查
異常處理：
前端友好展示錯誤信息
后端返回明確的錯誤狀態(tài)碼和信息
區(qū)分不同類型的錯誤（如重復提交、服務器錯誤等）
性能考慮：
避免過度使用高隔離級別事務
合理設置鎖超時時間
使用異步處理長時間運行的任務
總結
防止表單重復提交是Web應用開發(fā)中的重要環(huán)節(jié)，需要前后端協(xié)同配合。本文詳細介紹了多種防重復提交的解決方案：
前端Vue.js解決方案：
禁用提交按鈕
提交狀態(tài)與加載指示器
表單令牌
防抖與節(jié)流
后端Java解決方案：
表單令牌驗證
數(shù)據(jù)庫唯一約束
事務隔離與鎖機制
分布式鎖
綜合解決方案：
結合前后端多種技術
多層次防護機制
完善的異常處理
良好的用戶體驗
通過合理選擇和組合這些技術，可以有效防止表單重復提交問題，保證系統(tǒng)數(shù)據(jù)一致性和用戶體驗。在實際應用中，應根據(jù)業(yè)務場景和系統(tǒng)架構選擇最適合的解決方案。
到此這篇關于從前端Vue到后端Java防重復提交的文章就介紹到這了,更多相關Vue Java防重復提交內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
v-model是Vue中的一個重要語法糖,主要用于實現(xiàn)數(shù)據(jù)的雙向綁定,它通過結合value屬性和input事件,簡化了代碼并提高了開發(fā)效率,文中通過代碼介紹的非常詳解,需要的朋友可以參考下2024-09-09
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時自動應用過渡效果。Vue.js 會在適當?shù)臅r機為你觸發(fā) CSS 過渡或動畫，你也可以提供相應的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
vue iview實現(xiàn)動態(tài)路由和權限驗證功能
這篇文章主要介紹了vue iview實現(xiàn)動態(tài)路由和權限驗證功能，動態(tài)路由控制分為兩種：一種是將所有路由數(shù)據(jù)存儲在本地文件中，另一種則是本地只存儲基本路由，具體內容詳情大家參考下此文2018-04-04
vue踩坑記-在項目中安裝依賴模塊npm install報錯
這篇文章主要介紹了vue踩坑記-在項目中安裝依賴模塊npm install報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue2.x中的provide和inject用法小結,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
本篇文章主要介紹了Vue2 配置 Axios api 接口調用文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要給大家介紹了關于如何在Vue中使用Echarts實例圖的相關資料，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理
這篇文章主要為大家詳細介紹了Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue3使用拖拽組件draggable.next的保姆級教程
做項目的時候遇到了一個需求,拖拽按鈕到指定位置，添加一個輸入框,這篇文章主要給大家介紹了關于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下2023-06-06