Django用户登录注册装饰器注销前端页面

前端页面使用了jquery, bootstrap,html ，css样式

1、login.html登录页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/static/login/login.js"></script>
    <style>
        #login-btn{
            outline: none;
            border: none;
        }
        h2{
            text-align: center;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>用户登录</h2>
    <div class="row">
        <div class="col-md-3 col-lg-offset-4">
            <div>
                <form>
                    {% csrf_token %}
                    <div class="form-group">
                        用户名<input type="text" id="user" class="form-control">
                    </div>
                    <div class="form-group">
                        密码<input type="password" id="pwd" class="form-control">
                    </div>
                    <input type="button" value="登录" id="login-btn" class="btn btn-success pull-right">
                    <p class="error"></p>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2、index.html页面-注销功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h3>上次登录时间:{{ last_visit_time }}</h3>
<h2>Hi! {{ username }}</h2>
<a href="/login_out/">注销</a>
</body>
</html>

3、shop.html页面django认证装饰器组件功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
</head>
<body>
<h2>SHOP</h2>

</body>
</html>

4、register.html用户注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/static/login/login.js"></script>

</head>
<body>
<h1 style="margin-bottom: 50px" class="text-center">用户注册</h1>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form id="form">
                {% csrf_token %}
                {% for filed in form %}
                    <div class="form-group">
                        <label for={{ filed.auto_id }}>{{ filed.label }}</label>
                        {{ filed }}
                        <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <input type="button" value="提交" class="btn btn-success pull-left" id="reg-btn">
                </div>

            </form>
        </div>

    </div>

</div>

</body>
</html>

5、jquery登录和注册功能

// 用户登录功能
function login() {
    $('#login-btn').click(function () {
        $.ajax({
            url: '',
            type: 'post',
            data: {
                user: $('#user').val(),
                pwd: $('#pwd').val(),
                // 因利用ajax验证用户登录需要添加
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
            },

            success: function (data) {
                // data.user:登录用户名; data.next:跳转路径; data.msg:错误信息
                if (data.user) {
                    location.href = data.next
                } else {
                    $('.error').text(data.msg).css({
                        color: 'red',
                    })
                }
            }
        })
    });
}

// 用户注册功能
function userReg() {
    $('#reg-btn').click(function () {
        // $('#form').serializeArray()序列化form表单元素为JSON数据
        const requestData = $('#form').serializeArray();
        const formData = new FormData;

        // requestData form表单序列利用each,追加到formData里面
        $.each(requestData, function (index, data) {
            formData.append(data.name, data.value)
        });

        $.ajax({
            url: '',
            type: 'post',
            contentType: false,
            processData: false,
            data: formData,
            success: function (data) {
                if (data.user) {
                    location.href = '/login/'
                } else {
                    // 清空id:error(span)错误信息
                    $('span.error').text("");
                    // 清空错误红色input边框线
                    $('.form-group').removeClass('has-error');

                    $.each(data.msg, function (key, value) {
                        if (key == "__all__") {
                            // 判断后端传递的数据等于"__all__"进密码错误不一致信息显示
                            $('#id_r_pwd').next().text(value).parent().addClass('has-error');
                        }
                        // 添加错误日志到对应的元素标签
                        $('#id_' + key).next().text(value);

                        // 添加错误input边框红色线
                        $('#id_' + key).parent().addClass('has-error')
                    })
                }
            }
        })
    })
}

$(function () {
    login();
    userReg();
});

6、Django后端代码访问:https://www.cnblogs.com/albert919/p/16003520.html

posted @ 2022-03-14 15:22 点点滴滴的努力阅读(90) 评论(0) 收藏举报

刷新页面返回顶部