重复提交数据造成脏数据解决方案

1、 前端请求限制重复，vue代码如下

import axios from "~../../axios"
import {Loading, Message, MessageBox, Notification} from "~../../element-ui"
import store from "~../../../src/store"
import {getToken} from "./auth"
import errorCode from "./errorCode"
import {blobValidate, tansParams} from "./ruoyi"
import {saveAs} from "~../../file-saver"
import {getAbsolutePath} from "./index"

let downloadLoadingInstance

// 是否显示重新登录
let isReloginShow

// 请求重复提交限制 2023-11-03
const requestQueue = {
    //请求限制时间，单位毫秒；0不启用，大于0启用；一秒钟不允许重复提交
    limitTime: 1000,
    //存放请求配置队列
    queue: [
        // {
        //     createTime: Number,
        //     url: String,
        //     method: String,
        //     cancel: Function,
        //     dataMd5: String
        // }
    ],
    //请求限制时间的方法
    limitMethods: ['post', 'delete', 'put'],
    //当前请求是否可用
    canUsed(config) {
        if (isNaN(this.limitTime) || Number(this.limitTime) <= 0) return false;
        //只验证post提交数据
        if (config) {
            let method = (config.method || '').toLowerCase();
            return this.limitMethods.indexOf(method) > -1;
        }
        return true;
    },
    isSameRequest(r1, r2) {
        let same = r1.url === r2.url && r1.method === r2.method;
        if (r1.dataMd5 || r2.dataMd5) {
            same = same && r1.dataMd5 == r2.dataMd5
        }
        return same;
    },
    //获取数据的md5值，暂未实现，根据后续需要决定是否实现
    createDataMd5(data) {
        return data ? null : null;
    },
    //添加请求到队列
    addRequest(config) {
        if (!this.canUsed(config)) return;
        let _config = this.queue.some(p => this.isSameRequest(p, config));
        if (!_config) {
            let _this = this;
            config.cancelToken = new axios.CancelToken((cancel) => {
                this.queue.push({
                    url: config.url,
                    method: config.method,
                    cancel,
                    createTime: Date.now(),
                    dataMd5: _this.createDataMd5(config.data)  //根据实际情况是否支持data数据的计算md5
                })
            })
        } else {
            config.cancelToken = new axios.CancelToken((cancel) => {
                cancel('Duplicate request');
            })
        }
    },
    //删除超时请求
    removeRequestOverTime() {
        if (!this.canUsed()) return;
        const nowDate = Date.now();
        for (const q in this.queue) {
            const {createTime} = this.queue[q];
            const time = nowDate - createTime;
            if (time >= (this.limitTime)) {
                this.queue.splice(Number(q), 1);
            }
        }
    },
    //删除请求
    removeRequest(config) {
        if (!config) return;
        if (!this.canUsed(config)) return;
        for (const [index, p] of Object.entries(this.queue)) {
            if (this.isSameRequest(p, config)) {
                if (p.createTime) {
                    if ((Date.now() - p.createTime) > (this.limitTime)) {
                        this.queue.splice(Number(index), 1);
                    } else {
                        if (p.cancel) p.cancel('Duplicate request');
                    }
                } else {
                    this.queue.splice(Number(index), 1);
                }
                break;
            }

        }
    },

};


axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8"
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 120000
})

// request拦截器
service.interceptors.request.use(
    (config) => {
        // 是否需要设置 token
        const isToken = (config.headers || {}).isToken === false
        if (getToken() && !isToken) {
            config.headers["Authorization"] = "Bearer " + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        // get请求映射params参数
        if (config.method === "get" && config.params) {
            let url = config.url + "?" + tansParams(config.params)
            url = url.slice(0, -1)
            config.params = {}
            config.url = url
        }
        //2023-11-03 请求重复限制
        if (config.url) {
            requestQueue.removeRequest(config)
            requestQueue.addRequest(config);
        }
        return config
    },
    (error) => {
        console.log(error)
        Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    (res) => {
        //2023-11-03 请求重复限制
        requestQueue.removeRequest(res.config)
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200
        // 获取错误信息
        const msg = errorCode[code] || res.data.msg || errorCode["default"]
        // 二进制数据则直接返回
        if (
            res.request.responseType === "blob" ||
            res.request.responseType === "arraybuffer"
        ) {
            return res.data
        }
        if (code === 401) {
            if (!isReloginShow) {
                isReloginShow = true
                MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
                        confirmButtonText: "重新登录",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    isReloginShow = false
                    store.dispatch('LogOut').then(() => {
                        // 如果是登录页面不需要重新加载
                        if (window.location.hash.indexOf("#/login") != 0) {
                            location.href = getAbsolutePath('/index')
                        }
                    })
                }).catch(() => {
                    isReloginShow = false
                })
            }
            return Promise.reject("无效的会话，或者会话已过期，请重新登录。")
        } else if (code === 500) {
            Message({
                message: msg,
                type: "error"
            })
            return Promise.reject(new Error(msg))
        } else if (code !== 200) {
            Notification.error({
                title: msg
            })
            return Promise.reject("error")
        } else {
            return res.data
        }
    },
    (error) => {
        console.log("err" + error)
        let {message} = error
        if (message == "Network Error") {
            //message = "后端接口连接异常"
            message = "网络异常"
        } else if (message.includes("timeout")) {
            //message = "系统接口请求超时"
            requestQueue.removeRequestOverTime();
            message = "请求超时"
        } else if (message.includes("Request failed with status code")) {
            let t_port = message.substr(message.length - 3);
            if (t_port == '404') {
                message = "未找到系统资源"
            } else
                message = "系统接口" + message.substr(message.length - 3) + "异常"
        } else if (message.includes('Duplicate request')) {
            //2023-11-03
            message = "重复提交，请求太频繁"
        }

        Message({
            message: message,
            type: "error",
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)


// 通用下载方法
export function download(url, params, filename) {
    downloadLoadingInstance = Loading.service({
        text: "正在下载数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
    })
    return service
        .post(url, params, {
            transformRequest: [
                (params) => {
                    return tansParams(params)
                }
            ],
            headers: {"Content-Type": "application/x-www-form-urlencoded"},
            responseType: "blob"
        })
        .then(async (data) => {
            const isLogin = await blobValidate(data)
            if (isLogin) {
                const blob = new Blob([data])
                saveAs(blob, filename)
            } else {
                const resText = await data.text()
                const rspObj = JSON.parse(resText)
                const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
                Message.error(errMsg)
            }
            downloadLoadingInstance.close()
        })
        .catch((r) => {
            console.error(r)
            Message.error("下载文件出现错误！")
            downloadLoadingInstance.close()
        })
}


// 通用下载方法 get
export function downloadGet(url, params, filename, callback) {
    downloadLoadingInstance = Loading.service({
        text: "正在下载数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
    })

    return service.get(url, {
        // transformRequest: [(params) => {
        //   return tansParams(params)
        // }],
        params: params,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        responseType: 'blob'
    }).then((data) => {
        downloadLoadingInstance.close();
        //console.log('service.get',data);
        const isLogin = blobValidate(data);
        if (isLogin) {
            const blob = new Blob([data]);
            if (callback) {
                callback(blob);
                return;
            }
            saveAs(blob, filename)
        } else {
            const resText = data.text();
            const rspObj = JSON.parse(resText);
            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
            Message.error(errMsg);
        }
    }).catch((r) => {
        console.error(r)
        Message.error('下载文件出现错误，请联系管理员！')
        downloadLoadingInstance.close();
    })
}


export default service

2、 业务处理代码采取单例模式
3、 插入数据时使用SQL验重。