Django blog项目《二十三》：后台admin《用户组管理功能实现》

用户组管理功能，实现用户组的增、删、改、查和图片上传到服务器功能功能的实现

一、分析

1. 业务流程

1.用户组展示

1. 业务流程

   • 从后端查取数据返回到前端，进行页面填充

2. 请求方式、地址、参数

   • 请求方式：GET

   • 请求地址：/admin/group/

   • 权限：view_group

   • 请求参数：无

2. 用户组删除功能

1. 业务流程

   • 从前端传递一个带有文档id的delete请求
   • 判断数据库中是否有该数据
   • 逻辑删除该用户组，并返回数据到前端

2. 请求方式、地址、参数

   • 请求方式：DELETE

   • 请求地址：/admin/group/edit/<int:gro_id>/

   • 权限：delete_group

   • 请求参数：

     参数名	类型	是否必传	备注
     gro_id	int	必传	路径参数

3. 用户组修改功能

1. 业务流程

   • 判断用户组名、判断权限是否为空
   • 判断数据库中是否存在id=gro_id的数据
   • 判断传来的数据是否有做修改
   • 设置权限后将数据保存进数据库
     • 将数据返回到前端

2. 请求方式、地址、参数

   • 请求方式：PUT

   • 请求地址：/admin/group/edit/<int:gro_id>/

   • 权限：change_group

   • 请求参数：

     参数名	类型	是否必传	备注
     gro_id	int	必传	路径参数
     name	char	必传	请求体里
     group_permission	char	必传	请求体里

3. 前端功能实

   • 判断用户组名、判断权限是否为空

   • 发起ajax PUT请求

     • 跳转到用户组管理页面

4. 后端逻辑处理

   • 接收前端传来的数据并转化为字典
   • 判断数据库中是否存在id=gro_id的数据
   • 判断传来的数据是否有做修改
   • 设置权限后将数据保存进数据库
   • 返回数据到前端

4. 用户组发布功能

1. 业务流程

   • 判断用户组名、判断权限是否为空
   • 设置权限后将数据保存进数据库
     • 将数据返回到前端

2. 请求方式、地址、参数

   • 请求方式：POST

   • 请求地址：/admin/group/add/

   • 权限：add_group

   • 请求参数：

     参数名	类型	是否必传	备注
     name	char	必传	请求体里
     group_permission	char	必传	请求体里

3. 前端功能实

   • 判断用户组名、判断权限是否为空

   • 发起ajax POST请求

     • 跳转到用户组管理页面

4. 后端逻辑处理

   • 接收前端传来的数据并转化为字典
   • 判断用户组名、判断权限是否为空
   • 设置权限后将数据保存进数据库
   • 返回数据到前端

二、用户组展示功能实现

1. urls配置

from django.urls import path

from admin import views

app_name = "admin"

urlpatterns = [

    path("group/", views.GroupIndexView.as_view(), name="group"),
    path("group/edit/<int:gro_id>/", views.GroupEditView.as_view(), name="group_edit"),
    path("group/add/", views.GroupPubView.as_view(), name="group_add"),

]

2. views视图逻辑处理

import json

from django.contrib.auth.models import Group, Permission
from django.views import View
from django.http import Http404
from django.db.models import Count
from django.shortcuts import render
from django.contrib.auth.mixins import PermissionRequiredMixin, LoginRequiredMixin

from news import models
from users.models import Users
from admin.forms import ArticleEditForm, DocEditForm, CourseEditForm
from utils.page.per_page import get_page_data
from utils.res_code.res_code import Code, error_map
from utils.res_code.json_function import to_json_data


# 用户组管理展示
class GroupIndexView(PermissionRequiredMixin,View):
    """
    permission group show  page
    route:/admin/group/
    permissions:view_group
    """
    permission_required = ("group.view_group", )
    raise_exception = True

    def get(self, request):
        groups = Group.objects.values("id", "name").annotate(user_num=Count("user")).filter().order_by(
            "user_num")
        data = {
   
            "groups": groups
        }
        return render(request, "admin/group/group_index.html", context=data)

3. js前端逻辑处理

$(function () {
   

    //用户组删除
    let $delBtn = $(".btn-del");
    $delBtn.click(function () {
   
        let _this = this;
        let sGroupId = $(this).data("group-id");
        let sGroupName = $(this).data("group-name");
        fAlert.alertConfirm({
   
            title: "确定删除"+ sGroupName + "权限组吗？",
            type: "error",
            confirmButtonText: "确认删除",
            cancelButtonText: "取消",
            confirmCallback: function confirmCallback() {
   
                $.ajax({
   
                    url: "/admin/group/edit/" + sGroupId + '/',
                    type: "DELETE",
                    dataType: "json",
                })
                    .done(function (res) {
   
                        if (res.errno === "200") {
   
                            message.showSuccess("成功删除" + sGroupName +"权限组！");
                            $(_this).parents("tr").remove()
                        } else {
   
                            swal.showInputError("删除失败：" + res.errmsg);
                        }
                    })
                    .fail(function () {
   
                        alert("服务器超时，请重试！")
                    })


            }
        })


    });



    // 获取cookie
    function getCookie(name) {
   
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
   
            let cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
   
                let cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
   
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function csrfSafeMethod(method) {
   
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    // 添加token到request中
    $.ajaxSetup({
   
        beforeSend: function (xhr, settings) {
   
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
   
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));