php做登录注册

思想：

首先需要有后台数据库及数据表（mysql）  比如数据库的名字叫1823test  数据表叫0109list

一，注册

前端部分

html结构  结构自己根据需求而定    记得向后台提交信息时  一定要添加上 name 属性

 <form action="register.php" method = "GET">
       <p>用户名：<input type="text" name = "username" id="user"></p>
       <p>密码：<input type="text" name = "password" id="paw"></p>
       <p><button id="subm">注册</button></p>
       <div></div>
    </form>

js结构

 获取元素
 var oName = document.getElementById('user');
  var oPwd = document.getElementById('paw');
  var subm = document.querySelector('button');

//添加失焦事件：
oName.onblur = function(){
    var reg = /^w{6,10}/;
    var str = oName.value;
    if(reg.test(str)){
        flagname = true;
    }else{
        oDiv.innerHTML = "包含字母、数字、下划线，在6-10位之间";
        flagname = false;
    }
}

//声明一个变量控制subm提交：
var flagpwd = null;

//添加失焦事件：
oPwd.onblur = function(){
    var reg = /^w{6,10}/;
    var str = oPwd.value;
    if(reg.test(str)){
        flagpwd = true;
    }else{
        oDiv.innerHTML = "包含字母、数字、下划线，在6-10位之间";
        flagpwd = false;
    }
}

给提交按钮添加监听事件 subm.addEventListener('click', register);

  function register() {
    // 获取用户输入的数据
    var userval = username.value;
    var paswval = pasw.value;
    //  利用ajax向后端发送数据
    var url = "http://127.0.0.1/0109log/php/register.php";
    url += `?username=${userval}&password=${paswval}`; 

     ajaxGet(url)
    .then(function(str){
       if(str === "用户名或密码不能为空"){
         alert("用户名密码不能为空！")
        }else  if(str === "用户名重复"){
        alert("用户名重复")
      }else{
        alert("注册成功！")
       }
    })
  }

向后台发送数据 （用户名 密码）
 function ajaxGet(url) {
    return new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open('get',url);
      xhr.send();
      xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
          resolve(xhr.response);
        }
      }
    })
  }

后端部分

<?php

header("Content-Type: text/html;charset=utf-8");

连接数据库
$con = mysql_connect('localhost','root','root');
    if(!$con){
        die('{"state":"error","errorType":"数据库连接错误"}');
    }
选择数据库
    mysql_select_db("1823test");

 获取前端发来的数据
$username = $_REQUEST['username'];//前端定义的name属性
$password = $_REQUEST['password'];
 

// 验证用户是否存在
if(!$username || !$password){
echo "用户名或密码不能为空";
die;
}
// 验证用户是否重复
require('./connect.php');//导入连接数据库的url
$find = "SELECT username FROM 0109list";//查询用户名
$result = mysql_query($find);//执行查询语句（结果）

 


while($row = mysql_fetch_array($result)){//遍历数据库表格的每一行
// mysql_fetch_array()查询回来的结果返回的是一个集合(表格中的所有用户名)，需转为php数组,否则无法使用
if($username === $row['username']){
echo "用户名重复";
// die('{"state":"error","errorType":"用户名重复"}');
mysql_close($con);
die;
}
}
 


// 新用户的话就插入到数据库
$password = md5($password);//md5是对密码进行编码 
$inser = "INSERT INTO 0109list (username , password) VALUES ('$username','$password')";
$res = mysql_query($inser);


    if($res){
            die('{"state":"success","errorType":"null"}');
 
        }else{
            die('{"state":"error","errorType":"数据库插入失败"}');
        }
?>

二，登录

前端部分

html结构  结构自己根据需求而定    记得向后台提交信息时  一定要添加上 name 属性

 <form action="register.php" method = "POST">
       <p>用户名：<input type="text" name = "username" id="user"></p>
       <p>密码：<input type="text" name = "password" id="paw"></p>
       <p><button id="subm">登录</button></p>
       <div></div>
    </form>

js结构

 获取元素
 var oName = document.getElementById('user');
  var oPwd = document.getElementById('paw');
  var subm = document.querySelector('button');

// 点击发送数据;
subm.addEventListener("click",login);


    function login() {
        // 获取用户输入的数据
        var userval = username.value;
        var paswval = pasw.value;




        // 根据接口文档定义的一个数据对象;
        var data = {
            username: userval,
            password: paswval
        }
        // console.log(data)
 
// 调用 ajax 封装 实现数据发送;
        ajaxPost("http://127.0.0.1/0109log/php/login.php", data)
            .then(function (str) { //str => xhr.response;
                console.log(str);
                if(str === '用户名或密码错误'){
                    alert("用户名或密码错误！")
                }else if(str === '参数不能为空'){
                    alert("用户名或密码不能为空")
                }else{
                    alert("登录成功！")
                } 
            })
    }
 


function ajaxPost(url, data) {
// console.log(data);



        return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");




            // 现在的data是一个对象, 我们需要把它转为键值对的形式发送给后端;
            var data_str = "";
            for (var attr in data) {
                // 遍历输入的用户名和密码 {username : aaa, password :12346};
 
                // 将用户名密码以key=value的形式拼接发送给后端
                data_str += attr + "=" + data[attr];
                if (data_str.length !== 0) {
                    // 再将用户名密码就以&分隔
                    data_str += "&";
                }
            }
            // {username : aaa, password :12346};




            xhr.send(data_str);
            // console.log(data_str);
            // username=aaa&password=12346




            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(xhr.response);
                }
            }
        })
    }

后端部分

<?php
    header("Content-Type: text/html;charset=utf-8");
    // 获取前端数据
    $username = $_POST['username'];//前端定义的name属性
    $password =$_POST['password'];// 验证用户是否存在 
    if(!$username || !$password){
      echo "参数不能为空";
      die;
    }

    //链接数据库;
      require("./connect.php");
      $user = "SELECT * FROM 0109list";
      $res = mysql_query($user);
      while($row = mysql_fetch_array($res)){// 有没有用户名密码; 如果表格中每一行与用户输入的用户名相同密码相同 就登陆成功
            
            if($row['username'] === $username && $row['password'] == md5($password)-0){
                  // 由于用户输入的密码是字符串类型 所以这里要转一下数据类型 除以1 减0 都可转
                  echo "登陆成功!!!";
                  die;   
            }
      } 
            echo "用户名或密码错误";
?>