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

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

一、分析

1. 业务流程

1.用户展示

1. 业务流程

   • 从数据库中查找到数据填充到前端

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

   • 请求方式：GET

   • 请求地址：/admin/user/

   • 权限：view_users

   • 请求参数：无

2. 用户删除功能

1. 业务流程

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

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

   • 请求方式：DELETE

   • 请求地址：/admin/user/edit/<int:user_id>/

   • 权限：delete_users

   • 请求参数：

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

3. 用户修改功能

1. 业务流程

   • 判断用户分组、用户是否是超级管理员、是否能登录后台、是否是可登录用户

   • 判断前端传来的用户分组是否在数据库里面

   • 将数据保存到数据库中

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

   • 请求方式：PUT

   • 请求地址：/admin/user/edit/<int:user_id>/

   • 权限：change_user

   • 请求参数：

     参数名	类型	是否必传	备注
     is_staff	boolean	必传	请求体里
     is_superuser	boolean	必传	请求体里
     is_active	boolean	必传	请求体里
     int	必传	请求体里

二、用户展示功能实现

1. urls配置

from django.urls import path

from admin import views

app_name = "admin"

urlpatterns = [

    path("user/", views.UserIndexView.as_view(), name="user"),
    path("user/edit/<int:user_id>/", views.UserEditView.as_view(), name="user_edit"),
  

]

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 UserIndexView(PermissionRequiredMixin,View):
    """
    user show page
    route:/admin/user/
    permissions:view_users
    """
    permission_required = ("users.view_users", )
    raise_exception = True

    def get(self,request):
        users = Users.objects.only("username","is_staff","is_superuser","groups__name").filter(is_active=True)
        return render(request,"admin/user/user_index.html",locals())

3. js前端逻辑实现

js里面使用到了两个js插件 fsweetalert.js 和 message.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",