如何在yii2的uniapp项目中处理提交重复问题？

cesske2025-12-19 8:16

文章目录

前言
[一、前端防重复提交（UniApp 端）](#一、前端防重复提交（UniApp 端）)
[二、后端防重复提交（Yii2 端）](#二、后端防重复提交（Yii2 端）)
总结

前言

在 Yii2 的 UniApp 项目中处理提交重复问题，需结合前端和后端的双重防护机制。以下是具体方案：

一、前端防重复提交（UniApp 端）

UniApp 通过请求拦截器实现全局防重复提交：

javascript 复制代码

// 在 main.js 或 uni-app 的拦截器配置中
uni.addInterceptor('request', {
  invoke(args) {
    // 请求前禁用按钮
    uni.showLoading({ title: '提交中...' });
    args.header['Idempotency-Key'] = generateIdempotencyKey(); // 生成唯一标识
  },
  success(res) {
    // 请求成功后恢复按钮
    uni.hideLoading();
  },
  fail(err) {
    // 请求失败后恢复按钮
    uni.hideLoading();
  }
});

function generateIdempotencyKey() {
  return 'idempotency_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}

二、后端防重复提交（Yii2 端）

在 Yii2 控制器中添加幂等性校验：

php 复制代码

public function actionCreate()
{
    $key = Yii::$app->request->getHeaders()->get('Idempotency-Key');
    if ($key && Yii::$app->cache->exists($key)) {
        return $this->asJson(['error' => '重复提交']);
    }

    $model = new Campus();
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        Yii::$app->cache->set($key, true, 300); // 缓存5分钟
        return $this->redirect(['view', 'id' => $model->id]);
    } else {
        return $this->render('create', ['model' => $model]);
    }
}

总结

关键说明：

‌前端拦截器‌：通过 Idempotency-Key 头传递唯一标识，防止用户重复点击提交按钮。

‌后端幂等性校验‌：使用缓存存储 Idempotency-Key，确保同一标识在一定时间内只能处理一次。

‌用户体验‌：提交时显示加载提示，防止用户误操作。

注意事项：

Idempotency-Key 生成规则需保证唯一性，建议结合时间戳和随机数。

缓存时间（如300秒）需根据业务场景调整。

需在 UniApp 项目中安装 uni-app 的请求拦截器插件。