從前端Vue到后端Java防重復(fù)提交的全面解決方案
更新時(shí)間：2025年05月14日 10:27:37 作者：qzw1210
這篇文章主要給大家介紹了關(guān)于從前端Vue到后端Java防重復(fù)提交的全面解決方案,通過示例講解了包括禁用提交按鈕、表單令牌、防抖與節(jié)流等前端技術(shù),以及表單令牌驗(yàn)證、數(shù)據(jù)庫唯一約束、事務(wù)隔離與鎖機(jī)制等后端技術(shù),需要的朋友可以參考下
一、重復(fù)提交問題概述
在Web應(yīng)用開發(fā)中，表單重復(fù)提交是一個(gè)常見問題，可能導(dǎo)致：
- 數(shù)據(jù)庫中出現(xiàn)重復(fù)記錄
- 重復(fù)執(zhí)行業(yè)務(wù)邏輯（如多次扣款）
- 系統(tǒng)資源浪費(fèi)
- 用戶體驗(yàn)下降
本文將從前端Vue和后端Java兩個(gè)層面，詳細(xì)介紹防止重復(fù)提交的多種解決方案。
二、前端防重復(fù)提交（Vue.js）
1. 禁用提交按鈕方案
最基本的防重復(fù)提交方法是在表單提交后禁用提交按鈕，直到請(qǐng)求完成。
案例實(shí)現(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 {
// 設(shè)置提交狀態(tài)為true
isSubmitting.value = true;
message.value = '';
// 模擬API請(qǐng)求
await new Promise(resolve => setTimeout(resolve, 2000));
// 請(qǐng)求成功
success.value = true;
message.value = '表單提交成功！';
// 重置表單
formData.username = '';
formData.email = '';
} catch (error) {
// 請(qǐng)求失敗
success.value = false;
message.value = '提交失敗：' + (error.message || '未知錯(cuò)誤');
} finally {
// 無論成功失敗，都將提交狀態(tài)設(shè)為false
isSubmitting.value = false;
}
}
</script>
優(yōu)點(diǎn)：
- 實(shí)現(xiàn)簡單，適用于大多數(shù)場景
- 用戶體驗(yàn)良好，提供明確的視覺反饋
缺點(diǎn)：
- 如果用戶刷新頁面，狀態(tài)會(huì)丟失
- 不能防止用戶通過其他方式（如API工具）重復(fù)提交
2. 提交狀態(tài)與加載指示器方案
增強(qiáng)用戶體驗(yàn)，添加加載指示器，讓用戶知道請(qǐng)求正在處理中。
案例實(shí)現(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">標(biāo)題</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">內(nèi)容</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">正在提交您的文章，請(qǐng)稍候...</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請(qǐng)求
await new Promise(resolve => setTimeout(resolve, 3000));
// 請(qǐng)求成功
submitStatus.success = true;
submitStatus.message = '文章發(fā)布成功！';
submitStatus.show = true;
// 重置表單
formData.title = '';
formData.content = '';
} catch (error) {
// 請(qǐng)求失敗
submitStatus.success = false;
submitStatus.message = '發(fā)布失敗：' + (error.message || '服務(wù)器錯(cuò)誤');
submitStatus.show = true;
} finally {
isSubmitting.value = false;
}
}
</script>
優(yōu)點(diǎn)：
- 提供更豐富的視覺反饋
- 防止用戶在請(qǐng)求處理過程中進(jìn)行其他操作
缺點(diǎn)：
- 仍然不能防止用戶刷新頁面后重新提交
- 不能防止惡意用戶通過其他方式重復(fù)提交
3. 表單令牌方案
使用唯一令牌標(biāo)識(shí)每個(gè)表單實(shí)例，確保同一表單只能提交一次。
案例實(shí)現(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>檢測到此表單已提交過，請(qǐng)勿重復(fù)提交！</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);
}
// 標(biāo)記令牌為已使用
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請(qǐng)求
await new Promise(resolve => setTimeout(resolve, 2000));
// 標(biāo)記令牌為已使用
markTokenAsUsed(formToken.value);
// 請(qǐng)求成功
isSuccess.value = true;
resultMessage.value = '訂單提交成功！';
} catch (error) {
// 請(qǐng)求失敗
isSuccess.value = false;
resultMessage.value = '提交失?。? + (error.message || '服務(wù)器錯(cuò)誤');
} finally {
isSubmitting.value = false;
}
}
onMounted(() => {
// 組件掛載時(shí)生成令牌
formToken.value = generateToken();
});
</script>
優(yōu)點(diǎn)：
- 可以防止同一表單多次提交
- 即使用戶刷新頁面，也能檢測到表單已提交
缺點(diǎn)：
- 本地存儲(chǔ)的令牌可能被清除
- 需要后端配合驗(yàn)證令牌
4. 防抖與節(jié)流方案
使用防抖（debounce）或節(jié)流（throttle）技術(shù)防止用戶快速多次點(diǎn)擊提交按鈕。
案例實(shí)現(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">搜索關(guān)鍵詞</label>
<input
id="search"
v-model="searchTerm"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md"
placeholder="輸入關(guān)鍵詞..."
/>
</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">
點(diǎn)擊次數(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í)際提交次數(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í)際提交次數(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"
>
重置計(jì)數(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é)流
// 重置計(jì)數(shù)
function resetCounts() {
normalClickCount.value = 0;
debounceSubmitCount.value = 0;
throttleSubmitCount.value = 0;
logs.value = [];
addLog('計(jì)數(shù)已重置');
}
// 組件卸載時(shí)清除定時(shí)器
onUnmounted(() => {
// 這里應(yīng)該清除定時(shí)器，但由于我們的防抖和節(jié)流函數(shù)是閉包形式，
// 實(shí)際項(xiàng)目中應(yīng)該使用更完善的實(shí)現(xiàn)方式，確保定時(shí)器被正確清除
});
</script>
優(yōu)點(diǎn)：
- 有效防止用戶快速多次點(diǎn)擊
- 減輕服務(wù)器負(fù)擔(dān)
- 適用于搜索、自動(dòng)保存等場景
缺點(diǎn)：
- 不適用于所有場景，如支付等需要精確控制的操作
- 需要合理設(shè)置延遲時(shí)間
三、后端防重復(fù)提交（Java）
1. 表單令牌驗(yàn)證方案
后端驗(yàn)證前端提交的表單令牌，確保同一令牌只能使用一次。
案例實(shí)現(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) {
// 驗(yàn)證令牌是否有效
if (!tokenService.isValidToken(token)) {
return ResponseEntity
.status(HttpStatus.BAD_REQUEST)
.body(new ApiResponse(false, "無效的表單令牌"));
}
// 驗(yàn)證令牌是否已使用
if (tokenService.isTokenUsed(token)) {
return ResponseEntity
.status(HttpStatus.TOO_MANY_REQUESTS)
.body(new ApiResponse(false, "表單已提交，請(qǐng)勿重復(fù)提交"));
}
try {
// 標(biāo)記令牌為已使用（在處理業(yè)務(wù)邏輯前）
tokenService.markTokenAsUsed(token);
// 處理表單提交
String formId = formService.processForm(request);
return ResponseEntity.ok(new ApiResponse(true, "表單提交成功", formId));
} catch (Exception e) {
// 發(fā)生異常時(shí)，可以選擇是否將令牌標(biāo)記為未使用
// tokenService.invalidateToken(token);
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "表單提交失敗: " + e.getMessage()));
}
}
}
// 令牌服務(wù)接口
public interface FormTokenService {
boolean isValidToken(String token);
boolean isTokenUsed(String token);
void markTokenAsUsed(String token);
void invalidateToken(String token);
}
// 令牌服務(wù)實(shí)現(xiàn)（使用內(nèi)存緩存）
@Service
public class FormTokenServiceImpl implements FormTokenService {
// 使用Caffeine緩存庫
private final Cache<String, Boolean> usedTokens;
public FormTokenServiceImpl() {
// 創(chuàng)建緩存，24小時(shí)后過期
this.usedTokens = Caffeine.newBuilder()
.expireAfterWrite(24, TimeUnit.HOURS)
.maximumSize(10_000)
.build();
}
@Override
public boolean isValidToken(String token) {
// 簡單驗(yàn)證：非空且長度合適
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);
}
}
// 請(qǐng)求和響應(yīng)類
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)點(diǎn)：
- 可靠地防止重復(fù)提交
- 可以設(shè)置令牌過期時(shí)間
- 適用于各種表單提交場景
缺點(diǎn)：
- 需要前后端配合
- 緩存管理可能增加系統(tǒng)復(fù)雜性
2. 數(shù)據(jù)庫唯一約束方案
利用數(shù)據(jù)庫唯一約束防止重復(fù)數(shù)據(jù)插入。
案例實(shí)現(xiàn)：
// 實(shí)體類
@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);
}
// 服務(wù)實(shí)現(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) {
// 生成訂單號(hào)
String orderNumber = generateOrderNumber();
// 檢查訂單號(hào)是否已存在
if (orderRepository.existsByOrderNumber(orderNumber)) {
throw new DuplicateOrderException("訂單號(hào)已存在");
}
// 創(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)建訂單失敗，可能是重復(fù)提交", e);
}
}
private String generateOrderNumber() {
// 生成唯一訂單號(hào)的邏輯
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)點(diǎn)：
- 在數(shù)據(jù)庫層面保證數(shù)據(jù)唯一性
- 即使應(yīng)用服務(wù)器出現(xiàn)問題，也能保證數(shù)據(jù)一致性
- 適用于關(guān)鍵業(yè)務(wù)數(shù)據(jù)
缺點(diǎn)：
- 只能防止數(shù)據(jù)重復(fù)，不能防止業(yè)務(wù)邏輯重復(fù)執(zhí)行
- 可能導(dǎo)致用戶體驗(yàn)不佳（如果沒有適當(dāng)?shù)腻e(cuò)誤處理）
3. 事務(wù)隔離與鎖機(jī)制方案
使用數(shù)據(jù)庫事務(wù)隔離級(jí)別和鎖機(jī)制防止并發(fā)提交。
案例實(shí)現(xiàn)：
// 服務(wù)實(shí)現(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) {
// 檢查是否存在相同的支付請(qǐng)求
if (paymentRepository.existsByTransactionId(request.getTransactionId())) {
throw new DuplicatePaymentException("該交易已處理，請(qǐng)勿重復(fù)支付");
}
// 獲取賬戶（使用悲觀鎖）
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)點(diǎn)：
- 可以有效防止并發(fā)情況下的重復(fù)提交
- 保證數(shù)據(jù)一致性
- 適用于金融交易等高敏感度場景
缺點(diǎn)：
- 高隔離級(jí)別可能影響系統(tǒng)性能
- 鎖機(jī)制可能導(dǎo)致死鎖
- 實(shí)現(xiàn)復(fù)雜度較高
4. 分布式鎖方案
在分布式系統(tǒng)中使用分布式鎖防止重復(fù)提交。
案例實(shí)現(xiàn)（使用Redis實(shí)現(xiàn)分布式鎖）：
// 分布式鎖服務(wù)接口
public interface DistributedLockService {
boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit);
void unlock(String lockKey);
boolean isLocked(String lockKey);
}
// Redis實(shí)現(xiàn)的分布式鎖服務(wù)
@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();
}
}
// 使用分布式鎖的服務(wù)實(shí)現(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("操作正在處理中，請(qǐng)稍后再試");
}
// 檢查用戶是否已存在
if (userRepository.existsByEmail(request.getEmail())) {
throw new DuplicateUserException("該郵箱已注冊(cè)");
}
// 創(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, "用戶注冊(cè)成功", 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, "注冊(cè)失敗: " + e.getMessage()));
}
}
}
優(yōu)點(diǎn)：
- 適用于分布式系統(tǒng)環(huán)境
- 可以跨服務(wù)器防止重復(fù)提交
- 靈活的鎖定策略
缺點(diǎn)：
- 依賴外部系統(tǒng)（如Redis）
- 實(shí)現(xiàn)復(fù)雜度高
- 需要處理鎖超時(shí)和失效情況
四、前后端結(jié)合的完整解決方案
完整案例：訂單提交系統(tǒng)
下面是一個(gè)結(jié)合前端Vue和后端Java的完整訂單提交系統(tǒng)，綜合運(yùn)用多種防重復(fù)提交技術(shù)。
前端實(shí)現(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="">請(qǐng)選擇產(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)品價(jià)格:</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>總計(jì):</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>
<!-- 結(jié)果消息 -->
<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">
訂單號(hào): <span class="font-mono font-bold">{{ orderNumber }}</span>
</p>
</div>
</form>
<!-- 確認(rèn)對(duì)話框 -->
<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">確認(rèn)提交訂單</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"
>
確認(rèn)提交
</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);
// 計(jì)算屬性
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);
};
}
// 提交訂單（顯示確認(rèn)對(duì)話框）
function submitOrder() {
// 如果已提交或正在提交，直接返回
if (isSubmitting.value || isOrderSubmitted.value) {
return;
}
// 顯示確認(rèn)對(duì)話框
showConfirmDialog.value = true;
}
// 確認(rèn)提交（實(shí)際提交邏輯）
const confirmSubmit = debounce(async function() {
showConfirmDialog.value = false;
if (isSubmitting.value || isOrderSubmitted.value) {
return;
}
try {
isSubmitting.value = true;
resultMessage.value = '';
// 準(zhǔn)備提交數(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; // 訂單號(hào)
isOrderSubmitted.value = true;
// 生成新令牌（以防用戶想再次提交）
orderToken.value = generateToken();
} catch (error) {
// 提交失敗
isSuccess.value = false;
resultMessage.value = error.message;
} finally {
isSubmitting.value = false;
}
}, 300);
onMounted(() => {
// 組件掛載時(shí)生成令牌
orderToken.value = generateToken();
});
</script>
后端實(shí)現(xiàn)（Java Spring Boot）：
// 訂單實(shí)體
@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
}
// 訂單服務(wù)接口
public interface OrderService {
String createOrder(OrderRequest request);
}
// 訂單服務(wù)實(shí)現(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) {
// 驗(yàn)證令牌
String token = request.getToken();
if (tokenService.isTokenUsed(token)) {
throw new DuplicateOrderException("訂單已提交，請(qǐng)勿重復(fù)提交");
}
try {
// 標(biāo)記令牌為已使用
tokenService.markTokenAsUsed(token);
// 生成訂單號(hào)
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)建失敗，可能是重復(fù)提交", 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 {
// 模擬處理時(shí)間
Thread.sleep(5000);
// 更新訂單狀態(tài)
order.setStatus("PROCESSED");
orderRepository.save(order);
} catch (Exception e) {
// 處理異常
order.setStatus("ERROR");
orderRepository.save(order);
}
}
}
// 令牌服務(wù)實(shí)現(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) {
// 設(shè)置令牌（以防請(qǐng)求體中沒有）
request.setToken(token);
try {
// 記錄請(qǐng)求日志
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) {
// 記錄重復(fù)提交日志
logger.warn("Duplicate order submission: {}", e.getMessage());
return ResponseEntity
.status(HttpStatus.CONFLICT)
.body(new ApiResponse(false, e.getMessage()));
} catch (Exception e) {
// 記錄錯(cuò)誤日志
logger.error("Error creating order", e);
return ResponseEntity
.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body(new ApiResponse(false, "訂單提交失敗: " + e.getMessage()));
}
}
}
五、最佳實(shí)踐與總結(jié)
最佳實(shí)踐
多層防護(hù)：
前端：禁用按鈕 + 視覺反饋 + 表單令牌
后端：令牌驗(yàn)證 + 數(shù)據(jù)庫約束 + 事務(wù)隔離
分布式系統(tǒng)：分布式鎖 + 冪等性設(shè)計(jì)
前端防護(hù)：
禁用提交按鈕，防止用戶多次點(diǎn)擊
提供明確的加載狀態(tài)反饋
使用防抖/節(jié)流限制快速點(diǎn)擊
添加確認(rèn)對(duì)話框增加用戶確認(rèn)步驟
生成并使用表單令牌
后端防護(hù)：
驗(yàn)證前端提交的令牌
使用數(shù)據(jù)庫唯一約束
選擇合適的事務(wù)隔離級(jí)別
實(shí)現(xiàn)冪等性API設(shè)計(jì)
使用分布式鎖（在分布式系統(tǒng)中）
記錄詳細(xì)日志，便于問題排查
異常處理：
前端友好展示錯(cuò)誤信息
后端返回明確的錯(cuò)誤狀態(tài)碼和信息
區(qū)分不同類型的錯(cuò)誤（如重復(fù)提交、服務(wù)器錯(cuò)誤等）
性能考慮：
避免過度使用高隔離級(jí)別事務(wù)
合理設(shè)置鎖超時(shí)時(shí)間
使用異步處理長時(shí)間運(yùn)行的任務(wù)
總結(jié)
防止表單重復(fù)提交是Web應(yīng)用開發(fā)中的重要環(huán)節(jié)，需要前后端協(xié)同配合。本文詳細(xì)介紹了多種防重復(fù)提交的解決方案：
前端Vue.js解決方案：
禁用提交按鈕
提交狀態(tài)與加載指示器
表單令牌
防抖與節(jié)流
后端Java解決方案：
表單令牌驗(yàn)證
數(shù)據(jù)庫唯一約束
事務(wù)隔離與鎖機(jī)制
分布式鎖
綜合解決方案：
結(jié)合前后端多種技術(shù)
多層次防護(hù)機(jī)制
完善的異常處理
良好的用戶體驗(yàn)
通過合理選擇和組合這些技術(shù)，可以有效防止表單重復(fù)提交問題，保證系統(tǒng)數(shù)據(jù)一致性和用戶體驗(yàn)。在實(shí)際應(yīng)用中，應(yīng)根據(jù)業(yè)務(wù)場景和系統(tǒng)架構(gòu)選擇最適合的解決方案。
到此這篇關(guān)于從前端Vue到后端Java防重復(fù)提交的文章就介紹到這了,更多相關(guān)Vue Java防重復(fù)提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
v-model是Vue中的一個(gè)重要語法糖,主要用于實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它通過結(jié)合value屬性和input事件,簡化了代碼并提高了開發(fā)效率,文中通過代碼介紹的非常詳解,需要的朋友可以參考下2024-09-09
Vue動(dòng)畫事件詳解及過渡動(dòng)畫實(shí)例
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能
這篇文章主要介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能，動(dòng)態(tài)路由控制分為兩種：一種是將所有路由數(shù)據(jù)存儲(chǔ)在本地文件中，另一種則是本地只存儲(chǔ)基本路由，具體內(nèi)容詳情大家參考下此文2018-04-04
vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)
這篇文章主要介紹了vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue2.x中的provide和inject用法小結(jié)
這篇文章主要介紹了vue2.x中的provide和inject用法小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue2 配置 Axios api 接口調(diào)用文件的方法
本篇文章主要介紹了Vue2 配置 Axios api 接口調(diào)用文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue3使用拖拽組件draggable.next的保姆級(jí)教程
做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置，添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下2023-06-06