【二】登陆功能#

【1】需求分析#

【2】视图函数#

1
from django.shortcuts import render, HttpResponse
2
from django.urls import reverse
3
from utils.verify_code import create_verify_code
4
from user.forms import RegisterForm
5
from lib.CommonResponse import CommonResponse
6
from user.models import UserInfo
7
from django.contrib import auth
8

9

10
def login(request):
11
    # 【1】判断当前请求方式为 POST 请求 并且当前请求是Ajax请求
12
    if request.method == "POST" and request.is_ajax():
13
        # 【2】从POST请求中获取得到 所有 POST 请求携带的数据
14
        data = request.POST
15
        username = data.get("username")
16
        password = data.get("password")
17
        confirm_password = data.get("confirm_password")
18
        verify_code = data.get("verify_code")
19
        if not all([username, password, confirm_password, verify_code]):
20
            return CommonResponse(code=201, errors="请输入完整的信息!")
21
        # 【3】从request的session中获取得到验证码
22
        true_code = request.session.get("verify_code")
23
        # 【4】校验当前输入的验证码和session中的验证码是否一致
24
        if true_code.upper() != verify_code or not verify_code.upper():
25
            return CommonResponse(code=201, errors="验证码错误!")
26
        # 【5】校验用户名是否存在
27
        if not UserInfo.objects.filter(username=username).exists() or not username:
28
            return CommonResponse(code=202, errors="用户不存在!")
29
        # 【6】校验两次密码是否一致
30
        if password != confirm_password or not password or not confirm_password:
31
            return CommonResponse(cpde=203, errors="两次密码不一致!")
32
        # 【7】通过 auth 模块校验用户名和密码是否正确
33
        user_obj = auth.authenticate(username=username, password=confirm_password)
34
        if not user_obj:
35
            return CommonResponse(code=204, errors="用户名或密码错误!")
36
        # 【8】密码正确保存用户登录状态
37
        auth.login(request, user_obj)
38
        # 【9】返回响应数据
39
        return CommonResponse(code=200, message=f"当前用户 {user_obj.username} 登录成功!", next_url=reverse("home"))
40
    return render(request, "login.html", locals())
41

42

43
# 动态制作验证码图片
44
def get_verify_img(request):
45
    # 调用工具类，获取验证码和验证码图片
46
    code, img_data = create_verify_code()
47
    # 将验证码添加到 request 中
48
    request.session["verify_code"] = code
49

50
    # 将图片二进制数据返回
51
    return HttpResponse(img_data)

【3】前端页面#

1
{% load static %}
2
<!DOCTYPE html>
3
<html lang="en">
4
<head>
5
    <meta charset="UTF-8">
6
    <title>Title</title>
7
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
8
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
9
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
10
    <script src="{% static 'js/jquery.min.js' %}"></script>
11
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
12
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
13
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
14
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
15
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
16
</head>
17
<body>
18
<div class="container">
19
    <div class="row">
20
        <div class="col-md-8 col-md-offset-2">
21
            <h1 class="text-center">登陆界面</h1>
22
            {# 登陆采用 form 表单提交用户输入的数据，没什么特别的意思，就是想多换几种方式而已 #}
23
            {# <form action="" method="post"> #}
24
            {# 也可以采用 注册遍历form对象的方式 #}
25
            <form id="form_login">
26
                {% csrf_token %}
27
                {# 用户名输入框 #}
28
                <div class="form-group">
29
                    <p>
30
                        <label for="inputUsername"></label>
31
                        用户名 : <input type="text" class="form-control" id="inputUsername" name="username"
32
                                        placeholder="username">
33
                    </p>
34
                </div>
35
                {# 密码输入框 #}
36
                <div class="form-group">
37
                    <p>
38
                        <label for="inputPassword"></label>
39
                        密码 : <input type="text" class="form-control" id="inputPassword" name="password"
40
                                      placeholder="password">
41
                    </p>
42
                </div>
43
                {# 确认密码输入框 #}
44
                <div class="form-group">
45
                    <p>
46
                        <label for="inputConfirmPassword"></label>
47
                        确认密码 : <input type="text" class="form-control" id="inputConfirmPassword"
48
                                          name="confirm_password"
49
                                          placeholder="confirm_password">
50
                    </p>
51
                </div>
52
                {# 验证码输入框 #}
53
                <div class="form-group">
54
                    <p>
55
                        验证码 :
56
                    <div class="row">
57
                        {# 验证码输入框 #}
58
                        <div class="col-md-6">
59
                            <input type="text" class="form-control" name="verify_code">
60
                        </div>
61
                        {# 渲染图片验证码 #}
62
                        <div class="col-md-6">
63
                            {# 前端的 img 标签不只是能存放静态的图片文件路径，还能存动态的url链接 #}
64
                            {# <img src="{% static 'avatar/default.png' %}" alt="图片走丢了 ~ ~ ~ " style="width: 360px;height: 36px;"> #}
65
                            {# 后端返回的图片二进制数据可以正常渲染 #}
66
                            {# <img src="{% url 'verify_img' %}" alt="图片走丢了 ~ ~ ~ " style="width: 360px;height: 36px;"> #}
67
                            {# 动态渲染验证码图片 #}
68
                            <img src="{% url 'verify_img' %}" alt="图片走丢了 ~ ~ ~ "
69
                                 style="width: 360px;height: 36px;" id="verify_code_img">
70
                        </div>
71
                    </div>
72
                    </p>
73
                </div>
74
                {# 用户提交数据按钮 #}
75
                {# <input type="submit" class="btn btn-block btn-info"> #}
76
                {# Ajax发送数据时点击的普通按钮，不触发 form 表单的自动刷新 #}
77
                <input type="button" class="btn btn-block btn-info" id="btn_login" value="提交">
78
            </form>
79
        </div>
80
    </div>
81
</div>
82

83
<script>
84
    $(document).ready(
85
        // 给验证码图片绑定点击事件，点击验证码图片时，自动触发刷新，返回新的验证码
86
        // ajax 绑定点击事件方式之一：委托事件
87
        $("#verify_code_img").on("click", function () {
88
            // 【1】获取到当前 img 标签的 原来的 src 属性
89
            let oldSrc = $(this).attr("src");
90
            // 添加一个时间戳参数来确保 URL 不同
91
            let timestamp = new Date().getTime();
92
            // 【2】给当前旧src属性重新赋值 , 只要 src 的值和旧值不一致就会触发刷新
93
            // 此方法 会不断的在路由后面拼接参数，导致路由太长
94
            // $(this).attr("src", oldSrc + "?");
95
            // 动态绑定当前时间戳作为参数
96
            if (oldSrc.indexOf("?") > -1) {
97
                // 删除 旧src属性中 原有的时间戳参数
98
                let newSrc = oldSrc.replace(/\?.*/, '');
99
                $(this).attr("src", `${newSrc}?t=${timestamp}`);
100
            } else {
101
                // 如果是第一次则新增一个时间戳
102
                $(this).attr("src", `${$(this).attr("src")}?t=${timestamp}`);
103
            }
104
        }),
105

106
        // 发送请求方式二：Ajax遍历取值
107
        $("#btn_login").on("click", function () {
108
            let data = {}
109
            $.each($("#form_login").serializeArray(), function (index, dataDict) {
110
                data[dataDict.name] = dataDict.value
111
            });
112

113
            // 将 csrf token 放入数据中传给后端做校验
114
            data["csrfmiddlewaretoken"] = "{{ csrf_token }}";
115
            $.ajax({
116
                url: "",
117
                type: "post",
118
                data: data,
119
                success: (response) => {
120
                    // 回调函数处理逻辑
121
                    if (response.code === 200) {
122
                        swal({
123
                            title: response.message,
124
                            icon: "success",
125
                            button: true,
126
                        }).then(() => {
127
                            window.location.href = response.next_url;
128
                        });
129
                    } else {
130
                        swal({
131
                            title: response.errors,
132
                            icon: "error",
133
                            button: true,
134
                        }).then(() => {
135
                            window.location.reload()
136
                        });
137
                    }
138
                }
139
            })
140
        })
141
    );
142
</script>
143
</body>
144
</html>

【4】路由映射#

1
from django.urls import path
2
from user.views import register, login, get_verify_img
3

4
urlpatterns = [
5
    # 注册路由
6
    path("register/", register, name="register"),
7
    # 登陆路由
8
    path("login/", login, name="login"),
9

10
    # 获取验证码图片
11
    path("verify_img/", get_verify_img, name="verify_img"),
12
]

【三】修改密码#

【1】需求分析#

【2】视图函数#

1
# 全局配置登陆跳转路由
2
LOGIN_URL = reversed("login")

1
# 修改密码接口
2
@login_required
3
def reset_password(request):
4
    # 【1】确认当前请求为 POST 请求并且是 Ajax 请求
5
    if request.method == "POST" and request.is_ajax():
6
        # 【2】获取前端传递的参数
7
        username = request.user.username
8
        old_password = request.POST.get("old_password")
9
        new_password = request.POST.get("new_password")
10
        confirm_password = request.POST.get("confirm_password")
11
        # 【3】确保前端传入的参数有值
12
        if not all([old_password, new_password, confirm_password]):
13
            return CommonResponse(code=201, errors="请补齐参数!")
14
        # 【4】确保两次密码存在并且一致
15
        if new_password != confirm_password or not new_password or not confirm_password:
16
            return CommonResponse(code=202, errors="两次输入的密码不一致!")
17
        # 【5】通过 auth 模块校验原密码是否一致
18
        old_password_is_right = auth.authenticate(username=username, password=old_password)
19
        if not old_password_is_right:
20
            return CommonResponse(code=203, errors="原密码输入错误!")
21
        # 【6】参数都正确，原密码正确，修改密码
22
        request.user.set_password(confirm_password)
23
        # 不要忘了 save 保存，否则不生效
24
        request.user.save()
25
        # 【7】退出当前登录用户，清除已经登录用户的数据
26
        auth.logout(request)
27
        # 【8】返回前端信息
28
        return CommonResponse(code=200, message=f"用户 {username} 密码修改成功!", next_url=reverse("login"))

【3】前端页面#

（1）触发按钮#

1
{# 根据下面模态框中的属性弹出指定的模态框 #}
2
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>

（2）模态框#

1
{# 修改密码模态框开始 #}
2
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
3
     aria-labelledby="myLargeModalLabel">
4
    <div class="modal-dialog modal-lg" role="document">
5
        <div class="modal-content">
6
            <div class="modal-header">
7
                {# 右上角关闭模态框的 x  #}
8
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
9
                        aria-hidden="true">×</span></button>
10
                {# 大标题 ： 修改密码页面 #}
11
                <h4 class="modal-title text-center" id="myLargeModalLabel">修改密码</h4>
12
            </div>
13
            <div class="modal-body">
14
                <div class="row">
15
                    <div class="col-md-6 col-md-offset-3">
16
                        {# 定义form表单，但是仍然不走 form 表单提交数据，而是使用ajax #}
17
                        <form id="reset_password_form">
18
                            <div class="form-group">
19
                                <label for="inputUsername">用户名 : </label>
20
                                <input type="text" class="form-control" name="username" id="inputUsername"
21
                                       value="{{ request.user.username }}" disabled>
22
                            </div>
23
                            <div class="form-group">
24
                                <label for="inputOldPassword">旧密码 : </label>
25
                                <input type="text" class="form-control" name="old_password" id="inputOldPassword"
26
                                       placeholder="old_password">
27
                            </div>
28
                            <div class="form-group">
29
                                <label for="inputNewPassword">新密码 : </label>
30
                                <input type="text" class="form-control" name="new_password" id="inputNewPassword"
31
                                       placeholder="new_password">
32
                            </div>
33
                            <div class="form-group">
34
                                <label for="inputConfirmPassword">确认密码 : </label>
35
                                <input type="text" class="form-control" name="confirm_password"
36
                                       id="inputConfirmPassword"
37
                                       placeholder="confirm_password">
38
                            </div>
39
                            {# 定义点击修改按钮 #}
40
                            <div class="form-group">
41
                                <input type="button" class="btn btn-warning btn-block" value="确认修改"
42
                                       id="btn_reset_password">
43
                            </div>
44
                        </form>
45
                    </div>
46
                </div>
47
            </div>
48
        </div>
49
    </div>
50
</div>
51
{# 修改密码模态框结束 #}

（3）Ajax请求#

1
// 修改密码按钮点击事件
2
$("#btn_reset_password").on("click", function () {
3
    // 使用 sweetalert 的弹框确认事件
4
    swal({
5
        title: "修改密码操作不可逆!",
6
        text: "一旦密码被修改，无法找回原密码，确认修改吗？",
7
        icon: "warning",
8
        buttons: true,
9
        dangerMode: true,
10
    }).then((willReset) => {
11
        // 判断用户是否点击了确认按钮
12
        if (willReset) {
13
            let data = {}
14
            $.each($("#reset_password_form").serializeArray(), function (index, dataDict) {
15
                data[dataDict.name] = dataDict.value
16
            })
17
            data["csrfmiddlewaretoken"] = "{{ csrf_token }}"
18
            $.ajax({
19
                url: "{% url 'reset_password' %}",
20
                type: "post",
21
                data: data,
22
                success: (response) => {
23
                    if (response.code === 200) {
24
                        swal({
25
                            title: response.message,
26
                            icon: "success",
27
                            button: true,
28
                        }).then(() => {
29
                            window.location.href = response.next_url;
30
                        });
31
                    } else {
32
                        swal({
33
                            title: response.errors,
34
                            icon: "error",
35
                            button: true,
36
                        }).then(() => {
37
                            window.location.reload()
38
                        });
39
                    }
40
                }
41
            })
42
        } else {
43
            swal("好好想一想哦 ~ ~ ~ ");
44
        }
45
    });
46
})

【4】路由映射#

【四】注销登录#

【1】需求分析#

【2】视图函数#

1
@login_required
2
def logout(request):
3
    auth.logout(request)
4
    return redirect("login")

【3】前端页面#

无前端页面

1
<li><a href="{% url 'logout' %}">注销登陆</a></li>

音乐

音乐

【二】登陆功能#

【1】需求分析#

【2】视图函数#

【3】前端页面#

【4】路由映射#

【三】修改密码#

【1】需求分析#

【2】视图函数#

【3】前端页面#

（1）触发按钮#

（2）模态框#

（3）Ajax请求#

【4】路由映射#

【四】注销登录#

【1】需求分析#

【2】视图函数#

【3】前端页面#

【4】路由映射#

支持与分享

音乐

用户相关功能

【二】 登陆功能#

【1】需求分析#

【2】视图函数#

【3】前端页面#

【4】路由映射#

【三】修改密码#

【1】需求分析#

【2】视图函数#

【3】前端页面#

（1）触发按钮#

（2）模态框#

（3）Ajax请求#

【4】路由映射#

【四】注销登录#

【1】需求分析#

【2】视图函数#

【3】前端页面#

【4】路由映射#

支持与分享

【二】登陆功能#