DjangoBlog｜12 博客文章删除功能(优化版)-阿里云开发者社区

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

替换成Bootstrap的弹框模块Live demo，直接先上修改好的代码（将下面代码替换掉上面代码即可）：

<!-- Button trigger modal -->
<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)">
    删除&nbsp;&nbsp;
</a>
<!-- Modal -->
<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">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                请问，确认删除文章<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，防止黑客攻击，获取表单提交内容
                    csrf Cross Site Request Forgery)攻击 跨站请求伪造攻击
                    -->
                    {% csrf_token %}
                    <button class="btn btn-primary mt-4 mb-4" type="submit">删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

Bootstrap的弹框模块Live demo主要分为两块：

modal触发器，就是点击这个按钮，就会出现弹框，里面比较重要的两个设置：

data-bs-toggle="modal"，表示这个是一个modal类型的按钮/开关，

data-bs-target="#exampleModal"，其中exampleModal为我们设置的Modal的id，用于指示这个按钮是对应哪个Modal。

modal主体内容，主要设置和结构：

class="modal fade"和id="exampleModal" 设置modal类型和modal的id，

modal弹框内有三部分：弹框标题（modal-header）、主体内容（modal-body）、底部内容（odal-footer），底部我们设置了两个按钮，一个是取消，一个是删除，其中删除操作是放在了Post表单里面，并设置了csrf验证。

前端页面我们修改好后，我们还需要改下DeleteArticleView视图，需要注释掉视图类中的template_name，现在我们利用弹框处理，就没必要设置额外的模板了。进入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'

这样我们就完成了删除博客功能的优化啦，从上一节的跳转页面删除，变成了弹框删除，效果如下：

删除博客弹框模式演示

踩坑

替换成Bootstrap的弹框模块Live demo后，点击删除按钮无法弹出弹框？

老规矩先说怎么解决，注释/删除掉/Project/brief_blog/myblog/templates/article_detial.html中的:

<!-- <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script> -->

这个问题困扰我很久，不断尝试才发现是这个脚本引起的问题，raphael.js是一个可以渲染可缩放矢量图形 (SVG) 的js库，这个被引入本来是django-mdeditor中渲染md内容用的，暂时不知道为什么会和Bootstrap的modal冲突，按上面修改就可以解决问题，也不影响md渲染（不用raphael.js渲染SVG的话）。

DjangoBlog｜12 博客文章删除功能(优化版)

一、前情回顾

Django Blog系列文章

二、博客文章删除功能前端优化

踩坑

热门文章

最新文章

相关电子书

相关实验场景