删除博客

前面我们讲到了在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()函数删除数据库中这篇文章.删除成功后重定向到到文章列表。失败后返回失败信息

三. 前端页面改写

前端判断，文章的作者为当前登陆用户时，显示删除等操作。 {% 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 %}

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

可以删除时：

不可以删除时：

引入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。

优化：

逻辑层处理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) 前端模版修改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。

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