Django個人博客搭建6-對文章進行增刪查改

目錄
Django個人博客搭建1-創建Django項目和第一個App
Django個人博客搭建2-編寫文章Model模型,View視圖
Django個人博客搭建3-創建superuser並向數據庫中添加數據並改寫視圖
Django個人博客搭建4-配置使用 Bootstrap 4 改寫模板文件
Django個人博客搭建5-編寫文章詳情頁面並支持markdown語法
Django個人博客搭建6-對文章進行增刪查改
Django個人博客搭建7-對用戶登陸註冊等需求的實現
Django個人博客搭建8-優化文章模塊
Django個人博客搭建9-增加文章評論模塊
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 staticfiles %}
{% block title %}
寫文章
{% endblock title %}
{% block  content %}
   <div class="container">
       <div class="col-12">
           <br>
               <form method="post" action=".">
                   <!-- Django中需要POST數據的地方都必須有csrf_token -->
                   {% csrf_token %}
                   <!-- 文章標題 -->
                   <div class="form-group">
                       <!-- 標籤 -->
                       <label for="title">文章標題</label>
                       <!-- 文本框 -->
                       <input type="text" class="form-control" id="title" name="title">
                   </div>
                   <!-- 文章正文 -->
                   <div class="form-group">
                       <label for="body">文章正文</label>
                       <!-- 文本區域 -->
                       <textarea type="text" class="form-control" id="body" name="body" rows="12"></textarea>
                   </div>
                   <!-- 提交按鈕 -->
                   <button type="submit" class="btn btn-primary">完成</button>
               </form>
           </div>
       </div>
   </div>
{% endblock content %}

修改article/urls.py:

# 引入path
from django.urls import path
from . import views
# 正在部署的應用的名稱
app_name = 'article'
urlpatterns = [
    # path函數將url映射到視圖
    path('article-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"),
]

然後再地址欄輸入: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="#">我的博客</a>
   <!-- 導航入口 -->
   <div>
     <ul class="navbar-nav">
       <!-- 條目 -->
       <li class="nav-item">
         <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
       </li>
       <!-- 增加這裏 -->
         <li class="nav-item">
             <a class="nav-link" href="{% url 'article:article_create' %}">寫文章</a>
         </li>
         <!-- 增加這裏 -->
     </ul>
   </div>
 </div>
</nav>

我們打開文章列表首頁:

點擊寫文章我們就能進入新增文章頁面了

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中刪除文章路由

# 引入path
from django.urls import path
from . import views
# 正在部署的應用的名稱
app_name = 'article'
urlpatterns = [
   # path函數將url映射到視圖
   path('article-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 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
   文章詳情
{% endblock title %}
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<!-- 文章詳情 -->
   <div class="container">
       <div class="row">
           <h1 class="col-12 mt-4">{{ article.title }}</h1>
           <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
           <!-- 修改這裏-->
           .<a href="{% url "article:article_delete" article.id %}">刪除文章</a>
           <!-- 修改這裏-->
           <div class="col-12">
               <p>{{ article.body|safe }}</p>
           </div>
       </div>
   </div>
{% endblock content %}

最後我們查看效果:

點擊刪除文章後可以看見文章列表中沒有了對應的文章:

就證明刪除成功了
接下來我們應該增加確認刪除的彈窗, 我們可以運用Layer彈窗組件
Layer下載
下載完成後將含有layer.js的文件夾複製到static裏:

完成後是這樣的
然後我們在base.html中引入Layer:

<!-- 載入靜態文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 網站主語言 -->
<html lang="zh-cn">
<head>
   <!-- 網站採用的字符編碼 -->
   <meta charset="utf-8">
   <!-- 預留網站標題的位置 -->
   <title>{% block title %}{% endblock %}</title>
   <!-- 引入bootstrap的css文件 -->
   <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
   <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
</head>
<body>
   <!-- 引入導航欄 -->
   {% include 'header.html' %}
   <!-- 預留具體頁面的位置 -->
   {% block content %}{% endblock content %}
   <!-- 引入註腳 -->
   {% include 'footer.html' %}
   <!-- bootstrap.js 依賴 jquery.js 和popper.js，因此在這裏引入 -->
   <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
   <script src="{% static 'popper/popper-1.14.4.js' %}"></script>
    <!-- 在這裏引入layer -->
   <script src="{% static 'layer/layer.js' %}"></script>
   <!-- 在這裏引入layer -->
   <!-- 引入bootstrap的js文件 -->
   <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>

layer插件依賴jquery才能正常工作，因此要在jquery的後面引入layer。
然後改寫模板文件detail.html:

<!-- extends表明此頁面繼承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
   文章詳情
{% endblock title %}
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<!-- 文章詳情 -->
   <div class="container">
       <div class="row"
           <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
           .<a href="#" onclick="confirm_delete()">刪除文章</a>
           <div class="col-12">
               <p>{{ article.body|safe }}</p>
           </div>
       </div>
   </div>
   <script>
       //刪除文章的函數
       function confirm_delete() {
       layer.open({
           //窗口標題
           title: "確認刪除？",
           //正文
           content: "確認刪除這篇文章嗎?",
           //點擊確定按鈕後調用回調函數
           yes: function (index, layero) {
               location.href='{% url "article:article_delete" article.id %}'
           }

       })
   }
   </script>
{% endblock content %}

然後測試刪除文章

可以看到增加了確認彈窗
3. 修改文章
首先在article/views.py中增加修改文章的視圖函數article_update()

def article_update(request, id):
   # 獲取文章對象
   article = ArticlePost.objects.get(id=id)
   if request.method =="POST":
       article_post_form = ArticlePostForm(data=request.POST)
       if article_post_form.is_valid():
           article.title = request.POST['title']
           article.body = request.POST['body']
           article.save()

           return redirect("article:article_detail", id=id)
       else:
           return HttpResponse("表單內容有誤,請重新填寫")


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

編寫update.html模板:

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
    修改文章
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-12">
                <br>
                <form method="post" action=".">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="title">文章標題</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ article.title }}">

                    </div>
                    <div class="form-group">
                        <label for="body">文章正文</label>
                        <textarea type="text" class="form-control" id="body" name="body" rows="12">{{ article.body }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">完成</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('article-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"),
    # 增加這裏
    path('article-update/<int:id>', views.article_update(), name="article_update"),
]

修改detail.html

<!-- 文章詳情 -->
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
            .<a href="#" onclick="confirm_delete()">刪除文章</a>
            <!-- 修改這裏 -->
            .<a href="{% url "article:article_update" article.id %}">編輯文章</a>
            <!-- 修改這裏 -->
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
    </div>

接着我們看一下效果,打開一篇文章:

可以看到增加了編輯文章鏈接,我們點擊鏈接:

可以看見可以繼續編輯文章,修改後點擊完成:


可以看到已經成功修改了

目錄
Django個人博客搭建1-創建Django項目和第一個App
Django個人博客搭建2-編寫文章Model模型,View視圖
Django個人博客搭建3-創建superuser並向數據庫中添加數據並改寫視圖
Django個人博客搭建4-配置使用 Bootstrap 4 改寫模板文件
Django個人博客搭建5-編寫文章詳情頁面並支持markdown語法
Django個人博客搭建6-對文章進行增刪查改
Django個人博客搭建7-對用戶登陸註冊等需求的實現
Django個人博客搭建8-優化文章模塊
Django個人博客搭建9-增加文章評論模塊