梅科尔工作室-django web应用（三）（登陆验证）-CSDN博客

<div class="container">
    <div class="body">
        <div class="login">
            <div class="top-img">

            </div>
            <div class="login-body">
                <div class="login-body-top-txt">
                    <div class="txt1">
                        <text>您好</text>
                    </div>
                    <div class="txt2">
                        <text>请登录你的账号</text>
                    </div>
                </div>
                <div class="input-all">
                    <input type="text"  maxlength="10" placeholder="用户名" onchange="inputAccount"></input>
                    <input type="password"  maxlength="15" placeholder="密码" onchange="inputPassword"></input>
                    <div class="forget">
                        <div class="help"><text>{{myText}}</text></div>
                        <div><text>忘记密码？</text></div>
                    </div>
                </div>
                <div class="login-button" onclick="OnClick">
                    <div class="mybutton">
                        <text>登陆</text>
                    </div>
                </div>
                <div class="no-account">
                    <div>

                    </div>
                    <div>
                        <text>没有账号？</text>
                        <text>注册一个</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.2.js逻辑编写

具体请求相关代码讲解以及js与后端交互注意点在前几节有讲解（fetch）

用户名输入及密码输入都多了onchange函数，内部inputAccount以及inputPassword会动态获取输入框的值。因为没有实机进行调试，将请求代码中qs.stringify内部代码写成了实例。如果有真机可将“a”改成this.username,“aaa”改成this.password。

从后端响应的数据resp.data显示前端（myText）

3.后端（对登陆进行验证）

3.1.主要代码（view视图）

3.2.与上节不同处

（1）数据库中的表不同（查询采用的ORM模型）

（2）多了验证环节：首先遍历列表，获取列表中每一个自带的username与password，并将其与前端请求的username及password进行比对。当用户名存在且密码对应时，返回“登陆成功”；当用户存在但密码不对应时，返回“密码错误，请重新输入”；当跳出循环，则表明不存在这个用户，返回查无此人。