RepeatSubmit若依框架如何防止表單重復(fù)提交注解

更新時間：2024年11月12日 09:27:57 作者：L__I__N__

若依框架中的@RepeatSubmit注解用于防止表單重復(fù)提交,通過在控制器方法上添加該注解,并在前端頁面和JavaScript代碼中實現(xiàn)雙重校驗,可以確保同一用戶在短時間內(nèi)不會重復(fù)提交相同的表單

RepeatSubmit若依框架防止表單重復(fù)提交注解

在若依（RuoYi）框架中，@RepeatSubmit 注解用于防止表單重復(fù)提交。

當(dāng)你在表單提交按鈕上添加這個注解后，若依框架會在前端和后端進行雙重校驗，以確保同一用戶在短時間內(nèi)不會重復(fù)提交相同的表單。

以下是一個簡單的示例

在控制器方法上添加 @RepeatSubmit 注解

import com.ruoyi.common.annotation.RepeatSubmit;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
?
@RestController
public class UserController {
?
    @PostMapping("/submit")
    @RepeatSubmit
    public String submitForm(@RequestBody User user) {
        // 處理表單提交邏輯
        return "success";
    }
}

在前端頁面中，為提交按鈕添加 repeat-submit 類：

<form id="form">
    <!-- 表單內(nèi)容 -->
    <button type="submit" class="btn btn-primary repeat-submit">提交</button>
</form>

在前端 JavaScript 代碼中，添加防止重復(fù)提交的邏輯：

$(document).ready(function () {
    $('#form').on('submit', function (e) {
        e.preventDefault();
        if (!this.repeatSubmit) {
            this.repeatSubmit = true;
            this.submit();
            setTimeout(() => {
                this.repeatSubmit = false;
            }, 5000); // 5 秒內(nèi)禁止重復(fù)提交
        } else {
            alert('請勿重復(fù)提交！');
        }
    });
});

在這個例子中，我們在控制器方法上添加了 @RepeatSubmit 注解，并在前端頁面和 JavaScript 代碼中添加了相應(yīng)的處理邏輯。

這樣，在用戶嘗試重復(fù)提交表單時，將會收到提示信息，并且表單不會被重復(fù)提交。

若依框架中的 @RepeatSubmit 注解可以幫助你輕松實現(xiàn)防止表單重復(fù)提交的功能，提高系統(tǒng)的穩(wěn)定性和安全性。