12_删除博客

删除博客

前面我们讲到了在Django的添加文章，现在我们在前端进行删除文章。

一. 增加路由

article/urls.py

    path('del_article/<int:id>', views.del_article, name='del_article'),

二. 增加视图函数

article/views.py

def del_article(request, id):
    art_obj = get_object_or_404(Article, id=id)
    if art_obj.art_user == request.user:
        art_obj.delete()
        return redirect(reverse('article:article_list'))
    else:
        context = {
            'msg': '删除失败'
        }
        return render(request, 'my_articles.html', context)

• path与查看文章详情，需要获取要删除的文章id
• 删除的文章的作者必须是当前登陆用户，否则删除失败，后面还会优化
• delete()函数删除数据库中这篇文章.删除成功后重定向到到文章列表。失败后返回失败信息

三. 前端页面改写

1. 前端判断，文章的作者为当前登陆用户时，显示删除等操作。

                {% if article.art_user == request.user %}
                        <a href="add_article.html" class="btn btn-info" role="button">编辑</a>
                        <a href="#" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" role=" button">删除</a>
                        <a href="#" class="btn btn-light" role="button">私密</a>
                {% endif %}

如：登陆的为同一账户时，修改文章的作者。

可以删除时：

不可以删除时：

2. 引入Bootstrap的弹出框，避免误删。

<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" role=" button">删除</a>


<!-- 删除弹窗Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">您在执行删除操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你确定要删除这篇文章吗？此操作不可恢复
            </div>
            <div class="modal-footer">
                <a href="{% url 'article:del_article' article.id %}" onclick="javascript:return del_success()"
                   class="btn btn-danger"
                   role="button">确定</a>
                <a href="#" class="btn btn-info" role="button" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>


<script>
    function del_success() {
        alert('删除成功!!!')
    }
</script>

这样执行删除的时候，会出现弹窗提示。

点击确定后

点击删除后，重定向到文章列表，这个时候就发现刚刚的那篇文章已经被删除了。

---

继续优化

在后来的学习中经验所得，涉及到数据问题时，为了数据的安全，数据查询用 GET，数据变更用 POST。

优化：

1. 逻辑层处理article/views.py

def del_article(request, id):
    if request.method == 'POST':
        art_obj = get_object_or_404(Article, id=id)
        if art_obj.art_user == request.user:
            art_obj.delete()
            return redirect(reverse('article:article_list'))
        else:
            context = {
                'msg': '删除失败'
            }
            return render(request, 'my_articles.html', context)
    else:
        context = {
            'msg': '删除失败,只支持POST请求！！！'
        }
        return render(request, 'my_articles.html', context)

2. 前端模版修改templates/article_detail.html

<div class="modal-footer">
                <form action="{% url 'article:del_article' article.id %}" method="post">
                    {% csrf_token %}
                    <button onclick="javascript:return del_success()" class="btn btn-danger" role="button">确定</button>
                    <button class="btn btn-info" role="button" data-dismiss="modal">取消</button>
                </form>
            </div>

将前端的请求方式变为POST。

运行服务器，发现同样实现类删除功能，是不是有点神奇呢。