Django添加切换按钮：博客文章is_draft与is_published字段互斥切换实现

嘿，这个需求其实挺常见的——核心就是要确保is_draft和is_published这两个字段始终最多只有一个为true，我从后端逻辑、前端交互和额外保障三个部分给你拆解，这样前后端配合起来就能完美实现切换功能啦：

后端是保证状态正确的核心，不管前端传什么，我们都要在数据更新时强制维护互斥规则：

1. 接口逻辑实现 #

针对切换操作，你可以写两个专用接口，或者一个通用的切换接口，这里用两种方案举例：

方案1：拆分两个专用接口

• 发布接口（比如POST /articles/{id}/publish）：
  当用户点击“发布”时，后端直接将该文章的is_published设为true，同时强制把is_draft设为false，伪代码大概是这样：

  def publish_article(request, article_id):
      article = Article.objects.get(id=article_id)
      article.is_published = True
      article.is_draft = False
      article.save()
      return Response(status=200)
  

• 转草稿接口（比如POST /articles/{id}/to-draft）：
  当用户点击“转为草稿”时，后端将is_draft设为true，同时把is_published设为false：

  def to_draft_article(request, article_id):
      article = Article.objects.get(id=article_id)
      article.is_draft = True
      article.is_published = False
      article.save()
      return Response(status=200)
  

方案2：通用切换接口

如果想更灵活，可以写一个接口接收目标状态（比如draft或published），然后根据目标状态设置字段：

def toggle_status(request, article_id):
    target_status = request.data.get('status')
    article = Article.objects.get(id=article_id)
    if target_status == 'published':
        article.is_published = True
        article.is_draft = False
    elif target_status == 'draft':
        article.is_draft = True
        article.is_published = False
    else:
        return Response(status=400, data={"error": "无效状态"})
    article.save()
    return Response(status=200)

2. 数据库层面的额外约束 #

为了防止后端逻辑出错或者直接操作数据库导致状态混乱，建议给数据库加一个检查约束，从底层保证互斥：

• 如果允许两个字段都为false（比如刚创建还没保存为草稿或发布的状态）：

  ALTER TABLE articles ADD CONSTRAINT check_draft_published CHECK (is_draft = NOT is_published OR (is_draft = false AND is_published = false));
  

• 如果要求必须有一个为true（即文章只能是草稿或已发布状态）：

  ALTER TABLE articles ADD CONSTRAINT check_draft_published CHECK (is_draft = NOT is_published);
  

前端要做的就是根据文章当前的状态，显示对应的切换按钮，同时处理点击后的接口调用：

这里举个原生JS的简单示例：

<div id="article-status-container">
  <!-- 按钮会根据当前状态动态显示 -->
</div>

<script>
// 假设从后端获取的文章数据
const article = {
  id: 123,
  is_draft: true,
  is_published: false
};

const container = document.getElementById('article-status-container');

// 渲染按钮
function renderToggleButton() {
  container.innerHTML = '';
  if (article.is_draft) {
    const publishBtn = document.createElement('button');
    publishBtn.textContent = '发布文章';
    publishBtn.addEventListener('click', async () => {
      // 调用发布接口
      const response = await fetch(`/articles/${article.id}/publish`, { method: 'POST' });
      if (response.ok) {
        // 更新本地状态
        article.is_draft = false;
        article.is_published = true;
        renderToggleButton(); // 重新渲染按钮
      }
    });
    container.appendChild(publishBtn);
  } else if (article.is_published) {
    const draftBtn = document.createElement('button');
    draftBtn.textContent = '转为草稿';
    draftBtn.addEventListener('click', async () => {
      // 调用转草稿接口
      const response = await fetch(`/articles/${article.id}/to-draft`, { method: 'POST' });
      if (response.ok) {
        // 更新本地状态
        article.is_draft = true;
        article.is_published = false;
        renderToggleButton(); // 重新渲染按钮
      }
    });
    container.appendChild(draftBtn);
  } else {
    // 如果两个状态都为false，可根据业务需求添加默认按钮，比如“保存为草稿”
    const saveDraftBtn = document.createElement('button');
    saveDraftBtn.textContent = '保存为草稿';
    saveDraftBtn.addEventListener('click', async () => {
      // 调用保存为草稿接口
      const response = await fetch(`/articles/${article.id}/save-draft`, { method: 'POST' });
      if (response.ok) {
        article.is_draft = true;
        renderToggleButton();
      }
    });
    container.appendChild(saveDraftBtn);
  }
}

// 初始化渲染
renderToggleButton();
</script>

如果用React、Vue等框架，逻辑也是类似的：根据状态判断渲染哪个按钮，点击后调用接口并更新组件状态。

• 按钮加loading状态：在接口请求过程中，把按钮设为禁用状态并显示“加载中”，避免用户重复点击导致状态混乱。
• 并发处理：如果有多人同时编辑同一篇文章，建议加乐观锁（比如给文章加version字段，更新时校验版本号），防止并发修改导致状态不一致。
• 幂等性：确保接口是幂等的，比如多次调用发布接口不会导致状态反复切换。

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