投稿
  1. 极客之音首页
  2. 后端开发
  3. Python

Django加Vue电商项目实战20 实现删除用户功能

小半 • • Python • 阅读 323

前言

学无止境，无止境学。大家好，我是张大鹏，之前在抖音有5万多粉丝，不过现在不拍视频，专心写公众号了。笔者目前是高级Python工程师，之前是全栈工程师，主要擅长Golang和Python开发，对于Java，Vue，React也有一些研究。工作之余，喜欢学习和分享，希望能够通过此公众号”张大鹏520″，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

今天要给大家分享的是《Django加Vue电商项目实战20 实现删除用户功能》，这是一个系列的教程，从零基础到项目实战。在本教程中，我会给大家介绍如何实现实现删除用户功能。比如404页面，500页面，删除用户的路由，视图函数，前端核心逻辑等。还会配套相关的练习，大家学完以后可以自行通过练习题巩固和加深对知识点的理解。

如果大家需要本教程的PDF电子书或者完整的源码，可以在文末找到获取方式哈。

效果预览

每条数据展示删除按钮

Django加Vue电商项目实战20 实现删除用户功能


点击删除按钮弹出模态框

Django加Vue电商项目实战20 实现删除用户功能


确认删除

点击关闭按钮取消删除，点击确定按钮确认删除。

错误信息页面

路由设计

from django.urls import path

from . import views

app_name = 'basic'

urlpatterns = [
    # 404 错误
    path('404/', views.error_404, name='error_404'),
    # 500 错误
    path('500/', views.error_500, name='error_500'),
]

视图函数

from django.shortcuts import render


def error_404(request):
    """渲染404错误信息"""
    if request.method == "GET":
        context = {
            "msg": request.GET.get("msg")
        }
        return render(request, "apps/basic/404.html", context)


def error_500(request):
    """渲染500错误信息"""
    if request.method == "GET":
        context = {
            "msg": request.GET.get("msg")
        }
        return render(request, "apps/basic/500.html", context)

404页面预览

Django加Vue电商项目实战20 实现删除用户功能


404页面模板

{% 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 'css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center text-center error-page bg-primary">
            <div class="row flex-grow">
                <div class="col-lg-7 mx-auto text-white">
                    <div class="row align-items-center d-flex flex-row">
                        <div class="col-lg-6 text-lg-right pr-lg-4">
                            <h1 class="display-1 mb-0">404</h1>
                        </div>
                        <div class="col-lg-6 error-page-divider text-lg-left pl-lg-4">
                            <h2>抱歉</h2>
                            <h3 class="font-weight-light">找不到您要访问的资源</h3>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-12 text-center mt-xl-2">
                            <a class="text-white font-weight-medium" href="{% url 'index:index' %}">返回首页</a>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-12 mt-xl-2">
                            <p class="text-white font-weight-medium text-center">版权所有 &copy; 张大鹏</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

500页面预览

Django加Vue电商项目实战20 实现删除用户功能


500页面模板

{% 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 'css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center text-center error-page bg-info">
            <div class="row flex-grow">
                <div class="col-lg-7 mx-auto text-white">
                    <div class="row align-items-center d-flex flex-row">
                        <div class="col-lg-6 text-lg-right pr-lg-4">
                            <h1 class="display-1 mb-0">500</h1>
                        </div>
                        <div class="col-lg-6 error-page-divider text-lg-left pl-lg-4">
                            <h2>抱歉</h2>
                            <h3 class="font-weight-light">服务器内部错误，请联系管理员！</h3>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-12 text-center mt-xl-2">
                            <a class="text-white font-weight-medium" href="{% url 'index:index' %}">返回首页</a>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-12 mt-xl-2">
                            <p class="text-white font-weight-medium text-center">版权所有 &copy; 张大鹏</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

删除用户功能实现

路由设计

from django.urls import path

from . import views

app_name = 'user'

urlpatterns = [
    # 用户删除
    path('delete/', views.user_delete, name='user_delete'),
]

视图函数

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_delete(request):
    """删除用户数据"""
    msg = "删除用户失败"
    try:
        uid = request.GET.get("uid", None)
        if uid:
            User.objects.get(id=uid).delete()
            return redirect("user:user_list")
    except Exception as e:
        msg = e
    return redirect(reverse('basic:error_404') + "?msg=" + msg)

删除用户前端核心逻辑

模态框按钮：

<button type="button" class="btn btn-sm btn-danger"
        data-bs-toggle="modal"
        data-bs-whatever="{{ user.id }}"
        data-bs-target="#deleteUserModal">
    删除
</button>

模态框：

<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>

JS逻辑：

<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>

删除用户模板

{% 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>
    {% include "../../layout/css.html" %}
</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>
                                            <td>{{ user.level }}</td>
                                            <td>{{ user.status }}</td>
                                            <td>
                                                <a class="btn btn-sm btn-warning" type="button">编辑</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电商项目实战20 实现删除用户功能

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/48549.html

赞 (0)
小半的头像小半
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！