[Django框架课学习笔记5]用户登录系统的创建

来做个笔记吧，方便复习

要做各办公系统的登录界面，公司的办公系统就不要注册功能了吧，新增用户的话让管理员在后台加就行了。

开工！

第一个目标：显示出背景

class AcOfficeSystem{       //总的JS类，只跑Settings类，即用户登录界面
    constructor(id){
        this.id = id;
        this.$ac_office_system = $('#' + id);
        
        this.settings = new Settings(this);
        //this.menu = new AcOfficeSystemMenu(this);
    }
}

class Settings{              //登陆界面的前端代码
    constructor(root){
        this.root = root;
        
        this.username = "";
        this.photo = "";

        this.$settings = $(`
<div class="ac-office_system-settings">

</div>
        `)

        this.root.$ac_office_system.append(this.$settings);
    }
}

.ac-office_system-settings{     //写CSS，显示出背景
    width: 100%;
    height: 100%;
    background-image: url("/static/image/settings/background.jpg");
    background-size: 100% 100%;
    user-select: none;
}

OK，开始第二步，写登陆窗口的前端

一边写JS，一边写CSS，然后一步步展示效果

<div class="ac-office_system-settings-login">
</div>

.ac-office_system-settings-login{
    height: 42vh;
    width: 20vw;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
}

<div class="ac-office_system-settings-title">
	登录
</div>

.ac-office_system-settings-title{
    color: white;
    font-size: 3vh;
    text-align: center;
    padding-top: 2vh;
    margin-bottom: 2vh;
}

<div class="ac-office_system-settings-username">
    <div class="ac-office_system-settings-item">
        <input type="text" placeholder="账号">
    </div>
</div>
<div class="ac-office_system-settings-password">
    <div class="ac-office_system-settings-item">
        <input type="password" placeholder="密码">
    </div>            
</div>
<div class="ac-office_system-settings-submit">
    <div class="ac-office_system-settings-item">
        <button>登录</button>
    </div>
</div>
<div class="ac-office_system-settings-error-message">
     错误信息在这里显示！
</div>

.ac-office_system-settings-username{
    display: block;
    height: 7vh;
}

.ac-office_system-settings-item {
    width: 100%;
    height: 100%;
}

.ac-office_system-settings-item > input{
    width: 90%;
    line-height: 3vh;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.ac-office_system-settings-password{
    display: block;
    height: 7vh;
}

.ac-office_system-settings-error-message{
    color: red;
    font-size: 0.8vh;
    text-align: center;
    padding-left: 1vw;
}

调调login的高度，

OK差不多了，记得把错误信息删掉，准备开始写前端交互！
首先把每一块都抓出来，

this.$login = this.$settings.find(".ac-office_system-settings-login");
this.$login_username = this.$login.find(".ac-office_system-settings-username input");
this.$login_password = this.$login.find(".ac-office_system-settings-password input");
this.$login_submit = this.$login.find(".ac-office_system-settings-submit button");
this.$login_error_message = this.$login.find(".ac-office_system-settings-error-message");

this.$login.hide();

每次刷新页面，都会执行获取用户登录信息的操作，如果未登录就跳到登录界面，如果登录了就跳转到成功登录页面。

start(){
    this.getinfo();
}

getinfo(){
    let outer = this;

    $.ajax({
        url:"",     //后端地址，先不写
        type:"GET",
        data:{
        },
        success: function(resp){
            console.log(resp);
            if(resp.result == "success"){
                outer.username = resp.username;
                outer.photo = resp.photo;
                outer.hide();     //退出登录页面
                outer.root.menu.show();  //进入用户界面(我这里是菜单界面)
            }else{
                outer.login();    //为获得信息，重新进入登录页面
            }
        }
    });
}
hide(){
    this.$settings.hide();
}

show(){
    this.$settings.show();
}

接下来写登录函数
首先，登录按钮需要监听

this.add_listening_events_login();

add_listening_events_login(){
    let outer = this;

    this.$login_submit.click(function(){
        outer.login_on_remote();     //点下登录按钮后调用远程登录函数
    });
}

login_on_remote(){
    let outer = this;
    let username = this.$login_username.val();
    let password = this.$login_password.val();
    this.$login_error_message.empty();

    $.ajax({
        url:"",    后端地址，先不写
        type:"GET",
        data:{
            username:username,
            password:password,
        },
        success:function(resp){
            console.log(resp);
            if(resp.result === "success"){
                location.reload();
            }else{
                outer.$login_error_message.html(resp.result);
            }
        }
    });
}

好，开始写后端
先写getinfo，用来获取登录状态

from django.http import JsonResponse
from office_system.models.staff.staff import Staff

def getinfo(request):
    return getinfo_web(request)

def getinfo_web(request):
    user =request.user
    if not user.is_authenticated:
        return JsonResponse({
            'result':"未登录"
        })
    else:
        staff = Staff.objects.all()[0]
        return JsonResponse({
            'result': "success",
            'username': staff.user.username,
            'photo': staff.photo,
        })

写好总路由和分路由：
总路由：

path("settings/",include("office_system.urls.settings.index")),

分路由：

from django.urls import path
from office_system.views.settings.getinfo import getinfo

urlpatterns = [
    path("getinfo/",getinfo,name="settings_getinfo"),
]

前端getinfo的url部分填写：http://IP/settings/getinfo/
此时通过上面的链接就可以检测后端写的对不对了,或者此时先登上后台，然后回到前端，会自动跳转到登录成功的界面！
到此为止，获取用户登录状态的前后端都写完啦！

模仿就好了，开始写登录

from django.http import JsonResponse
from django.contrib.auth import authenticate , login

def signin(request):
    data = request.GET
    username = data.get('username')
    password = data.get('password')
    user = authenticate(username=username,password=password)
    if not user:
        return JsonResponse({
            'result':"用户名或密码不正确"
        })
    login(request,user)
    return JsonResponse({
        'result':"success"
    })

路由：

from django.urls import path
from office_system.views.settings.getinfo import getinfo
from office_system.views.settings.login import signin

urlpatterns = [
    path("getinfo/",getinfo,name="settings_getinfo"),
    path("login/",signin,name="settings_login"),
]

改前端：

url:"http://IP/settings/login/",

很好！到此为止，我们已经可以用管理员提供的账号登录啦！