django默认登录页面（注销）修改版

最新推荐文章于 2024-05-16 11:47:46 发布

码农-Python小高

最新推荐文章于 2024-05-16 11:47:46 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44541001/article/details/105386021

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

适配django ，文中有关jbox,暂时没用，可以删掉，和页面无关，包括最后下载文件（css,js，img）中的jbox文件夹

html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="{% static 'login/css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'login/css/reset.css' %}"/>

    <!--jbox-->
    <link rel="stylesheet" type="text/css" href="{% static 'login/jbox/jeui/css/jeui.css' %}"/>
    <!--jbox-->

    <style>
        .choose_type {
            display: inline-block;
            width: 100%;
        }

        .userpwd {
            display: inline-block;
            width: 48%;
            height: 35px;
            background-color: #1e90ff;
            border: 1px solid grey;
        }

        .pic {
            display: inline-block;
            width: 49%;
            height: 35px;
            background-color: white;
            border: 1px solid grey;
        }

        .userpwd > a {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 18px;
            color: white;
            font-family: Helvetica, Arial, sans-serif;
            text-align: center;
            padding-top: 3%;
        }

        .pic > a {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 18px;
            color: black;
            font-family: Helvetica, Arial, sans-serif;
            text-align: center;
            padding-top: 3%;
        }
        .errMessage{
            font-size: 15px;
            color: red;
            margin-left: 30%;
            margin-top: 10%;
        }
    </style>
</head>
<body>
<form action="{% url 'login' %}?next={{ next }}" method="post" id="Form">
    {% csrf_token %}
    <div id="particles-js">
        <div class="login">
            <div class="choose_type">
                <span class="userpwd" onclick="userpwd()"><a href="#" id="userpwd_a">账号登录</a></span>
                <span class="pic" onclick="pic()"><a href="#" id="pic_a">其他登录</a></span>
            </div>
            <div class="choose_type_userpwd">
                <div class="login-top">
                    登录
                </div>
                <div class="login-center clearfix">
                    <div class="login-center-img"><img src="{% static 'login/img/name.png' %}"/></div>
                    <div class="login-center-input">
                        <input type="text" name="username" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
                               onblur="this.placeholder='请输入您的用户名'"/>
                        <div class="login-center-input-text">用户名</div>
                    </div>
                </div>
                <div class="login-center clearfix">
                    <div class="login-center-img"><img src="{% static 'login/img/password.png' %}"/></div>
                    <div class="login-center-input">
                        <input type="password" name="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''"
                               onblur="this.placeholder='请输入您的密码'"/>
                        <div class="login-center-input-text">密码</div>
                    </div>
                </div>
                <div class="login-button">
                    登录
                </div>

                <div class="errMessage">{{ errMessage }}</div>
            </div> <!-- choose_type_userpwd -->
            <div class="choose_type_qr_code" style="display: none">
                <img src="{% static 'login/img/qr_code.png' %}">
            </div>

        </div> <!-- class="login"-->
        <div class="sk-rotating-plane"></div>

    </div>
</form>
<!--jbox-->
<script src="{% static 'login/jbox/jquery-1.7.2.js' %}"></script>
<script src="{% static 'login/jbox/jeui/js/modules/jeBox.js' %}"></script>
<script src="{% static 'login/jbox/jeui/js/modules/jquery.js' %}"></script>
<script src="{% static 'login/jbox/jquery.jebox.min.js' %}"></script>
<!--jbox-->

<!-- scripts -->
<script src="{% static 'login/js/particles.min.js' %}"></script>
<script src="{% static 'login/js/app.js' %}"></script>
<script>
    function userpwd() {
        $('.userpwd').css("width", "48%").css("height", "35px").css("background-color", "#1e90ff").css("border", "1px solid grey");
        $(".choose_type_userpwd").css("display", "block")
        $(".choose_type_qr_code").css("display", "none")
        $('.pic').css("width", "49%").css("height", "35px").css("background-color", "white").css("border", "1px solid grey");
        $('#userpwd_a').css("color", "white")
        $('#pic_a').css("color", "black")
    }

    function pic() {
        $('.pic').css("width", "49%").css("height", "35px").css("background-color", "#1e90ff").css("border", "1px solid grey");
        $(".choose_type_userpwd").css("display", "none")
        $(".choose_type_qr_code").css("display", "block")
        $('.userpwd').css("width", "48%").css("height", "35px").css("background-color", "white").css("border", "1px solid grey");
        $('#userpwd_a').css("color", "black")
        $('#pic_a').css("color", "white")
    }
</script>


<!-- scripts -->
<script src="{% static 'login/js/particles.min.js' %}"></script>
<script src="{% static 'login/js/app.js' %}"></script>
<script type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    document.querySelector(".login-button").onclick = function () {
        addClass(document.querySelector(".login"), "active")
        setTimeout(function () {
            addClass(document.querySelector(".sk-rotating-plane"), "active")
            document.querySelector(".login").style.display = "none"
        }, 800)
        {#setTimeout(function () {#}
        {#    removeClass(document.querySelector(".login"), "active")#}
        {#    removeClass(document.querySelector(".sk-rotating-plane"), "active")#}
        {#    document.querySelector(".login").style.display = "block"#}
        {##}
            $("#Form").submit();
        {# }, 2000)#}
     }
</script>
</body>
</html>

views.py

from django.contrib import auth
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render, redirect


# 登录
def login_view(request):
    if request.method == "GET":
        next = request.GET.get("next")
        return render(request, template_name='login.html', context={'next': next})
    else:
        username = request.POST['username']
        password = request.POST['password']
        next = request.GET.get("next", 'index')
        # 验证用户名和密码，验证通过的话，返回user对象
        user = auth.authenticate(username=username, password=password)
        if user:
            # 验证成功 登陆
            auth.login(request, user)
            return redirect(next)
        else:
            # return render(request, 'day6_regist.html')
            return render(request, template_name='login.html', context={'next': next, 'errMessage': '用户名或密码有误'})


# 注销
def logout_view(request):
    if request.method == 'GET':
        auth.logout(request)
        return HttpResponseRedirect('/login/')


def index(request):
    return HttpResponse("okeftewfrew")

urls.py(app)

"""Login_Django URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib.auth.decorators import login_required
from django.urls import path
from Login_app import views

urlpatterns = [
    path('login/', views.login_view, name='login'),
    path('logout/', views.logout_view, name="logout"),
    path('index/', login_required(views.index), name="index"),
]

setting.py 添加几行代码，如有需，可以添加跨域

LOGIN_URL = '/login/'  # 退出后跳转的页面
SESSION_EXPIRE_AT_BROWSER_CLOSE = False  # 关闭浏览器不清空session
SESSION_COOKIE_AGE = 60 * 60  # 60分钟后session认证过期

css，js,img 下载，无积分下载，下载不了 qq私聊

https://download.csdn.net/download/weixin_44541001/12314421

在这里插入图片描述

码农-Python小高

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
django默认登录页面（注销）修改版

适配django ，文中有关jbox,暂时没用，可以删掉，和页面无关，包括最后下载文件（css,js，img）中的jbox文件夹html{% load static %}<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>登录...
复制链接

扫一扫