用戶管理功能
一、業(yè)務(wù)功能分析
1. 業(yè)務(wù)需求分析
用戶的增刪改查，權(quán)限分組的控制。
2.功能分析
- 用戶列表
- 修改用戶
- 刪除用戶
二真友、用戶列表
1. 業(yè)務(wù)流程分析
- 接收參數(shù)
- 校驗參數(shù)
- 查詢數(shù)據(jù)
- 分頁
2.接口設(shè)計
- 接口說明：
| 類目 | 說明 |
|---|---|
| 請求方法 | GET |
| url定義 | /admin/users/ |
| 參數(shù)格式 | 查詢參數(shù) |
- 參數(shù)說明：
| 參數(shù)名 | 類型 | 是否必須 | 描述 |
|---|---|---|---|
| username | 字符串 | 否 | 要查詢的用戶名 |
| group | 整數(shù) | 否 | 要查詢的group_id |
| is_staff | 整數(shù) | 否 | 用戶是否員工 |
| is_superuser | 整數(shù) | 否 | 父菜單id |
| page | 整數(shù) | 否 | 頁碼 |
-
返回數(shù)據(jù)
html
3.后端代碼
-
視圖
# 在myadmin/views.py下創(chuàng)建如下視圖 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) -
路由
# 在myadmin/urls.py中添加如下視圖 path('users/', views.UsersView.as_view(), name='user_list')
4.前端代碼
-
html
<!-- 創(chuàng)建 templates/myadmin/user/user_list.html 模板--> {% extends 'admin/content_base.html' %} {% load static %} {% load news_customer_filters %} {% block page_header %} 系統(tǒng)設(shè)置 {% endblock %} {% block page_option %} 用戶管理 {% endblock %} {% block content %} <div class="box"> <div class="box-header with-border"> <h3 class="box-title">用戶列表</h3> </div> <!-- /.box-header --> <div class="box-body"> <div style="margin-bottom: 10px"> <form class="form-inline user-query"> <div class="form-group"> <label for="">用戶名</label> <input type="text" class="form-control" name="username" value="{{ username }}"> </div> <div class="form-group"> <label for="">分組</label> <select name="group" id="" class="form-control"> <option value="">所有</option> {% for group in groups %} <option {% if groups__id == group.id %}selected{% endif %} value="{{ group.id }}">{{ group.name }}</option> {% endfor %} </select> </div> <div class="form-group"> <label for="">是否員工</label> <select name="is_staff" id="" class="form-control"> <option value="">所有</option> <option {% if is_staff is True %}selected{% endif %} value="1">是</option> <option {% if is_staff is False %}selected{% endif %} value="0">否</option> </select> </div> <div class="form-group"> <label for="">是否管理員</label> <select name="is_superuser" id="" class="form-control"> <option value="">所有</option> <option {% if is_superuser is True %}selected{% endif %} value="1">是</option> <option {% if is_superuser is False %}selected{% endif %} value="0">否</option> </select> </div> <button type="button" class="btn btn-info query">查詢</button> <button type="button" class="btn btn-default reset">重置</button> </form> </div> <table class="table table-bordered"> <tbody> <tr> <th>#</th> <th>用戶名</th> <th>電話</th> <th>是否可用</th> <th>是否員工</th> <th>是否管理員</th> </tr> {% for user in users %} <tr> <td style="width: 40px"><a href="#" data-id="{{ user.id }}">{{ forloop.counter }}</a></td> <td>{{ user.username }}</td> <td>{{ user.mobile }}</td> <td>{% if user.is_active %}是{% else %}否{% endif %}</td> <td>{% if user.is_staff %}是{% else %}否{% endif %}</td> <td>{% if user.is_superuser %}是{% else %}否{% endif %}</td> </tr> {% endfor %} </tbody> </table> </div> <!-- 分頁 --> <div class="box-footer clearfix"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">總共：{{ users.paginator.count }}條 第{{ users.start_index }}到{{ users.end_index }}條 </div> </div> <div class="col-sm-6"> <ul class="pagination pagination-sm no-margin pull-right"> <li {% if not users.has_previous %}class="disabled"{% endif %} data-page="{{ users.number|add:-1 }}"><a href="#">?</a></li> {% for n in users|page_bar %} <li {% if n == users.number %}class="active" {% endif %} data-page="{{ n }}"><a href="#">{{ n }}</a></li> {% endfor %} <li {% if not users.has_next %}class="disabled"{% endif %} data-page="{{ users.number|add:1 }}"><a href="#">?</a></li> </ul> </div> </div> </div> </div> {% endblock %} {% block script %} <script src="{% static 'js/myadmin/user/user_list.js' %}"></script> {% endblock %} -
js
// 創(chuàng)建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('服務(wù)器超時，請重試紧帕！') }) }); // 重置 $resetBtn.click(() => { $queryForm[0].reset(); $ .ajax({ url: $('.sidebar-menu li.active a').data('url'), type: 'GET' }) .done((res) => { $('#content').html(res) }) .fail(() => { message.showError('服務(wù)器超時盔然，請重試！') }) }); // 分頁 給非 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('服務(wù)器超時是嗜，請重試愈案！') }) }) });
三、用戶詳情頁面
1.接口設(shè)計
- 接口說明：
| 類目 | 說明 |
|---|---|
| 請求方法 | GET |
| url定義 | /admin/user/<int:user_id>/ |
| 參數(shù)格式 | 路徑參數(shù) |
- 參數(shù)說明：
| 參數(shù)名 | 類型 | 是否必須 | 描述 |
|---|---|---|---|
| user_id | 整數(shù) | 是 | 要查詢的用戶id |
-
返回數(shù)據(jù)
html
2. 后端代碼
-
視圖
# 在myadmin/views.py中添加如下視圖 class UserUpdateView(View): """ 用戶更新視圖 url:/admin/user/<int:user_id> """ 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}) -
路由
# 在myadmin/urls.py中添加如下路由 path('user/<int:user_id>/', views.UserUpdateView.as_view(), name='user_update') -
表單
# 在myadmin/forms.py中定義如下表單 class UserModelForm(forms.ModelForm): class Meta: model = User fields = ['username', 'mobile', 'is_staff', 'is_superuser', 'is_active', 'groups']
3.前端代碼
-
html
<!-- 新建 myadmin/user/user_detail.html 模板 --> {% extends 'myadmin/content_base.html' %} {% load static %} {% load admin_customer_tags %} {% block page_header %} 系統(tǒng)設(shè)置 {% 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' %} <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label for="{{ field.id_for_label }}">{{ field }}{{ field.label }}</label> </div> </div> </div> {% else %} <div class="form-group {% if field.errors %}has-error{% endif %}"> <label for="{{ field.id_for_label }}" class="col-sm-2 control-label">{{ field.label }}</label> <div class="col-sm-10"> {% for error in field.errors %} <label class="control-label" for="{{ field.id_for_label }}">{{ error }}</label> {% endfor %} {% add_class field 'form-control' %} </div> </div> {% endif %} {% endfor %} </form> </div> <div class="col-md-3"></div> </div> </div> <div class="box-footer"> <button type="button" class="btn btn-default back">返回</button> <button type="button" class="btn btn-primary pull-right save " data-url="{% url 'myadmin:user_update' form.instance.id %}">保存</button> </div> </div> {% endblock %} -
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('服務(wù)器超時鹅搪，請重試站绪！') } } ); }) }); ... // 注意在user_list中在相應(yīng)的tr中添加data-url的屬性 <td style="width: 40px" data-url="{% url 'myadmin:user_update' user.id %}">
四、修改用戶
1.接口設(shè)計
- 接口說明：
| 類目 | 說明 |
|---|---|
| 請求方法 | PUT |
| url定義 | /admin/user/<int:user_id> |
| 參數(shù)格式 | 路徑參數(shù)+表單參數(shù) |
- 參數(shù)說明：
| 參數(shù)名 | 類型 | 是否必須 | 描述 |
|---|---|---|---|
| user_id | 整數(shù) | 是 | 用戶id |
| username | 字符串 | 是 | 用戶名 |
| mobile | 字符串 | 是 | 手機號碼 |
| is_staff | 字符串 | 否 | 是否職員 |
| is_superuser | 字符串 | 否 | 是否超級用戶 |
| is_active | 字符串 | 否 | 渲染圖標(biāo)類名 |
-
返回數(shù)據(jù)
# 添加正常返回json數(shù)據(jù) { "errno": "0", "errmsg": "用戶修改成功丽柿！" }如果有錯誤恢准，返回html表單
2.后端代碼
-
視圖
# 在admin/views.py中的UserUpdateView視圖中添加put方法 class UserUpdateView(View): """ 用戶更新視圖 url:/admin/user/<int:user_id> """ 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.前端代碼
-
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('服務(wù)器超時魂挂，請重試！') } } ); }); $('.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('服務(wù)器超時涂召，請重試！') } } ); }else { $('#content').html(res) } }) .fail((res)=>{ message.showError('服務(wù)器超時敏沉，請重試果正！') }) }) });
