Django管理文章标签实现

一 后端代码

1 编写mysite/article/views.py

# 标签管理GET和POST处理
@login_required(login_url='/account/login')
@csrf_exempt
def article_tag(request):
    if request.method == "GET":
        article_tags = ArticleTag.objects.filter(author=request.user)
        article_tag_form = ArticleTagForm()
        return render(request, "article/tag/tag_list.html", {"article_tags":article_tags, "article_tag_form":article_tag_form})

    if request.method == "POST":
        tag_post_form = ArticleTagForm(data=request.POST)
        if tag_post_form.is_valid():
            try:
                new_tag = tag_post_form.save(commit=False)
                new_tag.author = request.user
                new_tag.save()
                return HttpResponse("1")
            except:
                return HttpResponse("数据无法保存.")
        else:
            return HttpResponse("对不起，表单无效.")

# 删除标签
@login_required(login_url='/account/login')
@require_POST
@csrf_exempt
def del_article_tag(request):
    tag_id = request.POST['tag_id']
    try:
        tag = ArticleTag.objects.get(id=tag_id)
        tag.delete()
        return HttpResponse("1")
    except:
        return HttpResponse("2")

2 编写URL

from django.conf.urls import url
from . import views, list_views

urlpatterns = [
    url(r'^article-column/$', views.article_column, name="article_column"),
    url(r'^rename-column/$', views.rename_article_column, name="rename_article_column"),
    url(r'^del-column/$', views.del_article_column, name="del_article_column"),
    url(r'^article-post/$', views.article_post, name="article_post"),
    url(r'^article-list/$', views.article_list, name="article_list"),
    url(r'^article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', views.article_detail, name="article_detail"),
    url(r'^del-article/$', views.del_article, name="del_article"),
    url(r'^redit-article/(?P<article_id>\d+)/$', views.redit_article, name="redit_article"),
    url(r'^list-article-titles/$', list_views.article_titles, name="article_titles"),
    # 视图函数虽然相同，但可以根据不同的视图文件来区分，但name应该不同
    url(r'^list-article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', list_views.article_detail, name="list_article_detail"),
    # 对应某个作者的全部文章
    url(r'^list-article-titles/(?P<username>[-\w]+)/$', list_views.article_titles, name="author_articles"),
    # 为文章点赞
    url(r'^like-article/$', list_views.like_article, name="like_article"),
    # 标签管理
    url(r'^article-tag/$', views.article_tag, name="article_tag"),
    url(r'^del-article-tag/$', views.del_article_tag, name="del_article_tag"),
]

二 前端代码

1 增加入口链接

<div class="bg-info">
    <div class="text-center" style="margin-top: 5px;">
        <p><h4>文章管理</h4></p>
        <p><a href="{% url 'article:article_column'%}">栏目管理</a></p>
        <p><a href="{% url 'article:article_post'%}">发布文章</a></p>
        <p><a href="{% url 'article:article_list' %}">文章列表</a></p>
        <p><a href="{% url 'article:article_tag' %}">文章标签</a></p>
    </div>
</div>

2 新建标签管理模板

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}文章标签{% endblock %}
{% block content %}
<!--添加标签-->
<div>
    <p>添加文章标签</p>
    <form class="form-horizontal" action="." method="post">{% csrf_token %}
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>文章标签</span></div>
            <div class="col-md-10 text-left">{{article_tag_form.tag}}</div>
        </div>
        <div class="row">
            <input type="button" class="btn btn-primary btn-lg" style="margin-left:200px; margin-top:10px;" value="添加"
                   onclick="add_tag()">
        </div>
    </form>
</div>
<!--文章标签列表-->
<div>
    <p>标签列表</p>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>文章标签</td>
            <td>操作</td>
        </tr>
        {% for article_tag in article_tags %}
        <tr id={{ forloop.counter }}>
            <td>{{ forloop.counter }}</td>
            <td>{{ article_tag.tag }}</a></td>
            <td>
                <a nane="delete" href="javascript:" onclick="del_tag(this, {{ article_tag.id }})"><span
                        class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
        {% empty %}
        <p>你还没有文章标签，请添加！</p>
        {% endfor %}
    </table>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    function add_tag(){
        tag = $("#id_tag").val();
        $.ajax({
            url: '{% url "article:article_tag" %}',
            type: "POST",
            data: {"tag":tag},
            success: function(e){
                if(e=="1"){
                    layer.msg("你已新增一个标签！");
                    window.location.reload();
                } else {
                    layer.msg(e)
                }
            }
        });
    }
function del_tag(the, tag_id){
    var article_tag = $(the).parents("tr").children("td").eq(1).text();
    layer.open({
        type: 1,
        skin: "layui-layer-rim",
        area: ["400px", "200px"],
        title: "删除文章标签",
        content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除文章标签《'+article_tag+'》</p></div>',
        btn:['确定', '取消'],
        yes: function(){
            $.ajax({
                url: '{% url "article:del_article_tag" %}',
                type:"POST",
                data: {"tag_id":tag_id},
                success: function(e){
                    if(e=="1"){
                        parent.location.reload();
                        layer.msg("The tag has been deleted.");
                    }else{
                        layer.msg("删除失败");
                    }
                    
                },
            })    
        },
    });
}

</script>
{% endblock %}

三 测试结果