DjangoBlog｜12 博客文章刪除功能(優(yōu)化版)

一、前情回顧

在前面，我們完成了Django Blog博客刪除博客功能實(shí)現(xiàn)，這一節(jié)我們講下如何優(yōu)化博客刪除功能。

Django Blog系列文章

Django Blog|01 創(chuàng)建環(huán)境和項(xiàng)目

Django Blog|02 創(chuàng)建admin賬戶&settings.py介紹

Django Blog|03 創(chuàng)建一個(gè)blog app和Article模型

Django Blog|04 創(chuàng)建blog視圖和完成MVT框架開發(fā)

Django Blog|05 修改首頁顯示博客列表

Django Blog|06 添加博客詳情頁視圖，顯示博客詳情

Django Blog|07 引入Bootstrap前端框架，優(yōu)化頁面

Django Blog|08 添加編寫+發(fā)布博客功能

Django Blog | 09 這么簡單！實(shí)現(xiàn)博客markdown輸入和顯示

Django Blog | 10 自定義Form，美化頁面并實(shí)現(xiàn)文章編輯功能

Django Blog | 11 添加Django博客刪除功能(基礎(chǔ)版)

二、博客文章刪除功能前端優(yōu)化

上一篇我們是直接新建了一個(gè)博客刪除頁面，然后操作對(duì)文章的刪除，但就文章刪除這個(gè)功能來說，其實(shí)是沒有必要再額外新建一個(gè)頁面的。

那么首先我們來想想我們之前為什么要那樣設(shè)計(jì)刪除功能？就我個(gè)人有兩點(diǎn)原因：

1、我知道這樣操作肯定能實(shí)現(xiàn)功能，圖簡單；
2、刪除博客，確實(shí)需要一個(gè)中轉(zhuǎn)頁面讓用戶考慮（避免誤操作）。

我們不考慮個(gè)人能力問題，我們將原因合并：刪除前需要提示用戶正在進(jìn)行刪除操作，那這樣想，更好的解決方法是，出一個(gè)彈框即可，就是當(dāng)用戶點(diǎn)擊文章詳情頁上的刪除按鈕時(shí)，先彈出一個(gè)彈框提示用戶是否要?jiǎng)h除對(duì)應(yīng)文章，然后用戶選擇刪除，就直接刪除文章，然后返回到博客首頁。

如果不知道怎么實(shí)現(xiàn)，我們直接瀏覽器搜索bootstrap 彈框即可。

在Bootstrap官網(wǎng)教程的Components中有一個(gè)Modal，就表示的動(dòng)態(tài)彈框，我們選擇Live demo，復(fù)制好里面的內(nèi)容。

刪除按鈕之前寫在文章詳情頁面，所以我們現(xiàn)在打開Project/brief_blog/myblog/templates/article_detial.html，修改下刪除按鈕，主要要修改的就是這一段代碼：

<a?href="{%?url?'delete_article'?article.pk?%}"?style="text-decoration:none;font-size:?12px;text-align:?right;float:right;color:?rgb(93,?89,?89)">
????????????刪除  
a>

替換成Bootstrap的彈框模塊Live demo，直接先上修改好的代碼（將下面代碼替換掉上面代碼即可）：

<a?href="delete"?data-bs-toggle="modal"?data-bs-target="#exampleModal"
????style="text-decoration:none;font-size:?12px;text-align:?right;float:right;color:?rgb(93,?89,?89)">
????刪除  
a>

<div?class="modal?fade"?id="exampleModal"?tabindex="-1"?aria-labelledby="exampleModalLabel"?aria-hidden="true">
????<div?class="modal-dialog">
????????<div?class="modal-content">
????????????<div?class="modal-header">
????????????????<h5?class="modal-title"?id="exampleModalLabel">確認(rèn)刪除h5>
????????????????<button?type="button"?class="btn-close"?data-bs-dismiss="modal"?aria-label="Close">button>
????????????div>
????????????<div?class="modal-body">
????????????????請(qǐng)問，確認(rèn)刪除文章<font?color="red">《{{article.title}}》font>嗎？
????????????div>
????????????<div?class="modal-footer">
????????????????<button?class="btn?btn-secondary?mt-4?mb-4"?data-bs-dismiss="modal">取消button>
????????????????<form?method="POST"?action="{%?url?'delete_article'?article.pk?%}">

????????????????????
????????????????????{%?csrf_token?%}
????????????????????<button?class="btn?btn-primary?mt-4?mb-4"?type="submit">刪除button>
????????????????form>
????????????div>
????????div>
????div>
div>

Bootstrap的彈框模塊Live demo主要分為兩塊：

modal觸發(fā)器，就是點(diǎn)擊這個(gè)按鈕，就會(huì)出現(xiàn)彈框，里面比較重要的兩個(gè)設(shè)置：
data-bs-toggle="modal"，表示這個(gè)是一個(gè)modal類型的按鈕/開關(guān)，
data-bs-target="#exampleModal"，其中exampleModal為我們?cè)O(shè)置的Modal的id，用于指示這個(gè)按鈕是對(duì)應(yīng)哪個(gè)Modal。

modal主體內(nèi)容，主要設(shè)置和結(jié)構(gòu)：
class="modal fade"和id="exampleModal" 設(shè)置modal類型和modal的id，

modal彈框內(nèi)有三部分：彈框標(biāo)題（modal-header）、主體內(nèi)容（modal-body）、底部內(nèi)容（odal-footer），底部我們?cè)O(shè)置了兩個(gè)按鈕，一個(gè)是取消，一個(gè)是刪除，其中刪除操作是放在了Post表單里面，并設(shè)置了csrf驗(yàn)證。

前端頁面我們修改好后，我們還需要改下DeleteArticleView視圖，需要注釋掉視圖類中的template_name，現(xiàn)在我們利用彈框處理，就沒必要設(shè)置額外的模板了。進(jìn)入Project/brief_blog/myblog/blog/views.py，將DeleteArticleView中的template_name一行注釋/刪除掉。

#?刪除博客
class?DeleteArticleView(DeleteView):
????model?=?Article
????success_url?=?reverse_lazy('home')
????#?template_name?=?'article_detial.html'

這樣我們就完成了刪除博客功能的優(yōu)化啦，從上一節(jié)的跳轉(zhuǎn)頁面刪除，變成了彈框刪除，效果如下：

踩坑

替換成Bootstrap的彈框模塊Live demo后，點(diǎn)擊刪除按鈕無法彈出彈框？

老規(guī)矩先說怎么解決，注釋/刪除掉/Project/brief_blog/myblog/templates/article_detial.html中的:

這個(gè)問題困擾我很久，不斷嘗試才發(fā)現(xiàn)是這個(gè)腳本引起的問題，raphael.js是一個(gè)可以渲染可縮放矢量圖形 (SVG) 的js庫，這個(gè)被引入本來是django-mdeditor中渲染md內(nèi)容用的，暫時(shí)不知道為什么會(huì)和Bootstrap的modal沖突，按上面修改就可以解決問題，也不影響md渲染（不用raphael.js渲染SVG的話）。

如果有了解的讀者朋友，可以評(píng)論區(qū)交流～一起成長。

歡迎大家點(diǎn)贊、在看、轉(zhuǎn)發(fā)支持，點(diǎn)擊在看，下次可以第一時(shí)間收到公眾號(hào)推文～

本文為付費(fèi)專欄，每周更新1-2篇，利用Django帶大家一起實(shí)現(xiàn)個(gè)人博客，最后也會(huì)上線。

如果是對(duì)Django感興趣的初學(xué)者可以購買，如果你對(duì)Django已經(jīng)有所了解了，那我不建議你付費(fèi)，你可以選擇后面你感興趣的、更深層次的章節(jié)進(jìn)行付費(fèi)，如果需要的話。

閱讀到這里的都是真想學(xué)習(xí)Django的學(xué)習(xí)者，我為大家準(zhǔn)備了一個(gè)Django學(xué)習(xí)交流群（付費(fèi)，9.9元/年，每增加10人，漲價(jià)10元）加入方式如下：

給本文留言，然后大家掃下方二維碼，添加我微信，發(fā)送9.9元紅包+留言截圖即可加入：

掃碼即可加我微信
老表朋友圈經(jīng)常有贈(zèng)書/紅包福利活動(dòng)

學(xué)習(xí)更多：
整理了我開始分享學(xué)習(xí)筆記到現(xiàn)在超過250篇優(yōu)質(zhì)文章，涵蓋數(shù)據(jù)分析、爬蟲、機(jī)器學(xué)習(xí)等方面，別再說不知道該從哪開始，實(shí)戰(zhàn)哪里找了

“點(diǎn)贊”就是對(duì)博主最大的支持?