web安全学习笔记（11）

记一下第十五节课的内容。

一、创建MySQL执行函数

我们在function.php中，自定义一个函数：

#SQL查询函数
function Qurey($sql)
{
    #连接数据库
    $db = @new mysqli('172.20.10.3', 'liuyan', '123456', 'liuyan', 3306);
    #判断是否连接成功
    if (mysqli_connect_errno() != 0) {
        echo 'MySQL连接产生错误';
        echo mysqli_connect_error();
    }
    #执行sql语句
    $result = $db->query($sql);
    #执行关闭语句
    $db->close();
    #判断SQL语句中是否包含select，如果包含则输出查询的结果否则直接输出obj数据格式
    if (strstr(strtolower($sql), 'select')) {
        return $result->fetch_all(MYSQLI_ASSOC);
    } else {
        return $result;
    }
}

这个函数的功能是执行SQL查询。

接下来我们去改写index.php文件。我们这节课做的内容是让登录和注册页面能够和我们的数据库相连接，并进行更贴合实际的注册、登录操作。

将登录接口部分改为：

其中end函数的作用是取二维数组的最后一个元素。因为这里我们只查询到了一个结果，所以使用end函数找到的最后一个元素，实际上就是唯一的那个元素。事实上，查询到的result是一个二维数组，并且这个二维数组的每一个元素又分别是一个键值数组，大致是如下形式（仅为示例）：

这样我们就成功地将前端页面和数据库链接到了一起，通过判断数据库中是否存在我们的用户信息以及验证其正确性来判断是否能成功登陆。

接下来我们修改注册接口部分：

因为注册时涉及判断两次输入的密码是否一致、用户名是否已经存在等问题，在代码上实现起来比较繁琐，但是逻辑上是比较容易接受的。而需要注意的是，在判断是否执行成功时，此时我们执行的是insert语句，所以执行的结果只有成功（TRUE）和失败（FALSE），因此下面的判断才写了

if ($result == FALSE)

完整代码如下：

require_once("./function.php");
$a = !empty($_GET['a']) ? $_GET['a'] : 'login';
 
$b = !empty($_GET['b']) ? $_GET['b'] : 'index';
 
$f = $_SERVER['REQUEST_METHOD'];
switch ($a) {
    case 'login':
        switch ($b) {
            #登录接口：
            case 'index':
                switch ($f) {
                    #请求登录页面
                    case 'GET':
                        require_once('./template/login.html');
                        break;
                    #验证账户密码正确性
                    case 'POST':
                        $username = $_POST['username'];
                        $password = $_POST['password'];
                        $sql = "SELECT * FROM member WHERE username = '$username' AND password = '$password'";
                        $result = Qurey($sql);
                        #end函数取二维数组中取最后一个元素
                        $result = end($result);
                        #判断是否查询到了数据
                        if(empty($result)){
                            alert('账户密码错误!','./index.php?a=login&b=index');
                        }
                        alert('账户登录成功!','./index.php?a=index&b=index');
                        break;
 
                    default:
                        # code...
                        break;
                }
                break;
            #注册接口：
            case 'reg':
                switch ($f) {
                    #请求登录页面
                    case 'GET':
                        require_once('./template/reg.html');
                        break;
                    #验证账户密码正确性
                    case 'POST':
                        #用户名
                        $username = $_POST['username'];
                        #密码
                        $password1 = $_POST['password1'];
                        #二次输入密码
                        $password2 = $_POST['password2'];
                        #判断两次密码的一致性
                        if($password1 != $password2){
                            alert('输入的密码不一致！','');
                        }
 
                        #查询用户信息
                        $sql = "SELECT * FROM member WHERE username='$username'";
                        $result = Qurey($sql);
                        #判断用户名是否已经存在
                        if(!empty($result)){
                            alert("注册的账户[$username]已经存在，请更换其他用户名！",'');
                        }
 
                        #添加用户sql语句
                        $sql = "INSERT INTO member (username,password) VALUES ('$username','$password1')";
                        #执行sql语句
                        $result = Qurey($sql);
                        #判断是否执行成功
                        if ($result == FALSE){
                            alert('注册失败！','');
                        }
 
                        #如何将用户名输出到弹窗中？
                        alert($msg = $username . '注册成功！', $url = './index.php?a=login&b=index');
                        // die('');
                        break;
 
                    default:
                        # code...
                        break;
                }
                break;
            default:
                # code...
                break;
        }
        break;
 
    default:
        # code...
        break;
}

二、JavaScript基础知识

我们还可以在前端实现检查两次密码是否一致的判断，我们修改reg.html：

首先自定义一个函数，这里使用的就是JavaScript语言：

有以下几点需要说明：

1.JavaScript中声明变量要使用关键字var

2.这里的alert函数是JavaScript自带的函数，要注意和前面我们自定义的alert函数区分开

3.document节点是文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。也就是说，只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。而getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。注意，在搜索匹配节点时，id属性是大小写敏感的。比如，如果某个节点的id属性是main，那么document.getElementById("Main")将返回null，而不是指定节点。以上引用于JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客

此外，我们还需要进行如下修改，对“密码”和“再次输入”栏添加id属性，以及对“立即注册”按钮添加onclick属性：

完整代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<form method = "post" action="http://172.20.10.3/index.php?a=login&b=reg">
    用户名：<input type = "text" name = "username" value="admin"><br><br>
    密  码：<input type = "password" name = "password1" id = "password1" value="123456"><br><br>
    再次输入：<input type = "password" name = "password2" id = "password2" value="123456"><br><br>
    <input type = "submit" onclick="CheckPassword" value = "立即注册">
form>
 
<script>
//检查密码是否一致
function CheckPassword(params) {
    var password1 = document.getElementById('password1').value
    var password2 = document.getElementById('password2').value
    if(password1 != password2){
        return alert("两次输入的密码不一致，请检查密码准确性！")
    }
}
script>

但是，虽然我们在前端判断密码是否一致，若不一致就不会成功注册，但是这样仍然会提交表单信息，这是因为form表单会自动提交数据包。

三、原生态AJAX

我们注意到，如果我们在注册时不小心填错了密码，那么在弹窗提示错误之后，返回注册页面时，我们发现原来填写的数据就已经消失了，造成了不便利。

我们把reg.html改为以下内容：

 
<form method = "post" action="./index.php?a=login&b=reg">
    用户名：<input type = "text" name = "username" id="username"><br><br>
    密  码：<input type = "password" name = "password1" id = "password1" ><br><br>
    再次输入：<input type = "password" name = "password2" id = "password2" ><br><br>
    <input type = "submit" onclick="CheckPassword" value = "立即注册">
form>
 
 
 
<script>
//检查密码是否一致
function CheckPassword() {
    var username = document.getElementById('username').value
    var password1 = document.getElementById('password1').value
    var password2 = document.getElementById('password2').value
    if(password1 != password2){
        return alert("两次输入的密码不一致，请检查密码准确性！");
    }
 
    var xml = new XMLHttpRequest();
    //绑定事件
    xml.onreadystatechange=function(){
        if (xml.readyState == 4 && xml.status == 200) {
            var respText = xml.responseText;
            eval(respText);
        }
    }
    xml.open('post','./index.php?a=login&b=reg',false)
    xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xml.send('username='+username+'&password1'+password1+'&password2'+password2)
}
script>

这样仍旧解决不了问题，不会，不学了。有空再看吧。

玩转原生态AJAX_ajax原生态-CSDN博客