删除博客
前面我们讲到了在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">×</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。
运行服务器,发现同样实现类删除功能,是不是有点神奇呢。