前言
学无止境，无止境学。大家好，我是张大鹏，之前在抖音有5万多粉丝，不过现在不拍视频，专心写公众号了。笔者目前是高级Python工程师，之前是全栈工程师，主要擅长Golang和Python开发，对于Java，Vue，React也有一些研究。工作之余，喜欢学习和分享，希望能够通过此公众号”张大鹏520″，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。
今天要给大家分享的是《Django加Vue电商项目实战21 实现用户编辑功能》，这是一个系列的教程，从零基础到项目实战。在本教程中，我会给大家介绍如何实现实现编辑用户功能。比如如何回显要编辑的用户数据，如何指定要修改的用户ID，如何修改用户的部分字段等。还会配套相关的练习，大家学完以后可以自行通过练习题巩固和加深对知识点的理解。
如果大家需要本教程的PDF电子书或者完整的源码，可以在文末找到获取方式哈。
效果预览
用户列表界面优化
会员等级显示中文名，状态显示中文名。
编辑用户界面
编辑页面
路由设计
from django.urls import path
from . import views
app_name = 'user'
urlpatterns = [
# 用户编辑
path('edit/', views.user_edit, name='user_edit'),
]
视图函数
from django.contrib.auth import authenticate, login, logout
from django.core.paginator import Paginator
from django.shortcuts import render, redirect
from django.urls import reverse
from basic.utils import get_middle_pages
from users.models import User
from .forms import LoginForm, RegisterForm
def user_edit(request):
"""编辑用户数据"""
if request.method == "GET":
# 回显用户信息
msg = "要编辑的用户不存在"
try:
uid = request.GET.get("uid", None)
if uid:
user = User.objects.get(id=uid)
context = {
"user": user
}
return render(request, "apps/users/edit.html", context)
except Exception as e:
msg = e.__str__()
return redirect(reverse('basic:error_404') + "?msg=" + msg)
elif request.method == "POST":
# 修改用户信息
uid = request.POST.get("id")
true_name = request.POST.get("true_name")
gender = request.POST.get("gender")
msg = "修改用户信息失败"
try:
user = User.objects.get(id=uid)
user.true_name = true_name
user.gender = gender
user.save()
return redirect(reverse("user:user_list"))
except Exception as e:
msg = e.__str__()
return redirect(reverse('basic:error_404') + "?msg=" + msg)
编辑界面模板
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>大鹏商城后台管理系统</title>
<link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
<link rel="stylesheet" href="{% static 'vendors/css/vendor.bundle.base.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="container-scroller">
{% include "../../layout/top_nav.html" %}
<div class="container-fluid page-body-wrapper">
{% include "../../layout/left_nav.html" %}
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> 编辑用户 </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'index:index' %}">首页</a></li>
<li class="breadcrumb-item"><a href="{% url 'user:user_list' %}">用户管理</a></li>
<li class="breadcrumb-item active" aria-current="page">编辑用户</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
{#表单开始#}
<form class="forms-sample" method="post" action="{% url 'user:user_edit' %}">
{% csrf_token %}
<input type="hidden" name="id" value="{{ user.id }}">
<div class="form-group">
<label for="true_name">真实名字</label>
<input type="text" class="form-control" id="true_name"
placeholder="请输入真实名字" name="true_name"
value="{{ user.true_name }}">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select class="form-control" id="gender" name="gender">
{% if user.gender == 0 %}
<option value="0" selected>男</option>
<option value="1">女</option>
{% elif user.gender == 1 %}
<option value="0">男</option>
<option value="1" selected>女</option>
{% else %}
<option value="0" selected>男</option>
<option value="1">女</option>
{% endif %}
</select>
</div>
<button type="submit" class="btn btn-gradient-primary me-2">立即修改</button>
</form>
{#表单结束#}
</div>
</div>
</div>
</div>
</div>
{% include "../../layout/footer.html" %}
</div>
</div>
</div>
<script src="{% static 'vendors/js/vendor.bundle.base.js' %}"></script>
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/misc.js' %}"></script>
<script src="{% static 'js/file-upload.js' %}"></script>
</body>
</html>
用户列表页面美化
用户模型优化
from django.contrib.auth.models import AbstractUser
from django.db import models
from basic.models import BaseModel
class User(AbstractUser, BaseModel):
"""自定义用户模型"""
# 性别
GENDER = (
(0, '男'),
(1, '女'),
)
# VIP等级
LEVEL = (
(0, '青铜卡会员'),
(1, '白银卡会员'),
(2, '黄金卡会员'),
(3, '钻石卡会员'),
(4, '星耀卡会员'),
(5, '王者卡会员'),
(6, '至尊卡会员'),
(7, '限定卡会员'),
)
# 状态
STATUS = (
(0, '未激活'),
(1, '激活'),
(2, '已冻结'),
(3, '永久封号'),
(4, '已注销'),
)
true_name = models.CharField(verbose_name='真实姓名', blank=True, max_length=50)
mobile = models.CharField(verbose_name='手机号码', max_length=11, default="")
gender = models.IntegerField(verbose_name="性别", default=0, choices=GENDER)
birthday = models.DateField(verbose_name="生日", blank=True, null=True)
avatar = models.ImageField(verbose_name="头像", upload_to="avatar", default="")
level = models.IntegerField(verbose_name="会员等级", default=4, choices=LEVEL)
status = models.IntegerField(verbose_name="状态", default=0, choices=STATUS)
def __str__(self):
return self.username
class Meta(AbstractUser.Meta):
db_table = 'user'
permissions = (
['check_user', '审核用户信息'],
)
会员等级显示中文
{#账号等级#}
{% if user.level == 0 %}
<td>青铜卡会员</td>
{% elif user.level == 1 %}
<td>白银卡会员</td>
{% elif user.level == 2 %}
<td>黄金卡会员</td>
{% elif user.level == 3 %}
<td>钻石卡会员</td>
{% elif user.level == 4 %}
<td>星耀卡会员</td>
{% elif user.level == 5 %}
<td>王者卡会员</td>
{% elif user.level == 6 %}
<td>至尊卡会员</td>
{% elif user.level == 7 %}
<td>限定卡会员</td>
{% else %}
<td>未知</td>
{% endif %}
账号状态显示中文
{#账号状态#}
{% if user.status == 0 %}
<td>未激活</td>
{% elif user.status == 1 %}
<td>激活</td>
{% elif user.status == 2 %}
<td>已冻结</td>
{% elif user.status == 3 %}
<td>永久封号</td>
{% elif user.status == 4 %}
<td>已注销</td>
{% else %}
<td>未知</td>
{% endif %}
用户列表界面完整代码
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>大鹏商城后台管理系统</title>
<link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
<link rel="stylesheet" href="{% static 'vendors/css/vendor.bundle.base.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="container-scroller">
{% include "../../layout/top_nav.html" %}
<div class="container-fluid page-body-wrapper">
{% include "../../layout/left_nav.html" %}
<div class="main-panel">
<div class="content-wrapper">
{#顶部标题#}
<div class="page-header">
<h3 class="page-title"> 用户管理 </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'index:index' %}">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">用户管理</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
{#横向搜索表单#}
<div class="card-title">
<form action="">
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="真实姓名">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="年龄">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="性别">
</div>
<div class="col">
<button class="btn btn-primary" type="button">搜索</button>
</div>
</div>
</form>
</div>
{#功能按钮组#}
<div class="card-description">
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-sm btn-primary" type="button">导出csv</button>
</div>
</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>真实姓名</th>
<th>性别</th>
<th>手机</th>
<th>会员等级</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in page_data %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user.username }}</td>
{% if user.true_name %}
<td>{{ user.true_name }}</td>
{% else %}
<td>无</td>
{% endif %}
{% if user.gender == 0 %}
<td>男</td>
{% else %}
<td>女</td>
{% endif %}
<td>{{ user.mobile }}</td>
{#账号等级#}
{% if user.level == 0 %}
<td>青铜卡会员</td>
{% elif user.level == 1 %}
<td>白银卡会员</td>
{% elif user.level == 2 %}
<td>黄金卡会员</td>
{% elif user.level == 3 %}
<td>钻石卡会员</td>
{% elif user.level == 4 %}
<td>星耀卡会员</td>
{% elif user.level == 5 %}
<td>王者卡会员</td>
{% elif user.level == 6 %}
<td>至尊卡会员</td>
{% elif user.level == 7 %}
<td>限定卡会员</td>
{% else %}
<td>未知</td>
{% endif %}
{#账号状态#}
{% if user.status == 0 %}
<td>未激活</td>
{% elif user.status == 1 %}
<td>激活</td>
{% elif user.status == 2 %}
<td>已冻结</td>
{% elif user.status == 3 %}
<td>永久封号</td>
{% elif user.status == 4 %}
<td>已注销</td>
{% else %}
<td>未知</td>
{% endif %}
<td>
<a class="btn btn-sm btn-warning"
href="{% url 'user:user_edit' %}?uid={{ user.id }}">编辑</a>
<button type="button" class="btn btn-sm btn-danger"
data-bs-toggle="modal"
data-bs-whatever="{{ user.id }}"
data-bs-target="#deleteUserModal">
删除
</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">暂无数据</td>
</tr>
{% endfor %}
</tbody>
</table>
{#分页信息开始#}
{% include "../../layout/page.html" %}
{#分页信息结束#}
</div>
</div>
</div>
</div>
</div>
{% include "../../layout/footer.html" %}
</div>
</div>
</div>
{#删除用户模态框#}
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">删除用户</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="msg">您确定要删除该用户吗？</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btnDeleteUser">确定删除</button>
</div>
</div>
</div>
</div>
<script src="{% static 'vendors/js/vendor.bundle.base.js' %}"></script>
<script type="text/javascript">
// 获取模态框
let deleteUserModal = document.getElementById('deleteUserModal')
// 当模态框打开的时候触发
deleteUserModal.addEventListener('show.bs.modal', function (event) {
// 获取模态框的按钮
let button = event.relatedTarget
// 获取属性中的数据
let uid = button.getAttribute('data-bs-whatever')
// 获取模态框的内容元素
let msg = deleteUserModal.querySelector('.modal-body .msg')
// 修改消息内容
msg.textContent = `您确定要删除ID为${uid}的数据吗？`
// 设置uid挂载到该dom上，方便后面执行删除的时候获取
msg.uid = uid
})
// 点击确认以后触发的方法
$("#btnDeleteUser").click(function () {
let msg = deleteUserModal.querySelector('.modal-body .msg')
window.location.href = `{% url 'user:user_delete' %}?uid=${msg.uid}`
})
</script>
</body>
</html>
结语
关注我不迷路，欢迎关注我的微信公众号”张大鹏520″，如果您对此文章感兴趣，欢迎点赞收藏，留言评论。
文中所有代码，只需要打赏20元，然后留言评论“已打赏”，即可获取哦。
本文的PDF电子书版，只需要打赏3元，然后留言评论“已打赏”，即可获取哦。
写文章不容易，不喜勿喷哈，如果有想要学编程，学项目，或者在工作中有项目难以单独完成需要提供帮助的同学，欢迎私信我哈。生活不易，想要利用学到的编程知识，业余赚点零花钱。
接项目：网站开发，APP开发，各种管理系统开发。
带徒弟：Python编程教学，Golang编程教学，前端编程教学。
谢谢您！！！
原文始发于微信公众号（张大鹏520）：Django加Vue电商项目实战21 实现用户编辑功能
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
暂无评论内容