Django项目后台-新闻类别管理

新闻类别管理，需要先创建想新闻类别的模板，显示新闻类别的，标签名称，对应的文章数量，操作（删除，编辑）和添加。

首先创建模板:

{% extends 'admin/base/base.html' %}
{% block title %}
  标签管理页
{% endblock %}
{% block content_header %}
  标签管理
{% endblock %}

{% block header_option_desc %}
  标签分类
{% endblock %}
{% block content %}
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="box box-primary">
        <div class="box-header">
          <button class="btn btn-primary pull-right" id="btn-add-tag">添加标签</button>
        </div>
        <div class="box-body">
          <table class="table table-bordered table-hover">
            <thead>
            <tr>
              <th>标签名称</th>
              <th>文章数量</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for one_tag in tags %}
              <tr data-id="{{ one_tag.id }}" data-name="{{ one_tag.name }}">
                <td>{{ one_tag.name }}</td>
                <td>{{ one_tag.num_news }}</td>
                <td>
                  <button class="btn btn-xs btn-warning btn-edit">编辑</button>
                  <button class="btn btn-xs btn-danger btn-del">删除</button>
                </td>
              </tr>
            {% endfor %}


            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block script %}
 <script src="{% static 'js/admin/news/tags_manage.js'%}"></script>
{% endblock %}

效果显示

写相应的视图函数，调用数据库，来显示数据库中的数据

class Tag_manage(View):
    def get(self,request):
        tags = models.Tag.objects.values('id', 'name').annotate(num_news=Count('news')).filter(delete_is=False).order_by('-num_news');
        return render(request, 'admin/news/tags_manage.html', locals());

配置相应的路由

urlpatterns = [
    path('',views.index,name='index'),
    path('tags/',views.Tag_manage.as_view(),name='tagmage'),
    path('tags/<int:tag_id>/',views.Tag_manage.as_view(),name='tags_manage'),

编辑实现（通过编辑修改标签的名字）:

首先编写相应的js文件

let $tagEdit = $(".btn-edit");  // 1. 获取编辑按钮
  $tagEdit.click(function () {    // 2. 点击触发事件
    let _this = this;//获取值，这里this和_this都代表了"#btn"这个对象
    let sTagId = $(this).parents('tr').data('id');//获取每一个事件的id值
    let sTagName = $(this).parents('tr').data('name');//获取编辑事件的name值
   // fAlert.alertOneInput一个定义的弹窗的样式
    fAlert.alertOneInput({
      title: "编辑文章标签",
      text: "你正在编辑 " + sTagName + " 标签",
      placeholder: "请输入文章标签",
      value: sTagName,
      //点击确认后的回调函数，传入一个输入值
      confirmCallback: function confirmCallback(inputVal) {
       // console.log(inputVal);
       //如果输入值与当前值一致的话，则不修改
        if (inputVal === sTagName) {
          swal.showInputError('标签名未变化');
          return false;
        }
        let sDataParams = {
          "name": inputVal
        };

        $.ajax({
          // 请求地址
          url: "/admin/tags/" + sTagId + "/",  // url尾部需要添加/
          // 请求方式
          type: "PUT",
          data: JSON.stringify(sDataParams),
          // 请求内容的数据类型（前端发给后端的格式）
          contentType: "application/json; charset=utf-8",
          // 响应数据的格式（后端返回给前端的格式）
          dataType: "json",
        })
          .done(function (res) {
            if (res.errno === "0") {
              // 更新标签成功
              $(_this).parents('tr').find('td:nth-child(1)').text(inputVal);
              swal.close();
              message.showSuccess("标签修改成功");
            } else {
              swal.showInputError(res.errmsg);
            }
          })
          .fail(function () {
            message.showError('服务器超时，请重试！');
          });

      }
    });
  });

在编写相应的视图函数

 #对标签进行修改
    def put(self,request,tag_id):
        json_data = request.body
        if not json_data:
            return to_json_data(errno=Code.PARAMERR, errmsg="数据为空，请再继续输入")
        # 将json转化为dict
        dict_data = json.loads(json_data)
        tag_name = dict_data.get('name')
        tag = models.Tag.objects.only('id').filter(id=tag_id).first()
        if tag:
            if tag_name and tag_name.strip():
                # 有查询集有数据就返回True ,否则返回False
                if not models.Tag.objects.only('id').filter(name=tag_name).exists():
                    tag.name = tag_name
                    tag.save(update_fields=['name'])
                    return to_json_data(errmsg="标签更新成功")
                else:
                    return to_json_data(errno=Code.DATAEXIST, errmsg="标签名已存在")
            else:
                return to_json_data(errno=Code.PARAMERR, errmsg="标签名为空")

        else:
            return to_json_data(errno=Code.PARAMERR, errmsg="需要更新的标签不存在")

删除实现（删除标签的名字，逻辑删除，只将数据的delete_is设置为true即可）:

首先编写相应的js代码：

// 删除标签
  let $tagDel = $(".btn-del");  // 1. 获取删除按钮
  $tagDel.click(function () {   // 2. 点击触发事件
    let _this = this;
    let sTagId = $(this).parents('tr').data('id');
    let sTagName = $(this).parents('tr').data('name');
    fAlert.alertConfirm({
      title: "确定删除 " + sTagName + " 标签吗？",
      type: "error",
      confirmText: "确认删除",
      cancelText: "取消删除",
      confirmCallback: function confirmCallback() {

        $.ajax({
          // 请求地址
          url: "/admin/tags/" + sTagId + "/",  // url尾部需要添加/
          // 请求方式
          type: "DELETE",
          dataType: "json",
        })
          .done(function (res) {
            if (res.errno === "0") {
              // 更新标签成功
              message.showSuccess("标签删除成功");
              $(_this).parents('tr').remove();
            } else {
              swal.showInputError(res.errmsg);
            }
          })
          .fail(function () {
            message.showError('服务器超时，请重试！');
          });
      }
    });
  });

在编写相应的视图函数

 #对标签进行删除
    def delete(self,request,tag_id):
        tag = models.Tag.objects.only('id').filter(id=tag_id).first()
        if tag:
            tag.delete_is=True;
            tag.save(update_fields=['delete_is'])
            return to_json_data(errmsg="标签更新成功")
        else:
            return to_json_data(errno=Code.PARAMERR, errmsg="需要删除的标签不存在")

添加实现（添加新的标签的名字）:

编写相应的视图函数

  #增加标签类型
    def post(self,request):
        #获取前端传过来的值
        json_data=request.body;
        if not json_data:
            return to_json_data(errno=Code.PARAMERR, errmsg="参数为空，不正确")
        else:
            #将传过来的值转换成字典类型
            json_data=json.loads(json_data);
            #获取传过来的标题的值
            title_name=json_data.get('name');
            # 去除两端空白
            if title_name:
                #如果不为空的话，对其进行去除两边的空白
                title_name=title_name.strip();
                #将其方将数据库中
                tag_flag=models.Tag.objects.get_or_create(name=title_name)
                if tag_flag[-1]:
                    return to_json_data(errmsg="标签创建成功")
                else:
                    to_json_data(errno=Code.DATAEXIST, errmsg="标签名已存在")
            else:
                return to_json_data(errno=Code.PARAMERR, errmsg="标签名为空")

首先编写相应的js代码

  let $tagAdd = $("#btn-add-tag");//获取点击按钮的触发事件
    // 2. 点击事情
    $tagAdd.click(function () {
        fAlert.alertOneInput({
            title: "请输入文章标签",
            text: "长度限制在20字以内",
            placeholder: "请输入文章标签",
            //成功的话，执行一个回调函数
            confirmCallback: function confirmCallback(inputVal) {
                // console.log(inputVal);
                let sDataParams = {
                    "name": inputVal
                };

                $.ajax({
                    // 请求地址
                    url: "/admin/tags/",  // url尾部需要添加/
                    // 请求方式
                    type: "POST",
                    data: JSON.stringify(sDataParams),
                    // 请求内容的数据类型（前端发给后端的格式）
                    contentType: "application/json; charset=utf-8",
                    // 响应数据的格式（后端返回给前端的格式）
                    dataType: "json",
                })
                    .done(function (res) {
                        if (res.errno === "0") {
                            // 添加标签成功
                            fAlert.alertSuccessToast(inputVal + " 标签添加成功");
                            //执行成功后页面跳转到当前页面
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500)
                        } else {
                            //错误的话，弹出错误信息
                            swal.showInputError(res.errmsg);
                        }
                    })
                    .fail(function () {
                        message.showError('服务器超时，请重试！');
                    });
            }
        });
    })