vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Java防重复提交

从前端Vue到后端Java防重复提交的全面解决方案

作者:qzw1210

这篇文章主要给大家介绍了关于从前端Vue到后端Java防重复提交的全面解决方案,通过示例讲解了包括禁用提交按钮、表单令牌、防抖与节流等前端技术,以及表单令牌验证、数据库唯一约束、事务隔离与锁机制等后端技术,需要的朋友可以参考下

一、重复提交问题概述

在Web应用开发中,表单重复提交是一个常见问题,可能导致:

本文将从前端Vue和后端Java两个层面,详细介绍防止重复提交的多种解决方案。

二、前端防重复提交(Vue.js)

1. 禁用提交按钮方案

最基本的防重复提交方法是在表单提交后禁用提交按钮,直到请求完成。

案例实现:

<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() {
  // 如果已经在提交中,直接返回
  if (isSubmitting.value) {
    return;
  }
  
  try {
    // 设置提交状态为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 {
    // 无论成功失败,都将提交状态设为false
    isSubmitting.value = false;
  }
}
</script>

优点:

缺点:

2. 提交状态与加载指示器方案

增强用户体验,添加加载指示器,让用户知道请求正在处理中。

案例实现:

<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="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>发布文章</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 = '文章发布成功!';
    submitStatus.show = true;
    
    // 重置表单
    formData.title = '';
    formData.content = '';
    
  } catch (error) {
    // 请求失败
    submitStatus.success = false;
    submitStatus.message = '发布失败:' + (error.message || '服务器错误');
    submitStatus.show = true;
  } finally {
    isSubmitting.value = false;
  }
}
</script>

优点:

缺点:

3. 表单令牌方案

使用唯一令牌标识每个表单实例,确保同一表单只能提交一次。

案例实现:

<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>

优点:

缺点:

4. 防抖与节流方案

使用防抖(debounce)或节流(throttle)技术防止用户快速多次点击提交按钮。

案例实现:

<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 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">
            点击次数: {{ 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">
            实际提交次数: {{ 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"
          >
            节流提交
          </button>
          <div class="mt-2 text-xs text-gray-500">
            实际提交次数: {{ 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"
          >
            重置计数
          </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(`普通提交被触发,搜索词: ${searchTerm.value}`);
}

// 防抖函数
function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流函数
function throttle(func, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 防抖提交处理函数
function handleDebouncedSubmit() {
  debounceSubmitCount.value++;
  addLog(`防抖提交被触发,搜索词: ${searchTerm.value}`);
}

// 节流提交处理函数
function handleThrottledSubmit() {
  throttleSubmitCount.value++;
  addLog(`节流提交被触发,搜索词: ${searchTerm.value}`);
}

// 创建防抖和节流版本的提交函数
const debouncedSubmit = debounce(handleDebouncedSubmit, 1000); // 1秒防抖
const throttledSubmit = throttle(handleThrottledSubmit, 2000); // 2秒节流

// 重置计数
function resetCounts() {
  normalClickCount.value = 0;
  debounceSubmitCount.value = 0;
  throttleSubmitCount.value = 0;
  logs.value = [];
  addLog('计数已重置');
}

// 组件卸载时清除定时器
onUnmounted(() => {
  // 这里应该清除定时器,但由于我们的防抖和节流函数是闭包形式,
  // 实际项目中应该使用更完善的实现方式,确保定时器被正确清除
});
</script>

优点:

缺点:

三、后端防重复提交(Java)

1. 表单令牌验证方案

后端验证前端提交的表单令牌,确保同一令牌只能使用一次。

案例实现:

// 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 {
            // 标记令牌为已使用(在处理业务逻辑前)
            tokenService.markTokenAsUsed(token);
            
            // 处理表单提交
            String formId = formService.processForm(request);
            
            return ResponseEntity.ok(new ApiResponse(true, "表单提交成功", formId));
            
        } catch (Exception e) {
            // 发生异常时,可以选择是否将令牌标记为未使用
            // 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);
}

// 令牌服务实现(使用内存缓存)
@Service
public class FormTokenServiceImpl implements FormTokenService {
    
    // 使用Caffeine缓存库
    private final Cache<String, Boolean> usedTokens;
    
    public FormTokenServiceImpl() {
        // 创建缓存,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
}

优点:

缺点:

2. 数据库唯一约束方案

利用数据库唯一约束防止重复数据插入。

案例实现:

// 实体类
@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);
}

// 服务实现
@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("订单号已存在");
        }
        
        // 创建订单
        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("创建订单失败,可能是重复提交", 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, "订单创建成功", 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, "创建订单失败: " + e.getMessage()));
        }
    }
}

// 异常类
public class DuplicateOrderException extends RuntimeException {
    public DuplicateOrderException(String message) {
        super(message);
    }
    
    public DuplicateOrderException(String message, Throwable cause) {
        super(message, cause);
    }
}

优点:

缺点:

3. 事务隔离与锁机制方案

使用数据库事务隔离级别和锁机制防止并发提交。

案例实现:

// 服务实现
@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);
        
        // 创建支付记录
        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()));
        }
    }
}

优点:

缺点:

4. 分布式锁方案

在分布式系统中使用分布式锁防止重复提交。

案例实现(使用Redis实现分布式锁):

// 分布式锁服务接口
public interface DistributedLockService {
    boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit);
    void unlock(String lockKey);
    boolean isLocked(String lockKey);
}

// Redis实现的分布式锁服务
@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();
    }
}

// 使用分布式锁的服务实现
@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) {
        // 创建锁键(基于用户名或邮箱)
        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("该邮箱已注册");
            }
            
            // 创建用户
            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()));
        }
    }
}

优点:

缺点:

四、前后端结合的完整解决方案

完整案例:订单提交系统

下面是一个结合前端Vue和后端Java的完整订单提交系统,综合运用多种防重复提交技术。

前端实现(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">订单提交系统</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">联系电话</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">产品选择</label>
            <select 
              id="productId" 
              v-model="orderData.productId" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            >
              <option value="">请选择产品</option>
              <option value="1">产品A - ¥100</option>
              <option value="2">产品B - ¥200</option>
              <option value="3">产品C - ¥300</option>
            </select>
          </div>
          
          <div>
            <label for="quantity" class="block text-sm font-medium mb-1">数量</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>产品价格:</span>
          <span>¥{{ productPrice }}</span>
        </div>
        <div class="flex justify-between mb-2">
          <span>数量:</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';

// 订单数据
const orderData = reactive({
  customerName: '',
  phone: '',
  productId: '',
  quantity: 1,
  address: ''
});

// 状态变量
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);
}

// 防抖函数
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 = '';
    
    // 准备提交数据
    const payload = {
      ...orderData,
      totalPrice: totalPrice.value,
      _token: orderToken.value
    };
    
    // 发送到后端
    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>

后端实现(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);
}

// 订单服务实现
@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();
            
            // 创建订单
            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) {
            // 捕获数据库唯一约束异常
            throw new DuplicateOrderException("订单创建失败,可能是重复提交", 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);
            
            // 更新订单状态
            order.setStatus("PROCESSED");
            orderRepository.save(order);
            
        } catch (Exception e) {
            // 处理异常
            order.setStatus("ERROR");
            orderRepository.save(order);
        }
    }
}

// 令牌服务实现
@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);
            
            // 创建订单
            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()));
        }
    }
}

五、最佳实践与总结

最佳实践

总结

防止表单重复提交是Web应用开发中的重要环节,需要前后端协同配合。本文详细介绍了多种防重复提交的解决方案:

通过合理选择和组合这些技术,可以有效防止表单重复提交问题,保证系统数据一致性和用户体验。在实际应用中,应根据业务场景和系统架构选择最适合的解决方案。

到此这篇关于从前端Vue到后端Java防重复提交的文章就介绍到这了,更多相关Vue Java防重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文