在Django项目中为教程页面添加「标记为已读」功能的实现方案咨询

嘿，我看了你当前的Django模型，要实现用户专属的「标记为已读」功能，得先明确核心问题：你blog模型里的completed字段是全局状态（所有用户看到的是同一个值），但咱们要的是每个用户能标记自己的已读状态，所以得从模型、视图、模板这几块一步步调整，具体思路如下：

1. 调整数据库模型：记录用户-博客的关联状态 #

因为一个用户可以标记多篇博客，一篇博客可以被多个用户标记，所以需要新增一个模型来存储这种关联（或者用简化的多对多字段，看你后续是否需要扩展）：

方案A：灵活的中间模型（推荐，方便后续扩展） #

如果以后需要记录标记时间、备注这类额外信息，用这个方案：

from django.contrib.auth.models import User

class BlogReadStatus(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    blog = models.ForeignKey(blog, on_delete=models.CASCADE)
    is_read = models.BooleanField(default=False)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        # 强制一个用户对一篇博客只能有一条记录
        unique_together = ('user', 'blog')
    
    def __str__(self):
        return f"{self.user.username} - {self.blog.blog_title} ({'已读' if self.is_read else '未读'})"

方案B：简化的多对多字段 #

如果只是单纯记录已读状态，不需要额外信息，直接在blog模型里加字段更省事：

class blog(models.Model):
    # 保留你原来的所有字段...
    read_by = models.ManyToManyField(User, related_name='read_blogs', blank=True)

2. 编写视图逻辑：处理状态切换与数据传递 #

需要两个核心视图：一个是切换已读状态的接口，另一个是在列表/详情页给模板传递当前用户的已读状态。

2.1 切换已读状态的视图（AJAX接口） #

用POST请求实现无刷新切换，还要确保只有登录用户能操作：

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from .models import blog, BlogReadStatus

@login_required
@require_POST
def toggle_blog_read_status(request, blog_id):
    try:
        blog_obj = blog.objects.get(id=blog_id)
        # 获取或创建当前用户的这条已读记录
        status_obj, created = BlogReadStatus.objects.get_or_create(
            user=request.user,
            blog=blog_obj
        )
        # 切换状态
        status_obj.is_read = not status_obj.is_read
        status_obj.save()
        return JsonResponse({
            'success': True,
            'is_read': status_obj.is_read,
            'message': '状态更新成功'
        })
    except blog.DoesNotExist:
        return JsonResponse({'success': False, 'message': '博客不存在'}, status=404)

如果用方案B的多对多字段，视图可以简化成这样：

@login_required
@require_POST
def toggle_blog_read_status(request, blog_id):
    try:
        blog_obj = blog.objects.get(id=blog_id)
        if request.user in blog_obj.read_by.all():
            blog_obj.read_by.remove(request.user)
            is_read = False
        else:
            blog_obj.read_by.add(request.user)
            is_read = True
        return JsonResponse({'success': True, 'is_read': is_read})
    except blog.DoesNotExist:
        return JsonResponse({'success': False}, status=404)

2.2 在列表/详情页传递已读状态 #

比如在博客列表视图里，给每个博客对象加上is_read属性，方便模板渲染：

from django.shortcuts import render
from .models import blog, BlogReadStatus

def blog_list(request):
    blogs = blog.objects.all()
    if request.user.is_authenticated:
        # 获取当前用户所有已读博客的ID
        read_blog_ids = BlogReadStatus.objects.filter(
            user=request.user, is_read=True
        ).values_list('blog_id', flat=True)
        # 给每个博客标记是否已读
        for b in blogs:
            b.is_read = b.id in read_blog_ids
    return render(request, 'blog_list.html', {'blogs': blogs})

3. 配置URL路由 #

在你的应用urls.py里添加切换状态的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 保留你原来的其他路由...
    path('blog/<int:blog_id>/toggle-read/', views.toggle_blog_read_status, name='toggle_blog_read'),
]

4. 模板中实现交互：按钮+AJAX无刷新切换 #

在博客列表或者详情页添加按钮，用AJAX实现点击后即时更新状态：

<!-- 示例：博客列表项中的按钮 -->
{% for blog in blogs %}
<div class="blog-item">
    <h3>{{ blog.blog_title }}</h3>
    {% if user.is_authenticated %}
        <button class="toggle-read-btn" data-blog-id="{{ blog.id }}">
            {% if blog.is_read %}
                标记为未读
            {% else %}
                标记为已读
            {% endif %}
        </button>
    {% else %}
        <span style="color: #999;">登录后可标记已读</span>
    {% endif %}
</div>
{% endfor %}

<!-- AJAX脚本，放在模板底部 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.toggle-read-btn');
    toggleButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const blogId = this.dataset.blogId;
            fetch(`/blog/${blogId}/toggle-read/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新按钮文本
                    this.textContent = data.is_read ? '标记为未读' : '标记为已读';
                } else {
                    alert(data.message || '操作失败，请重试');
                }
            })
            .catch(error => console.error('操作出错:', error));
        });
    });
});
</script>

5. 额外优化建议 #

• 在博客详情页加载时，自动标记为已读（可以在详情视图里添加逻辑，当用户访问时自动设置is_read=True）
• 用图标区分已读/未读博客，比如已读的显示灰色对勾，未读的显示蓝色圆点
• 给未登录用户隐藏按钮，或者提示登录后使用

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