Django+Vue邮件订阅模块禁止重复邮箱注册实现咨询

1. 数据库层加唯一约束（根本防重） #

首先修改models.py里的Subscriber模型，给email字段加唯一索引，从数据库层面杜绝重复数据写入：

from django.db import models

class Subscriber(models.Model):
    # 加unique=True约束，不允许重复邮箱
    email = models.EmailField(max_length=255, unique=True)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return '%s' % self.email

改完模型后在项目目录执行两条命令生成并应用数据库迁移：

python manage.py makemigrations
python manage.py migrate

2. 编写后端接口逻辑 #

你的views.py目前是空的，直接写入订阅接口逻辑，校验邮箱是否已存在，返回对应状态码和提示信息：

from django.http import JsonResponse
from .models import Subscriber
import json

def add_subscriber(request):
    if request.method != "POST":
        return JsonResponse({"error": "Method not allowed"}, status=405)
    
    # 解析前端传的JSON数据
    data = json.loads(request.body)
    email = data.get("email", "").strip()
    
    # 校验邮箱是否已存在（不区分大小写）
    if Subscriber.objects.filter(email__iexact=email).exists():
        # 邮箱重复返回400状态和指定提示
        return JsonResponse({"error": "email is already in use"}, status=400)
    
    # 邮箱不存在则创建订阅记录
    Subscriber.objects.create(email=email)
    return JsonResponse({"success": True}, status=200)

写完视图后记得配置路由，在对应app的urls.py里添加路由规则（如果没有该文件就新建）：

from django.urls import path
from . import views

urlpatterns = [
    path('api/add_subscriber/', views.add_subscriber, name='add_subscriber'),
]

再确认项目根目录的urls.py已经include了这个app的路由配置，否则接口无法访问。

3. 修改前端模板的交互逻辑 #

原来的前端代码没有错误提示位，也没有处理接口返回的异常状态，按下面修改：
首先在表单的提示区加错误提示块，放在原有成功提示的上方即可：

<!-- 新增错误提示块 -->
<div class="alert alert-danger" role="alert" v-if="showError">
    {{ errorMsg }}
</div>
<!-- 原有成功提示保留 -->
<div class="alert alert-success" role="alert" v-if="showSuccess">
    You are Subscribed to our Newsletter!
</div>

然后修改Vue实例的代码，补充错误状态和响应处理逻辑，同时修复原代码catch块内this指向错误的问题：

var newsletterapp = new Vue({
    el: '#newsletter-wrapper',
    data () {
        return {
            email: '',
            showSuccess: false,
            // 新增错误提示相关状态
            showError: false,
            errorMsg: ''
        }
    },
    methods: {
        onSubmit() {
            // 提交前先清空所有旧提示
            this.showSuccess = false
            this.showError = false

            fetch('/api/add_subscriber/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({'email': this.email})
                })
                .then(async (response) => {
                    const data = await response.json()
                    if (!response.ok) {
                        // 接口返回错误状态，抛出错误给后续catch处理
                        return Promise.reject(data)
                    }
                    return data
                })
                .then((data) => {
                    console.log(data)
                    this.showSuccess = true
                    this.email = ''
                })
                .catch((error) => {
                    // 箭头函数保证this指向Vue实例，显示错误提示
                    this.showSuccess = false
                    this.showError = true
                    this.errorMsg = error.error || 'Subscription failed, please try again later'
                    console.log('Error:', error);
                });
        }
    }
})

改完重启Django服务即可，重复提交邮箱时就会显示红色的email is already in use提示，新邮箱提交才会显示订阅成功。

内容的提问来源于stack exchange，提问作者tobias