有没有办法在 Django 默认管理页面上实现博客的自动保存功能

Question

我一直在尝试为我使用 Django 构建的博客实现自动保存功能。我还使用默认的管理页面。但它不起作用。

所以我尝试使用ajax从post页面获取内容，并将post请求发送到函数视图。但它似乎不起作用。有更好的办法吗？

Answer 1

在 Django 博客的默认管理中实现自动保存功能可能有点棘手，因为管理站点本身并不支持开箱即用的自动保存。

步骤：

1. 编写自动保存 API 视图： 创建一个视图来处理自动保存请求。此视图将更新数据库中的帖子对象，而不需要提交完整的表单。

   from django.http import JsonResponse
   from django.views.decorators.csrf import csrf_exempt
   from django.utils.decorators import method_decorator
   from django.shortcuts import get_object_or_404
   from .models import BlogPost  # Replace with your actual model
   
   @method_decorator(csrf_exempt, name='dispatch')
   def autosave_post(request, post_id):
       if request.method == 'POST':
           data = request.POST
           post = get_object_or_404(BlogPost, id=post_id)
           post.title = data.get('title', post.title)
           post.content = data.get('content', post.content)
           post.save()
           return JsonResponse({'status': 'success'})
       return JsonResponse({'status': 'error', 'message': 'Invalid request'}, status=400)
   

2. 为自动保存 API 添加 URL 路由： 在您的

   urls.py

   中，添加自动保存 API 的路由。

   from django.urls import path
   from .views import autosave_post
   
   urlpatterns = [
       path('autosave/<int:post_id>/', autosave_post, name='autosave_post'),
   ]
   

3. 在管理页面中集成JavaScript： 使用 JavaScript 向

   autosave

   端点发送定期 AJAX 请求。

   在静态文件中添加自定义 JavaScript 文件：

   // static/js/autosave.js
   document.addEventListener("DOMContentLoaded", function () {
       const form = document.querySelector('form');
       const postId = form.dataset.postId;  // Set this from the template
       const autosaveInterval = 5000; // 5 seconds
   
       function autosave() {
           const formData = new FormData(form);
           fetch(`/autosave/${postId}/`, {
               method: 'POST',
               body: formData,
               headers: {
                   'X-CSRFToken': formData.get('csrfmiddlewaretoken'),
               },
           })
               .then((response) => response.json())
               .then((data) => {
                   if (data.status === 'success') {
                       console.log('Autosave successful');
                   } else {
                       console.error('Autosave error:', data.message);
                   }
               })
               .catch((error) => {
                   console.error('Autosave failed:', error);
               });
       }
   
       setInterval(autosave, autosaveInterval);
   });
   

4. 在管理页面加载JavaScript： 扩展管理模板以包含您的 JavaScript 文件。

   为模型管理员创建模板覆盖：

   <!-- templates/admin/your_app/blogpost/change_form.html -->
   {% extends "admin/change_form.html" %}
   {% block extrahead %}
       {{ block.super }}
       <script src="{% static 'js/autosave.js' %}"></script>
   {% endblock %}
   

5. 在Form

   中设置

   data-post-id： 修改管理员以将

   post_id

   作为

   data

   属性包含在表单中。这允许 JavaScript 获取正确的 ID。