[django项目] 后台用户管理功能

最新推荐文章于 2024-05-04 15:50:19 发布
最新推荐文章于 2024-05-04 15:50:19 发布
阅读量145 收藏
点赞数
文章标签： django
原文链接：https://blog.csdn.net/makesomethings/article/details/100638484
版权
原创

[django项目] 后台用户管理功能

2019-09-08 21:00:05 阅读数 8 更多
分类专栏： django笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/makesomethings/article/details/100638484

用户管理功能

用户管理功能也是我们在OA系统中最常见的, 它可以让管理员具有: 查询,修改,删除用户的能力, 那么本次我们就来实现后台功能上的用户管理功能

I. 业务功能分析

用户管理就是对用户的增删改查, 由于我们已经有了注册功能, 所以增加用户就不需要额外写出来了, 新增管理员可以直接使用命令增加

可以把更多的专注点放在其他功能(删改查)的实现上

功能分析:

  • 用户列表, 展示用户的个人信息, 并具有删除修改用户的接口
  • 修改用户, 进入到用户详情界面, 修改的数据会被应用到后台数据库
  • 删除用户, 逻辑删除, 用户的信息对我们来说是非常重要的, 不可以真删除

大数据时代, 最重要的就是用户数据

II. 用户列表

1>业务流程分析

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

2>接口设计

  1. 接口说明：
类目说明
请求方法GET
url定义/admin/users/
参数格式查询参数
  1. 参数说明：
参数名类型是否必须描述
username字符串否要查询的用户名
group整数否要查询的group_id
is_staff整数否用户是否员工
is_superuser整数否父菜单id
page整数否页码

  1. 返回数据

    返回的是一个html页面

3>后端代码

3.1>视图
# 在myadmin/views.py下创建如下视图
class UserListView(View):
    """
    用户列表视图
    """

<span class="token keyword">def</span> <span class="token function">get</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> request<span class="token punctuation">)</span><span class="token punctuation">:</span>
    user_queryset <span class="token operator">=</span> User<span class="token punctuation">.</span>objects<span class="token punctuation">.</span>only<span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token string">'is_active'</span><span class="token punctuation">,</span> <span class="token string">'mobile'</span><span class="token punctuation">,</span> <span class="token string">'is_staff'</span><span class="token punctuation">,</span> <span class="token string">'is_superuser'</span><span class="token punctuation">)</span>
    groups <span class="token operator">=</span> Group<span class="token punctuation">.</span>objects<span class="token punctuation">.</span>only<span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token builtin">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    query_dict <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token comment"># 检索</span>
    groups__id <span class="token operator">=</span> request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'group'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> groups__id<span class="token punctuation">:</span>
        <span class="token keyword">try</span><span class="token punctuation">:</span>
            groups__id <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>groups__id<span class="token punctuation">)</span>
            query_dict<span class="token punctuation">[</span><span class="token string">'groups__id'</span><span class="token punctuation">]</span> <span class="token operator">=</span> groups__id
        <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
            <span class="token keyword">pass</span>

    is_staff <span class="token operator">=</span> request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'is_staff'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> is_staff <span class="token operator">==</span> <span class="token string">'0'</span><span class="token punctuation">:</span>
        query_dict<span class="token punctuation">[</span><span class="token string">'is_staff'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">False</span>
    <span class="token keyword">if</span> is_staff <span class="token operator">==</span> <span class="token string">'1'</span><span class="token punctuation">:</span>
        query_dict<span class="token punctuation">[</span><span class="token string">'is_staff'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">True</span>

    is_superuser <span class="token operator">=</span> request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'is_superuser'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> is_superuser <span class="token operator">==</span> <span class="token string">'0'</span><span class="token punctuation">:</span>
        query_dict<span class="token punctuation">[</span><span class="token string">'is_superuser'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">False</span>
    <span class="token keyword">if</span> is_superuser <span class="token operator">==</span> <span class="token string">'1'</span><span class="token punctuation">:</span>
        query_dict<span class="token punctuation">[</span><span class="token string">'is_superuser'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">True</span>

    username <span class="token operator">=</span> request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span>

    <span class="token keyword">if</span> username<span class="token punctuation">:</span>
        query_dict<span class="token punctuation">[</span><span class="token string">'username'</span><span class="token punctuation">]</span> <span class="token operator">=</span> username

    <span class="token keyword">try</span><span class="token punctuation">:</span>
        page <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'page'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
        page <span class="token operator">=</span> <span class="token number">1</span>

    paginater <span class="token operator">=</span> Paginator<span class="token punctuation">(</span>user_queryset<span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span><span class="token operator">**</span>query_dict<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>

    users <span class="token operator">=</span> paginater<span class="token punctuation">.</span>get_page<span class="token punctuation">(</span>page<span class="token punctuation">)</span>
    context <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token string">'users'</span><span class="token punctuation">:</span> users<span class="token punctuation">,</span>
        <span class="token string">'groups'</span><span class="token punctuation">:</span> groups
    <span class="token punctuation">}</span>
    context<span class="token punctuation">.</span>update<span class="token punctuation">(</span>query_dict<span class="token punctuation">)</span>
    <span class="token keyword">return</span> render<span class="token punctuation">(</span>request<span class="token punctuation">,</span> <span class="token string">'myadmin/user/user_list.html'</span><span class="token punctuation">,</span> context<span class="token operator">=</span>context<span class="token punctuation">)</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
3.2>路由
# 在myadmin/urls.py中添加如下视图
path('users/', views.UsersView.as_view(), name='user_list')

 
 

 
 
  • 1
  • 2

4>前端代码

4.1>html

既然我们之前已经做过了分页, 那么就可以拿到之前在news中创建的分页过滤器来使用, 也就是page_bar

<!-- 创建 templates/myadmin/user/user_list.html 模板-->
{% extends 'admin/content_base.html' %}
{% load static %}
{% load news_customer_filters %}<!-- 加载之前的分页过滤器 -->
{% block page_header %}
    系统设置
{% endblock %}
{% block page_option %}
    用户管理
{% endblock %}
{% block content %}
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">用户列表</h3>
        </div>
        <!-- /.box-header -->

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-body<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline user-query<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>用户名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ username }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>分组<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>所有<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                        {% for group in groups %}

                            &lt;option {% if groups__id == group.id %}selected{% endif %}
                                    value="{{ group.id }}"&gt;{{ group.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>

                        {% endfor %}
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>是否员工<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>is_staff<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>所有<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>

                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">{%</span> <span class="token attr-name">if</span> <span class="token attr-name">is_staff</span> <span class="token attr-name">is</span> <span class="token attr-name">True</span> <span class="token attr-name">%}selected{%</span> <span class="token attr-name">endif</span> <span class="token attr-name">%}</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>是<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">{%</span> <span class="token attr-name">if</span> <span class="token attr-name">is_staff</span> <span class="token attr-name">is</span> <span class="token attr-name">False</span> <span class="token attr-name">%}selected{%</span> <span class="token attr-name">endif</span> <span class="token attr-name">%}</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>否<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>是否管理员<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>is_superuser<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>所有<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">{%</span> <span class="token attr-name">if</span> <span class="token attr-name">is_superuser</span> <span class="token attr-name">is</span> <span class="token attr-name">True</span> <span class="token attr-name">%}selected{%</span> <span class="token attr-name">endif</span> <span class="token attr-name">%}</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>是<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">{%</span> <span class="token attr-name">if</span> <span class="token attr-name">is_superuser</span> <span class="token attr-name">is</span> <span class="token attr-name">False</span> <span class="token attr-name">%}selected{%</span> <span class="token attr-name">endif</span> <span class="token attr-name">%}</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>否<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-info query<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>查询<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-default reset<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table table-bordered<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>用户名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>电话<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>是否可用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>是否员工<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>是否管理员<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
            {% for user in users %}
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 40px</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">data-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ user.id }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ forloop.counter }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{{ user.username }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{{ user.mobile }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{% if user.is_active %}是{% else %}否{% endif %}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{% if user.is_staff %}是{% else %}否{% endif %}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>{% if user.is_superuser %}是{% else %}否{% endif %}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>

            {% endfor %}

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>


    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 分页 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-footer clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dataTables_info<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>example2_info<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>status<span class="token punctuation">"</span></span> <span class="token attr-name">aria-live</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>总共：{{ users.paginator.count }}条 第{{ users.start_index }}到{{ users.end_index }}条
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pagination pagination-sm no-margin pull-right<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    &lt;li {% if not users.has_previous %}class="disabled"{% endif %} data-page="{{ users.number|add:-1 }}"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>«<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                {% for n in users|page_bar %}
                    &lt;li {% if n == users.number %}class="active" {% endif %} data-page="{{ n }}"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                {% endfor %}
                    &lt;li {% if not users.has_next %}class="disabled"{% endif %} data-page="{{ users.number|add:1 }}"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>»<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

{% endblock %}
{% block script %}
<script src="{% static ‘js/myadmin/user/user_list.js’ %}"></script>
{% endblock %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
4.2>js
// 创建static/js/myadmin/user/user.js
$(() => {

<span class="token keyword">let</span> $queryForm <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form.user-query'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// 查询表单</span>

<span class="token comment">// 分页</span>
<span class="token keyword">let</span> $pageLi <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'ul.pagination li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token string">'.active'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token string">'.disabled'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$pageLi<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> $<span class="token keyword">this</span> <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    $
        <span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.sidebar-menu li.active a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> $queryForm<span class="token punctuation">.</span><span class="token function">serialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'&amp;page='</span> <span class="token operator">+</span> $<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'page'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'GET'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span><span class="token string">'服务器超时，请重试！'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 查询</span>
<span class="token keyword">let</span> $queryBtn <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form.user-query button.query'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 查询按钮</span>
<span class="token keyword">let</span> $resetBtn <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form.user-query button.reset'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 重置按钮</span>

$queryBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>

    $
        <span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.sidebar-menu li.active a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> $queryForm<span class="token punctuation">.</span><span class="token function">serialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'GET'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span><span class="token string">'服务器超时，请重试！'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 重置</span>
$resetBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 让表单重置</span>
    $queryForm<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    $
        <span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.sidebar-menu li.active a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'GET'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span><span class="token string">'服务器超时，请重试！'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 用户详情</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'tr'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span><span class="token string">'td:first'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">(</span>response<span class="token punctuation">,</span> status<span class="token punctuation">,</span> xhr<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">!==</span> <span class="token string">'success'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span><span class="token string">'服务器超时，请重试！'</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75

III. 用户详情页面

对用户详情页的设计是, 点击用户的序号, 就会在局部动态渲染出详情页.

1>接口设计

1.1>接口说明：
类目说明
请求方法GET
url定义/admin/user/<int:user_id>/
参数格式路径参数
1.2>参数说明：
参数名类型是否必须描述
user_id整数是要查询的用户id
1.3>返回数据

html

2>后端代码

2.1>视图
# 在myadmin/views.py中添加如下视图

class UserUpdateView(View):
“”"
用户更新视图
url:/admin/user/<int:user_id>
“”"
def get(self, request, user_id):
# 通过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})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
2.2>路由
# 在myadmin/urls.py中添加如下路由
path('user/<int:user_id>/', views.UserUpdateView.as_view(), name='user_update')

 
 

 
 
  • 1
  • 2
2.3>表单
# 在myadmin/forms.py中定义如下表单
class UserModelForm(forms.ModelForm):
    class Meta:
        model = User    # 拿到用户模型
        # 获取用户字段集
        fields = ['username', 'mobile', 'is_staff', 'is_superuser', 'is_active', 'groups']

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3>前端代码

3.1>html
<!-- 新建 myadmin/user/user_detail.html 模板 -->
{% extends 'myadmin/content_base.html' %}
{% load static %}
{% load admin_customer_tags %}
{% block page_header %}
    系统设置
{% endblock %}
{% block page_option %}
    用户管理
{% endblock %}
{% block content %}
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">用户详情</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <div class="box-body">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <form class="form-horizontal">
                        {% csrf_token %}

                    {% for field in form %}
                        {% if field.name in 'is_staff,is_active,is_superuser' %}
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-offset-2 col-sm-10<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ field.id_for_label }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ field }}{{ field.label }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                        {% else %}
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group {% if field.errors %}has-error{% endif %}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ field.id_for_label }}<span class="token punctuation">"</span></span>
                                       <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-2 control-label<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ field.label }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>

                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-10<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    {% for error in field.errors %}
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>control-label<span class="token punctuation">"</span></span>
                                               <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ field.id_for_label }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ error }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
                                    {% endfor %}
                                    {% add_class field 'form-control' %}
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                        {% endif %}
                    {% endfor %}


                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-default back<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>返回<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-primary pull-right save
                                             <span class="token punctuation">"</span></span> <span class="token attr-name">data-url</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>myadmin:user_update<span class="token punctuation">'</span> form.instance.id %}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>


    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

{% endblock %}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

写完html之后可以打开看一下:

[外链图片转存失败(img-ciwD9dEp-1567947553459)(django%E9%A1%B9%E7%9B%AE-%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86.assets/1567685861533.png)]

3.2>js代码

但是这个页面还是有点问题, 当我们点返回的时候没有响应(保存到后面再说), 那么我们就要使用js来解决这个问题

// 创建myadmin/user/user_detail.js中并添加如下代码
$(() => {
    // 1. 点击返回
    // 回到用户列表页面，触发点击用户管理菜单
    $('.box-footer button.back').click(() => {
        $('#content').load(
            $('.sidebar-menu li.active a').data('url'),
            (response, status, xhr) => {
                if (status !== 'success') {
                    message.showError('服务器超时，请重试！')
                }
            }
        );
    });

});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

记得在user_detail.html中, 引用

{% block script %}
    <script src="{% static 'js/myadmin/user/user_detail.js'%}"></script>
{% endblock %}

 
 

 
 
  • 1
  • 2
  • 3

写代码, 写一步调试一步, 有个循序渐进的过程

IIII. 修改用户

1>接口设计

  1. 接口说明：
类目说明
请求方法PUT
url定义/admin/user/<int:user_id>
参数格式路径参数+表单参数
  1. 参数说明：
参数名类型是否必须描述
user_id整数是用户id
username字符串是用户名
mobile字符串是手机号码
is_staff字符串否是否职员
is_superuser字符串否是否超级用户
is_active字符串否渲染图标类名

  1. 返回数据

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

   
   
    
   
   
    • 1
    • 2
    • 3
    • 4
    • 5

    如果有错误，返回html表单

2>后端代码

2.1>视图
# 在admin/views.py中的UserUpdateView视图中添加put方法
class UserUpdateView(View):
    """
    用户更新视图
    url:/admin/user/<int:user_id>
    """
    def get(self, request, user_id):
        # 通过id获取到指定用户对象
        user = User.objects.filter(id=user_id).first()
        if user:
            form = UserModelForm(instance=user)
        else:
            return json_response(errno=Code.NODATA, errmsg='没有此用户！')
        return render(request, 'myadmin/user/user_detail.html', context={'form': form})

<span class="token keyword">def</span> <span class="token function">put</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> request<span class="token punctuation">,</span> user_id<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token comment"># 1. 拿到要修改的用户对象</span>
    user <span class="token operator">=</span> User<span class="token punctuation">.</span>objects<span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span><span class="token builtin">id</span><span class="token operator">=</span>user_id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment"># 1.1 判断用户是否存在</span>
    <span class="token keyword">if</span> <span class="token operator">not</span> user<span class="token punctuation">:</span>
        <span class="token keyword">return</span> json_response<span class="token punctuation">(</span>errno<span class="token operator">=</span>Code<span class="token punctuation">.</span>NODATA<span class="token punctuation">,</span> errmsg<span class="token operator">=</span><span class="token string">'没有此用户!'</span><span class="token punctuation">)</span>
    <span class="token comment"># 2. 拿到前端传递的函数</span>
    put_data <span class="token operator">=</span> QueryDict<span class="token punctuation">(</span>request<span class="token punctuation">.</span>body<span class="token punctuation">)</span>
    <span class="token comment"># 3. 校验参数</span>
    <span class="token comment"># 3.1 创建表单对象</span>
    form <span class="token operator">=</span> UserModelForm<span class="token punctuation">(</span>put_data<span class="token punctuation">,</span> instance<span class="token operator">=</span>user<span class="token punctuation">)</span>
    <span class="token comment"># `UserModelForm`第一个参数接收页面数据, 第二个参数放上用户标识,用来寻找用户.</span>
    <span class="token comment"># 找到后会自动比对不同的地方并修改</span>
    <span class="token keyword">if</span> form<span class="token punctuation">.</span>is_valid<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
        <span class="token comment"># 4. 如果成功, 保存数据</span>
        form<span class="token punctuation">.</span>save<span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> json_response<span class="token punctuation">(</span>errmsg<span class="token operator">=</span><span class="token string">'用户修改成功!'</span><span class="token punctuation">)</span>
    <span class="token keyword">else</span><span class="token punctuation">:</span>
        <span class="token comment"># 5. 若不成功, 返回渲染了错误信息的表单页面</span>
        <span class="token keyword">return</span> render<span class="token punctuation">(</span>request<span class="token punctuation">,</span> <span class="token string">'myadmin/user/user_detail.html'</span><span class="token punctuation">,</span> context<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'form'</span><span class="token punctuation">:</span> form<span class="token punctuation">}</span><span class="token punctuation">)</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

3>前端代码

3.1>js
// 新建 js/admin/user/user_detail.js 注意在user_detail.html中引入
$(() => {
    // 1. 点击返回
    // 回到用户列表页面，触发点击用户管理菜单
    $('.box-footer button.back').click(() => {
        $('#content').load(
            $('.sidebar-menu li.active a').data('url'),
            (response, status, xhr) => {
                if (status !== 'success') {
                    message.showError('服务器超时，请重试！')
                }
            }
        );
    });
    // 2. 点击保存
    $('.box-footer button.save').click(function () {
        // 发送ajax
        $
            .ajax({
                url: $(this).data('url'),
                data: $('form').serialize(), // 可以拿到当前页面表单的数据,会自动拼接
                type: 'PUT'
            })
            .done((res) => {
                if (res.errno === '0') {
                    // 等于0说明发送成功, 显示消息
                    message.showSuccess(res.errmsg);
                    // 然后跳转到用户列表
                    $('#content').load(
                        $('.sidebar-menu li.active a').data('url'),
                        (response, status, xhr) => {
                            if (status !== 'success') {
                                message.showError('服务器超时,请重试!')
                            }
                        }
                    );
                } else {
                    // 发送失败就替换为渲染了错误信息的html
                    $('#content').html(res)
                }
            })
            .fail(() => {
                message.showError('服务器超时,请重试!')
            })
    })
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

注意新增的js代码要在前端模板user_detail.html中引用

{% block script %}
    <script src="{% static 'js/myadmin/user/user_detail.js'%}"></script>
{% endblock %}

 
 

 
 
  • 1
  • 2
  • 3

用户管理的功能到此为止, 之后我们带大家来研究编写权限分组的方法

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                </div>
</article>
<div class="postTime">
    <p class="article-bar-bottom"></p>
    <span>
        文章最后发布于: 2019年09月08日 21:00:05        </span>
</div>
startoone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django后台站点管理
03-30
后台admin模块，需要后台管理的内容有：文章、分类、作者、评论、自定义的user用户； # 2.登录和注册模块； # 3.前端页面的数据展示和路由的配置； # 项目和功能分析 # 1.文章的呈现：包括文章的标题、内容、作者、...
Django实现用户管理
champion
05-10 3915
Django实现用户管理前言第一节 - 自定义模版和静态文件1. 自定义模版位置和静态文件未完待续。。。 Django实现简单博客系统 建议先看文章列表中的《Django实现简单博客系统》，毕竟得一步一步来嘛。当然有过 Django 开发经验的，那就不说了。 前言 在 《Django实现简单博客系统》中，我实现了一个简单的博客系统，可以增加修改用户，可以增改文章，并且可以让别人看到我的博客。但是这么简单的东西怎么能体现出来我的技术呢，哈哈，必须得给他上难度。所以本文打算设计一个用户模块，允许用户注册登陆
基于Django的用户管理系统
Ezra1991的博客
08-13 3782
基于MVC架构。 view代码处理url请求，并调用model代码返回数据到页面 template代码显示页面 配置urls中view和url处理关系 model代码读取数据库数据 template代码控制显示数据 1. models.py #encoding: utf-8 import json from django.db import models from...
vue分页组件table-pagebar
大灰狼的小绵羊哥哥的博客
08-24 2952
之前一直接触都是原始的前端模型，jquery+bootstrap，冗杂的dom操作，繁琐的更新绑定。接触vue后，对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建，由于之前的工作主要是基于java的服务端开发工作，对前端框架和组件的理解，不够深入，借此来记录在前端框架使用和构建中的点点滴滴。 　　此分页组件参照于bootstrap-datatable底部分页开发完成，相
Django后台项目之用户管理功能开发流程
秋叶夏风的博客
07-25 528
项目功能开发流程 1 先写列表页（加载出来数据就行） ob = User_vip.objects.filter(is_del='004001').order_by('-cts') 2 写添加功能 2.1 创建addOrDoadd视图方法 2.2 添加访问addOrDoadd的路由 2.3 在index.html页面吧添加的按钮的链接不全 <a style="color:#fff;" hre...
后端分页插件 pageBar
许诗宇的博客
11-02 2610
这个pagebar工具，是我在网上找到两个分页插件，合并修改而成的 下载地址为 https://gitee.com/xushiyu/java_web_tools/tree/master/src/javaweb/pagebar 首先本插件共分三个部分，PageBar.java  PageBar.jsp   PageBar.css  java文件是一个java类，封装了记录的总条数，当前页，每页...
Python+Django+VUE后台管理系统
01-19
此Python+Django+VUE后台管理系统。包括的功能是用户管理----用户组管理的 增删该查功能。其中mysql数据库表的信息user_group.sql，也放到项目文件夹里了。
Django入门实战项目——路灯后台管理系统
03-14
管理员通过MySQL数据库添加管理员操作添加管理员用户，然后管理员通过Web后台网页登录界面进行管理员账号登陆，进入主界面后可以从左侧导航栏选择页面功能，页面功能包含首页信息、用户管理、路灯管理、故障管理...
基于django的后台管理.zip
04-26
django Django是一个高级的Python Web框架，可以快速开发安全和可维护的网站。由经验丰富的开发者构建，Django负责处理网站...为最终用户设计较好的管理界面； 4. URL 设计； 5. 设计者友好的模板语言； 6. 缓存系统。
[Django项目案例]搭建用户与商品后台管理系统
热门推荐
kzl_knight的博客
05-22 1万+
[Django项目案例]搭建用户与商品后台管理系统1 搭建流程1.1 创建Django项目1.2 配置数据库1.2 创建app并载入Settings1.3 配置时区与静态文件夹1.4 定义模型类1.4.1 字段分析1.4.2 定义类对象1.5 数据迁移1.6 创建测试数据1.7 Admin注册模型类1.8 创建超级管理员1.9 登录后台管理2 Admin首页定制2.1 app名字与表名配置2.2 ...
Django项目学习之添加搜索引擎(elasticsearch)
weixin_43129747的博客
06-26 483
zxz
Django orm高级用法以及查询优化
m0_71660867的博客
04-29 1673
Django orm高级用法以及查询优化
Django之创建Model以及后台管理
m0_62155641的博客
04-28 550
二，在App.models.py中创建类，以下是示例。若想显示中文，则可以 在setting.py中修改。三，在App.admin.py中添加如下代码。
Django之cookie和session
最新发布
m0_62155641的博客
05-04 469
【代码】Django之cookie和session。
Django之搭配内网穿透
m0_62155641的博客
04-28 508
二，开启8087的内网穿透。一，安装coplar。
django后台管理HTMl
09-10
首先需要在项目的 settings.py 文件中启用后台管理功能，找到 `INSTALLED_APPS` 列表，在其中添加 `'django.contrib.admin'`。 然后，在项目的 urls.py 文件中，导入 `admin` 模块，并将其添加到 URL patterns 中。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值