Django按照文章ID更新文章

重点是‘文章ID’作为参数，如何在各个环节传递。
1、视图函数向article_list.html传递articles变量，该变量包含全部文章。

1. @login_required
2. def article_list(request):
3.     articles = ArticlePost.objects.filter(author=request.user)
4.     context = {'articles': articles, }
5.     return render(request, 'article/column/article_list.html', context)

复制代码

2、article_list.html文件中遍历articles，获得某个article的ID，并使用以下语句为‘编辑图标’设置超链接。注意这个url中包含参数。

1. href="{% url 'article:redit_article' article.id %}">

复制代码

1. {% for article in articles %}    <tr id={{ article.id }}>        <td>{{ forloop.counter }}</td>        <td><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></td>        <td>{{ article.column }}</td>        <td>            <a name="edit" href="{% url 'article:redit_article' article.id %}">                <span class="fas fa-pencil-alt"></span>            </a>            <a name="delete" href="javascript:" onclick="del_article(this, {{ article.id }})">                <span class="fas fa-trash-alt" style="margin-left: 20px;"></span>            </a>        </td>    </tr>{% endfor %}

复制代码

3、包含参数的url的写法如下。注意这里的article_id必须就是视图函数redit_article中使用的形参，如果不划一，会报错。

1. path('redit-article/<int:article_id>/',
2.       views.redit_article, name='redit_article'),

复制代码

4、视图函数redit_article的实现如下：
如果是Get哀求，就使用获得的ID得到article的信息，传递到redit_article.html页面中，渲染该页面。
如果是POST哀求，就使用获得的ID，跟新数据库中的对应条目。

1. @login_required
2. @csrf_exempt
3. def redit_article(request, article_id):
4.     if request.method == 'POST':
5.         try:
6.             data = json.loads(request.body)
7.             article_title = data.get('article_title')
8.             article_column_id = data.get('article_column_id')
9.             article_body = data.get('article_body')
11.             # 获取对应的栏目对象
12.             try:
13.                 article_column = ArticleColumn.objects.get(id=article_column_id)
14.             except ArticleColumn.DoesNotExist:
15.                 return HttpResponse("Invalid column ID", status=400)
17.             # 更新文章
18.             change_article = ArticlePost.objects.get(id=article_id)
19.             change_article.title = article_title
20.             change_article.column = article_column
21.             change_article.body = article_body
22.             change_article.save()
24.             return JsonResponse({'status': 'success'})
25.         except Exception as e:
26.             return JsonResponse({'status': 'error', 'message': str(e)}, status=500)
27.     elif request.method == 'GET':
28.         article_columns = request.user.article_column.all()
29.         article = ArticlePost.objects.get(id=article_id)
30.         this_article_form = ArticlePostForm(initial={'title':article.title, 'body':article.body})
31.         this_article_column = article.column
32.         context = {'article_id':article_id,
33.                    'article_columns':article_columns,
34.                    'this_article_form':this_article_form,
35.                    'this_article_column':this_article_column}
36.         return render(request, 'article/column/redit_article.html',
37.                       context)

复制代码

5、redit_article.html文件实现如下：

1. {% extends "article/base.html" %}
2. {% load static %}
3. {% block title %}article post{% endblock %}
4. {% block content %}
6. <div style="margin-left:10px">
7.     <form class="form-horizontal" action="." method="post">
8.         {% csrf_token %}
9.         <div class="row" style="margin-top: 10px;">
10.             <div class="col-md-2 text-right"><span>标题：</span></div>
11.             <div class="col-md-10 text-left">
12.                 <input type="text" id="id_title" name="title" value="{{ this_article_form.title.value }}">
13.             </div>
14.         </div>
15.         <div class="row" style="margin-top: 10px;">
16.             <div class="col-md-2 text-right"><span>栏目：</span></div>
17.             <div class="col-md-10 text-left">
18.                 <select id="which_column">
19.                     {% for column in article_columns %}
20.                         {% if column == this_article_column %}
21.                             <option value="{{ column.id }}" selected="selected">
22.                                 {{ column.column }}
23.                             </option>
24.                         {% else %}
25.                             <option value="{{ column.id }}">
26.                                 {{ column.column }}
27.                             </option>
28.                         {% endif %}
29.                     {% endfor %}
30.                 </select>
31.             </div>
32.         </div>
33.         <div class="row" style="margin-top: 10px;">
34.             <div class="col-md-2 text-right"><span>内容：</span></div>
35.             <div class="col-md-10 text-left">
36.                 <textarea id="id_body" name="body">{{ this_article_form.body.value }}</textarea>
37.             </div>
38.         </div>
39.         <div class="row">
40.             <input type="button" class="btn btn-primary btn-lg" value="更新">
41.         </div>
42.     </form>
43. </div>
45. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
46. <script>
47.     $(document).ready(function() {
48.         $("input[type=button]").click(function() {
49.             redit_article();
50.         });
51.     });
53.     function redit_article() {
54.         var title = $("#id_title").val();
55.         var column_id = $("#which_column").val();
56.         var body = $("#id_body").val();
57.         var id = {{ article_id }}
59.         // 发送 AJAX 请求更新数据库，在fetch后支出了提交的url，由该url确定由那个view函数处理提交
60.         fetch(`/article/redit-article/${id}/`, {
61.             method: 'POST',
62.             headers: {
63.                 'Content-Type': 'application/json',
64.                 'X-CSRFToken': getCookie('csrftoken')  // Django 的 CSRF token
65.             },
66.             body: JSON.stringify({
67.                             article_title: title,
68.                             article_column_id: column_id,
69.                             article_body:body,
70.                             }) //发送到后台的是一个字典
71.         }).then(response => {
72.             if (response.ok) {
73.                 // 提交成功
74.                 alert('文章更新成功');
75.                 // 跳转到 article_list 页面
76.                 window.location.href = "{% url 'article:article_list' %}";
77.             } else {
78.                 // 提交失败，处理错误
79.                 alert('更新失败，请重试');
80.             }
81.         }).catch(error => {
82.             console.error('Error:', error);
83.             alert('更新失败，请重试');
84.         });
85.     }
87.     // 获取 CSRF token 的函数（Django）
88.     function getCookie(name) {
89.         let cookieValue = null;
90.         if (document.cookie && document.cookie !== '') {
91.             const cookies = document.cookie.split(';');
92.             for (let i = 0; i < cookies.length; i++) {
93.                 const cookie = cookies[i].trim();
94.                 if (cookie.substring(0, name.length + 1) === (name + '=')) {
95.                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
96.                     break;
97.                 }
98.             }
99.         }
100.         return cookieValue;
101.     }
102. </script>
103. {% endblock %}

复制代码

在提交时，JavaScript函数中，使用var id = {{ article_id }}语句得到文章ID。AJAX提交时，url的写法如下‘/article/redit-article/${id}/’

1. fetch(`/article/redit-article/${id}/`, {
2.             method: 'POST',
3.             headers: {
4.                 'Content-Type': 'application/json',
5.                 'X-CSRFToken': getCookie('csrftoken')  // Django 的 CSRF token
6.             },
7.             body: JSON.stringify({
8.                             article_title: title,
9.                             article_column_id: column_id,
10.                             article_body:body,
11.                             }) //发送到后台的是一个字典
12.         })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。