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 "用户名或密码错误";
?>

猜你喜欢