Django增加新栏目

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chengqiuming/article/details/85269643

一 修改视图函数mysite/article/views.py

from django.shortcuts import render, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse
from .models import ArticleColumn
from .forms import ArticleColumnForm

import json

@login_required(login_url='/account/login/')
# 在视图函数前面添加修饰器的方式是解决提交表单CSRF问题的一种方式
@csrf_exempt
def article_column(request):
    if request.method == "GET":
        columns = ArticleColumn.objects.filter(user=request.user)
        column_form = ArticleColumnForm()
        return render(request, "article/column/article_column.html", {"columns": columns, 'column_form': column_form})

    if request.method == "POST":
        column_name = request.POST['column']
        # 两个过滤条件，一个是当前用户，另外一个是栏目名称
        columns = ArticleColumn.objects.filter(user_id=request.user.id, column=column_name)
        if columns:
            return HttpResponse('2')
        else:
            ArticleColumn.objects.create(user=request.user, column=column_name)
            return HttpResponse("1")

二 编辑前端页面mysite/templates/article/column/article_column.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %} {% block content %}
<div>
    <p class="text-right">
        <button id="add_column" onclick="add_column()" class="btn btn-primary">添加栏目</button>
    </p>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>栏目名称</td>
            <td>操作</td>
        </tr>
        {% for column in columns %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ column.column }}</td>
            <td>
            </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_column() {
        var index = layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "新增栏目",
            content: '<div class="text-center" style="margin-top:20px">\
                <p> 请输入新的栏目名称</p>\
                <p>{{ column_form.column }}</p></div > ',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                column_name = $('#id_column').val();
                $.ajax({
                    url: '{% url "article:article_column" %}',
                    type: 'POST',
                    data: { "column": column_name },
                    success: function (e) {
                        if (e == "1") {
                            parent.location.reload();
                            layer.msg("成功添加");
                        } else {
                            layer.msg("此栏目已有，请更换名称")
                        }
                    },
                });
            },
            btn2: function (index, layero) {
                layer.close(index);
            }
        });
    }


</script>

三 测试