django项目--用户管理功能

用户管理功能

一、业务功能分析

1. 业务需求分析

用户的增删改查，权限分组的控制。

2.功能分析

• 用户列表
• 修改用户
• 删除用户

二、用户列表

1. 业务流程分析

• 接收参数
• 校验参数
• 查询数据
• 分页

2.接口设计

1. 接口说明：

类目	说明
请求方法	GET
url定义	/admin/users/
参数格式	查询参数

2. 参数说明：

参数名	类型	是否必须	描述
username	字符串	否	要查询的用户名
group	整数	否	要查询的group_id
is_staff	整数	否	用户是否员工
is_superuser	整数	否	父菜单id
page	整数	否	页码

3. 返回数据

   html

3.后端代码

1. 视图

   # 在myadmin/views.py下创建如下视图
   class UserListView(View):
       """
       用户列表视图
       """
   
       def get(self, request):
           user_queryset = User.objects.only('username', 'is_active', 'mobile', 'is_staff', 'is_superuser')
           groups = Group.objects.only('name').all()
           query_dict = {}
           # 检索
           groups__id = request.GET.get('group')
           if groups__id:
               try:
                   group_id = int(groups__id)
                   query_dict['groups__id'] = groups__id
               except Exception as e:
                   pass
   
           is_staff = request.GET.get('is_staff')
           if is_staff == '0':
               query_dict['is_staff'] = False
           if is_staff == '1':
               query_dict['is_staff'] = True
   
           is_superuser = request.GET.get('is_superuser')
           if is_superuser == '0':
               query_dict['is_superuser'] = False
           if is_superuser == '1':
               query_dict['is_superuser'] = True
   
           username = request.GET.get('username')
   
           if username:
               query_dict['username'] = username
   
           try:
               page = int(request.GET.get('page', 1))
           except Exception as e:
               page = 1
   
           paginater = Paginator(user_queryset.filter(**query_dict), 2)
   
           users = paginater.get_page(page)
           context = {
               'users': users,
               'groups': groups
           }
           context.update(query_dict)
           return render(request, 'myadmin/user/user_list.html', context=context)
   

2. 路由

   # 在myadmin/urls.py中添加如下视图
   path('users/', views.UsersView.as_view(), name='user_list')
   

4.前端代码

1. html

   
   {% extends 'admin/content_base.html' %}
   {% load static %}
   {% load news_customer_filters %}
   {% block page_header %}
       系统设置
   {% endblock %}
   {% block page_option %}
       用户管理
   {% endblock %}
   {% block content %}
       
   
           
   
               
   用户列表
           
           
   
           
   
               
   
                   
   
                       
   
                           用户名
                           
                       
                       
   
                           分组
                           
                               所有
                               {% for group in groups %}
   
                                   {{ group.name }}
   
                               {% endfor %}
                           
                       
                       
   
                           是否员工
                           
                               所有
   
                               是
                               否
                           
                       
                       
   
                           是否管理员
                           
                               所有
                               是
                               否
                           
                       
                       查询
                       重置
                   
               
   
               
                   {% for user in users %}
                       
   
                   {% endfor %}
   
                   
   
                   
   
                   
   
                       
   #
                       
   用户名
                       
   电话
                       
   是否可用
                       
   是否员工
                       
   是否管理员
                   
   
                           
   {{ forloop.counter }}
                           
   {{ user.username }}
                           
   {{ user.mobile }}
                           
   {% if user.is_active %}是{% else %}否{% endif %}
                           
   {% if user.is_staff %}是{% else %}否{% endif %}
                           
   {% if user.is_superuser %}是{% else %}否{% endif %}
   
                       
               
   
   
           
           
           
   
               
   
                   
   
                       
   总共：{{ users.paginator.count }}条 第{{ users.start_index }}到{{ users.end_index }}条
                       
                   
                   
   
                       
   
                           
   «
                       {% for n in users|page_bar %}
                           
   {{ n }}
                       {% endfor %}
                           
   »
                       
                   
               
   
           
   
       
   {% endblock %}
   {% block script %}
       
   {% endblock %}
   
   

2. js

   // 创建static/js/myadmin/user/user.js
   $(() => {
       let $queryForm = $('form.user-query');       // 查询表单
       let $queryBtn = $('form.user-query button.query');    // 查询按钮
       let $resetBtn = $('form.user-query button.reset');    // 重置按钮
       // 查询
       $queryBtn.click(() => {
   
           $
               .ajax({
                   url: $('.sidebar-menu li.active a').data('url'),
                   data: $queryForm.serialize(),
                   type: 'GET'
               })
               .done((res) => {
                   $('#content').html(res)
               })
               .fail(() => {
                   message.showError('服务器超时，请重试！')
               })
       });
   
       // 重置
       $resetBtn.click(() => {
           $queryForm[0].reset();
           $
               .ajax({
                   url: $('.sidebar-menu li.active a').data('url'),
                   type: 'GET'
               })
               .done((res) => {
                   $('#content').html(res)
               })
               .fail(() => {
                   message.showError('服务器超时，请重试！')
               })
       });
   
       // 分页 给非
       let $pageLi = $('ul.pagination li').not('.active').not('.disabled');
       $pageLi.click(function () {
           let $this = $(this);
           $.each($queryForm.serializeArray(), function () {
               queryData[this.name] = this.value
           });
           queryData['page'] = $this.data('page')
   
           $
               .ajax({
                   url: $('.sidebar-menu li.active a').data('url'),
                   data: queryData,
                   type: 'GET'
               })
               .done((res) => {
                   $('#content').html(res)
               })
               .fail(() => {
                   message.showError('服务器超时，请重试！')
               })
   
       })
   });
   

三、用户详情页面

1.接口设计

1. 接口说明：

类目	说明
请求方法	GET
url定义	/admin/user//
参数格式	路径参数

2. 参数说明：

参数名	类型	是否必须	描述
user_id	整数	是	要查询的用户id

3. 返回数据

   html

2. 后端代码

1. 视图

   # 在myadmin/views.py中添加如下视图
   
   class UserUpdateView(View):
       """
       用户更新视图
       url:/admin/user/
       """
       def get(self, request, user_id):
           user = User.objects.filter(id=user_id).first()
           if user:
               form = UserModelForm(instance=user)
           else:
               form = UserModelForm()
           return render(request, 'myadmin/user/user_detail.html', context={'form': form})
   

2. 路由

   # 在myadmin/urls.py中添加如下路由
   path('user//', views.UserUpdateView.as_view(), name='user_update')
   

3. 表单

   # 在myadmin/forms.py中定义如下表单
   class UserModelForm(forms.ModelForm):
   
       class Meta:
           model = User
           fields = ['username', 'mobile', 'is_staff', 'is_superuser', 'is_active', 'groups']
   

3.前端代码

1. html

   
   {% extends 'myadmin/content_base.html' %}
   {% load static %}
   {% load admin_customer_tags %}
   {% block page_header %}
       系统设置
   {% endblock %}
   {% block page_option %}
       用户管理
   {% endblock %}
   {% block content %}
       
   
           
   
               
   用户详情
           
           
           
           
   
               
   
                   
   
                   
   
                       
   
                           {% csrf_token %}
   
                           {% for field in form %}
                               {% if field.name in 'is_staff,is_active,is_superuser' %}
                                   
   
   
                                       
   
   
                                           
   
                                               {{ field }}{{ field.label }}
                                           
                                       
   
                                   
                               {% else %}
                                   
   
   
                                       {{ field.label }}
   
                                       
   
                                           {% for error in field.errors %}
                                               {{ error }}
                                           {% endfor %}
                                           {% add_class field 'form-control' %}
                                       
                                   
                               {% endif %}
                           {% endfor %}
   
   
                       
                   
                   
   
               
           
           
   
   
                       返回
                       保存
   
   
           
       
   {% endblock %}
   

2. js代码

   // 在 admin/user/user.js中添加如下代码
   
   ...
       // 用户详情
       $('tr').each(function () {
           $(this).children('td:first').click(function () {
               $('#content').load(
                   $(this).data('url'),
                   (response, status, xhr) => {
                       if (status !== 'success') {
                           message.showError('服务器超时，请重试！')
                       }
                   }
               );
           })
       });
   ...
   // 注意在user_list中在相应的tr中添加data-url的属性
   
   

四、修改用户

1.接口设计

1. 接口说明：

类目	说明
请求方法	PUT
url定义	/admin/user/
参数格式	路径参数+表单参数

2. 参数说明：

参数名	类型	是否必须	描述
user_id	整数	是	用户id
username	字符串	是	用户名
mobile	字符串	是	手机号码
is_staff	字符串	否	是否职员
is_superuser	字符串	否	是否超级用户
is_active	字符串	否	渲染图标类名

3. 返回数据

   # 添加正常返回json数据
   {
   "errno": "0",
   "errmsg": "用户修改成功！"
   }
   

   如果有错误，返回html表单

2.后端代码

1. 视图

   # 在admin/views.py中的UserUpdateView视图中添加put方法
   class UserUpdateView(View):
       """
       用户更新视图
       url:/admin/user/
       """
       def get(self, request, user_id):
           user = User.objects.filter(id=user_id).first()
           if user:
               form = UserModelForm(instance=user)
           else:
               form = UserModelForm()
           return render(request, 'admin/user/user_detail.html', context={'form': form})
   
       def put(self, request, user_id):
           user = User.objects.filter(id=user_id).first()
           put = QueryDict(request.body)
           if user:
               form = UserModelForm(put, instance=user)
           else:
               form = UserModelForm()
           if form.is_valid():
               form.save()
               return json_response()
           else:
               return render(request, 'admin/user/user_detail.html', context={'form': form})
   

3.前端代码

1. js

   // 新建 js/admin/user/user_detail.js 注意在user_detail.html中引入
   $(() => {
       $('.box-footer button.back').click(() => {
           $('#content').load(
               $('.sidebar-menu li.active a').data('url'),
               (response, status, xhr) => {
                   if (status !== 'success') {
                       message.showError('服务器超时，请重试！')
                   }
               }
           );
       });
   
       $('.box-footer button.save').click(function () {
           $
               .ajax({
                   url: $(this).data('url'),
                   data: $('form').serialize(),
                   type: 'PUT'
               })
               .done((res) => {
                   if (res.errno === '0') {
                       message.showSuccess('修改用户成功！');
                       $('#content').load(
                           $('.sidebar-menu li.active a').data('url'),
                           (response, status, xhr) => {
                               if (status !== 'success') {
                                   message.showError('服务器超时，请重试！')
                               }
                           }
                       );
                   }else {
                       $('#content').html(res)
                   }
               })
               .fail((res)=>{
                   message.showError('服务器超时，请重试！')
               })
       })
   
   });