Python Django个人网站搭建6-对文章进行增加，删除及删除确认弹窗

zifan

发布于 2021-12-14 12:26:37

9730

发布于 2021-12-14 12:26:37

文章被收录于专栏：个人编程技术学习与分享

作者： zifanwang 发布于2020-05-10

1. 增加文章

第一步在article中新建forms.py文件, 写入如下代码：

from django import forms
from . models import ArticlePost

# 写文章表单类
class ArticlePostForm(forms.ModelForm):
   class Meta:
       # 指明数据模型来源
       model = ArticlePost
       # 定义表单包含的字段
       fields = ('title', 'body', )

第二部修改article/views.py 增加处理文章的函数：

from django.shortcuts import render, redirect
from django.http import HttpResponse
# 引入刚才定义的ArticlePostForm
from .forms import ArticlePostForm
from django.contrib.auth.models import User

...

def article_create(request):
   # 判断用户是否提交数据
   if request.method == "POST":
       article_post_form = ArticlePostForm(data=request.POST)
       if article_post_form.is_valid():
           new_article = article_post_form.save(commit=False)
           new_article.author = User.objects.get(id=1)
           new_article.save()
           return redirect('article:article_list')
       else:
           return HttpResponse("表单内容有误,请重新填写")

   else:
       article_post_form = ArticlePostForm()
       context = {'article_post_form': article_post_form}
       return render(request, 'article/create.html', context)

在templates/article中创建create.html：

{% extends "base.html" %}
{% load static %}
{% block title %}
make
{% endblock title %}
{% block  content %}
   <div class="container">
       <div class="col-12">
           <br>
               <form method="post" action=".">
                   {% csrf_token %}
                   <div class="form-group">
                       <label for="title">Title</label>
                       <input type="text" class="form-control" id="title" name="title">
                   </div>
                   <div class="form-group">
                       <label for="body">Body</label>
                       <textarea type="text" class="form-control" id="body" name="body" rows="12"></textarea>
                   </div>
                   <button type="submit" class="btn btn-primary">submit</button>
               </form>
           </div>
       </div>
   </div>
{% endblock content %}

修改article/urls.py：

from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
    # path函数将url映射到视图
    path('list/', views.article_list, name='article_list'),
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
    path('article-create/', views.article_create, name="article_create"),
]

然后运行服务器(python manage.py runserver)，再在地址栏输入http://127.0.0.1:8000/article/article-create/ 就可以访问增加文章的页面了：

新增一篇文章测试一下：

写完提交后可以看到都正常显示了我们何以修改header.html新增写文章入口：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
   <a class="navbar-brand" href="#">My Site</a>
   <div>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" href="{% url 'article:article_list' %}">Article</a>
       </li>
         <li class="nav-item">
             <a class="nav-link" href="{% url 'article:article_create' %}">New</a>
         </li>
     </ul>
   </div>
 </div>
</nav>

我们打开文章列表首页，点击New就能进入新增文章页面了。

2. 删除文章

首先在article/views.py中新增article_delete函数：

def article_delete(request, id):
   article = ArticlePost.objects.get(id=id)
   article.delete()
   return redirect('article:article_list')

再增加article/urls.py中删除文章路由：

from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
    # path函数将url映射到视图
    path('list/', views.article_list, name='article_list'),
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
    path('article-create/', views.article_create, name="article_create"),
    path('article-delete/<int:id>', views.article_delete, name="article_delete"),
]

最后在detail.html中增加删除文章的链接：

{% extends "base.html" %}
{% load static %}
{% block title %}
    article
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">author: {{ article.author }}</div>
        .<a href="{% url "article:article_delete" article.id %}">delete</a>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
    </div>
{% endblock content %}

最后我们查看效果：

点击删除文章后可以看见文章列表中没有了对应的文章就证明删除成功了。

3.删除确认

改写模板文件detail.html：

{% extends "base.html" %}
{% load static %}
{% block title %}
    article
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">author: {{ article.author }}</div>
        .<a href="#" onclick="confirm_delete()">delete</a>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
    </div>
    <script>
        function confirm_delete(){
            var r=confirm("Wanna delete?");
            if (r==true)
            {
                 window.location='{% url "article:article_delete" article.id %}';
            }
        }
    </script>
{% endblock content %}

然后测试删除文章：