用户管理系统的作业之登陆

我就从按照作业的流程来梳理知识点

一、登陆

1、url：http://127.0.0.1:8080/app1/home/

2、路由系统：url(r'^home/', views.home),

3、视图函数：通过render直接返回一个页面

def home(request):
    # models.classes.objects.all().delete()
    # models.manager.objects.filter(manager_name="root").update(manager_pwd="root")
    return render(request,"home.html")

4、我们在来看返回的home.html页面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/css1.css">
    <style>
        .modal{
            position: fixed;
            left: 50%;
            top: 50%;
            width: 300px;
            height: 200px;
            margin-left: -150px;
            margin-top: -100px;
            z-index: 101;
            background-color: rebeccapurple;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: green;
{#            opacity: 0.8;#}
            z-index: 100;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="注册" id="register">
    <input type="button" value="登陆" id="login">
    <div class="hide modal" id="login_form">
        <form action="/app1/form_login/" method="post">
            <p><label for="username">用户名</label>:<input type="text" placeholder="用户名" name="user_name" id="username"></p>
            <p><label for="userpwd">密码</label>:<input type="password" placeholder="密码" name="user_pwd" id="userpwd"></p>
            <p><span id="error"></span></p>
            <input type="submit" value="form提交">
            <input type="button" value="ajax提交" id="ajax_login">
            <input type="reset" value="重置">
            <input type="button" value="取消" id="del_login_form">
        </form>
    </div>
    <div class="hide shade" id="shade">

    </div>
    <div class="hide modal" id="modal">

    </div>
    <script src="/static/jq/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            bind_login_func();
            del_login_form();
            bind_ajax_login();

        });
{#        这个函数页面一加载完成就会执行#}



        function bind_login_func() {
            $("#login").bind("click",function () {
                $("#error").html("")
                $("#login_form").removeClass("hide");
                $("#shade").removeClass("hide");
            })
        }
        function del_login_form() {
            $("#del_login_form").bind("click",function () {
                $("#login_form").addClass("hide");
                $("#shade").addClass("hide");
            })
        }

        function bind_ajax_login() {
            $("#ajax_login").bind("click",function () {
                var user_name = $(":text").val();
                var user_pwd = $(":password").val();

                $.ajax(
                    {
                        url:"/app1/login/",
                        type:"post",
                        data:{
                            user_name:user_name,
                            user_pwd:user_pwd
                        },
                        success:function (data) {
                                data = JSON.parse(data);
                                var statues = data["status"];
                                if (statues == "failed"){
                                    $("#error").html(data["error"])
                                }else {
                                    window.location.href = "/app1/classes/"
                                }
                        }
                    }
                )
            })
        }
    </script>
</body>
</html>

这里未实现注册功能，点击登陆弹出一个模态对话框

下面我们就具体来看下html的代码

先看head标签的内容，这里有3个知识点，1个模态对话框的css的代码，一个是引入css的静态文件，一个设置标签不显示的css

    <link rel="stylesheet" href="/static/css/css1.css">
    <style>
        .modal{
            position: fixed;
            left: 50%;
            top: 50%;
            width: 300px;
            height: 200px;
            margin-left: -150px;
            margin-top: -100px;
            z-index: 101;
            background-color: rebeccapurple;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: green;
{#            opacity: 0.8;#}
            z-index: 100;
        }

        .hide{
            display: none;
        }
    </style>

知识点1：模态对话框，这里需要注意，modal和shade的position的都是fixed的。

知识点2：引入静态文件

这里需要主要，如果我们要使用link引入静态文件，则必须要在settings文件进行设置才可以，这样django就会到static目录下去寻找静态文件

注：

　　a、静态文件主要是图片，css文件，jquery，jquery的插件

　　b、BASE_DIR的目录是指：在settings文件中也有设置

下面看下body标签中的内容，包括html代码和javascript的代码

    <input type="button" value="注册" id="register">
    <input type="button" value="登陆" id="login">
    <div class="hide modal" id="login_form">
        <form action="/app1/form_login/" method="post">
            <p><label for="username">用户名</label>:<input type="text" placeholder="用户名" name="user_name" id="username"></p>
            <p><label for="userpwd">密码</label>:<input type="password" placeholder="密码" name="user_pwd" id="userpwd"></p>
            <p><span id="error"></span></p>
            <input type="submit" value="form提交">
            <input type="button" value="ajax提交" id="ajax_login">
            <input type="reset" value="重置">
            <input type="button" value="取消" id="del_login_form">
        </form>
    </div>
    <div class="hide shade" id="shade">

    </div>

下面javascript的代码

    <script src="/static/jq/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            bind_login_func();
            del_login_form();
            bind_ajax_login();

        });
{#        这个函数页面一加载完成就会执行#}



        function bind_login_func() {
            $("#login").bind("click",function () {
                $("#error").html("")
                $("#login_form").removeClass("hide");
                $("#shade").removeClass("hide");
            })
        }
        function del_login_form() {
            $("#del_login_form").bind("click",function () {
                $("#login_form").addClass("hide");
                $("#shade").addClass("hide");
            })
        }

        function bind_ajax_login() {
            $("#ajax_login").bind("click",function () {
                var user_name = $(":text").val();
                var user_pwd = $(":password").val();

                $.ajax(
                    {
                        url:"/app1/login/",
                        type:"post",
                        data:{
                            user_name:user_name,
                            user_pwd:user_pwd
                        },
                        success:function (data) {
                                data = JSON.parse(data);
                                var statues = data["status"];
                                if (statues == "failed"){
                                    $("#error").html(data["error"])
                                }else {
                                    window.location.href = "/app1/classes/"
                                }
                        }
                    }
                )
            })
        }
    </script>
</body>

这里大部分的的代码都很简单，我们就来简单的讲解一下

知识点1：

a、写了2个button的按钮，点击按钮会触发jquery的代码

b、引入jquery文件

c、$(function)函数，这个函数在页面加载成功后就会自动执行的，所以按照惯例，我们会把我们所有事件触发的函数写在这里

d、为id为login的标签绑定“click”事件，这里说先把id为error的标签的内容清空，如果没有这段代码，则如果上次登陆失败，下次再次登陆，就又会有错误信息，所以每次点击登陆，把错误信息清空；然后把模态对话框的标签的hide属性去掉，让他们显示出来，用removeClass方法来删除标签的某个属性，在jquery中，用.html方法获取标签的属性的值

e、弹出框有“取消按钮”，“重置按钮”，“form提交按钮”，“ajax提交按钮”，下面我们娓娓道来

取消按钮，我们这里也绑定了事件，就是把模态对话框的hide属性添加回去，就回到之前的登陆的状态，用addClass方法为某个标签添加class属性

重置按钮，使用input标签，type的属性为reset的标签，这个标签的就会把form标签中的所有input的输入框的内容前部清空

ajax提交按钮：这里就是用来登录标签

首先为这个标签设置一个id

为这个id绑定一个事件，首先用.val方法获取input标签中输入的值，然后通过$.ajax方法把拿到数据传给后端

重点说一下$.ajax方法的参数

url：指明向哪个url发送数据

type：指明传递的数据的方法，比如post或者get

data：这个就是向后端传递的字典

success：这个如果前端成功发送给后端，后端又成功返回数据成功后，就会执行的函数，这个函数有个参数，在下面的例子中是data，这个data就是后端通过Httpresponse发送给前端的数据，因为后端发送过来的数据是一个json的字符串，这里需要通过JSON.parse方法把字符串转换成个jquer的对象，后端发来的是一个字典，先获取status对应的字段，如果是failed，则证明登陆失败，则通过html方法为span标签赋值，如果登陆成功，则通过windows.location.href = url方法，直接访问url对应的路径；这里需要注意，如果前端使用ajax和后端通信，则后端如果要给前段返回数据，则一定要Httpsponse方法返回一个json.dumps方法处理过的字符串

下面我们在来看ajax提交对应的视图文件中的函数，这里我们用到了几个知识点

a、从request中通过k获取数据

b、从数据库中获取数据

c、设置seesion，设置session使用request方法设置就可以了

如果校验通过，则设在session

d、json.dumps给前端返回数据

视图函数的代码如下

def login(request):
    method = request.method.lower()
    if method == "get":
        return redirect("/app1/home/")
    else:
        input_name = request.POST.get("user_name")
        input_pwd = request.POST.get("user_pwd")
        db_name = models.manager.objects.get(id=1).manager_name
        db_pwd = models.manager.objects.get(id=1).manager_pwd
        if db_name == input_name and db_pwd == input_pwd:
            error_dict = {"error": "用户名或者密码错误", "status": "success"}
            rep = HttpResponse(json.dumps(error_dict))
            request.session["username"] = db_name
            request.session["userpwd"] = db_pwd
            return rep
        else:
            error_dict = {"error":"用户名或者密码错误","status":"failed"}
            return HttpResponse(json.dumps(error_dict))

下面我们在看下form提交的按钮

首先这个type必须是submit类型，只有这个类型才会触发form表单向后端发送数据

这里提交的数据就是input标签中的数据,字典格式的数据，k值分别input标签中的name属性对应的值，v值分别对应的input框的中输入的值

下面我们来看后端处理的代码，这里的知识点和ajax提交对应的后台的视图函数的一致

这里我们也需要通过request方法去获取前端传递过来的数据

然后从数据库中拿到数据，和前端发送过来的数据对比

如果对比成功，则redirect方法直接重定向到classes页面，且要设置session

如果对比失败，则使用redirect方法直接重定向到登录页面，这里做的不好，应该使用render方法把错误信息渲染的前端页面

def form_login(request):
    method = request.method.lower()
    if method == "get":
        return redirect("/app1/home/")
    else:
        input_name = request.POST.get("user_name")
        input_pwd = request.POST.get("user_pwd")
        db_name = models.manager.objects.get(id=1).manager_name
        db_pwd = models.manager.objects.get(id=1).manager_pwd
        if db_name == input_name and db_pwd == input_pwd:
            request.session["username"] = db_name
            request.session["userpwd"] = db_pwd
            # class_list = models.classes.objects.all()
            return redirect("/app1/classes/")
        else:
            return redirect("/app1/home/")

至此登录的代码我们已经梳理完了，明天在属性class页面的功能，再见

用户管理系统的作业之登陆

猜你喜欢