php与数据库交互初体验——搭建注册登录界面

发布于 2021-06-10  87 次阅读


 前言: 之前学习前端基础的时候一直基于客户端,或者说基于浏览器,作为一个小白,一直很好奇前后端是如何交互的,昨天研究了一段时间,有了那么点思路,今天想以本地服务器和php搭建用户注册登录界面为例,来加深记忆,也希望对同样是小白的朋友有帮助。阅读本文最好有前端三大件、PHP以及数据库的概念和基础,当然。如果你天赋超群的话,当我没说。

服务器环境配置

 因为暂时没有闲置的服务器,就用自己的电脑吧,反正原理是一样的。我的是windows10系统,Linux的小伙伴对不起咯,你们可以找其他的文章看看。由于是新手,建议只用集成软件来搭建,简单方便,这里我使用的是phpStudy,你也可以使用wampServer等其他集成软件,效果相似。 下面是具体步骤:

  1. 软件下载完成后,打开界面如下图,它已经安装好了如图所示四大件,我们直接用就好了。首先我们直接点击Apache2.4.39和MySQL5.5.29(版本无所谓)的启动按钮,一般来说会很顺利。可能会出现的问题一般有两个,一是端口占用问题,这个好解决,cmd命令杀死占用的进程就行,详情自行百度。还有一种就是MySQL无法启动但不是端口的问题(我就是在这里卡了好久),结论是:如果你之前自己安装过SQL,那么该集成软件是无法启动它的sql的,所以你需要把之前的SQL进程停掉,具体方法请移至百度。 01.png
  2. 打开phpstudy安装的目录,找到WWW并进入,如下图所示。 一般来说你只能看见最上面的两个文件夹和一个名为index.php的文件,这里我已经写好了用户的注册登录界面。其中index.php是网站的默认界面,即打开网站会首先跳转到index.php。至此本地服务器的环境已配置完毕,毕竟是集成环境,是不是很简单~~ 03.png

数据库环境搭建

  1. 接下来请看到软件的数据库界面,如图: 02.png 在这里你可以看到数据库的用户名和密码,一般默认的密码都是root,为了操作方便我就不改密码了。
  2. 同样为了使数据库可视化,我们使用一个小工具phpMyAdmin,直接在phpstudy的软件管理中安装就好了,如图: 04.png 这里我已经安装过了。然后点击"管理",浏览器会进入到一个界面,第一次应该会要求输入用户名和密码,之后就不用了。登录之后会出现如下界面: 05.png 这样到这就表示数据库登录成功啦!!
  3. 为之后的设计用户登录界面做准备。我们先建个测试用的表。如图:
  4. 06.png 点击左侧的mysql(这是数据库名),点击新建。我们按照下图填写: 07.png 由于只是测试用,不用谢太复杂,表名我们设为"test”,字段名就两个,“username”和“password”,类型就选TEXT就行,其他不用填,然后点击右下角的执行,我这图里没截到。
  5. 接下来我们就能在mysql这个数据库中看到我们刚刚创建的表“test"。
    08.png
  6. 我们点击它,就会出现如下界面:
    09.png
    我们可以看到两个字段的内容都为空,因为我们并没有往表里插入数据,我们点击右上角的"插入",(如果你会sql的话可以直接用语句插入。)出现以下界面: 10.png 我们直接在两个文本框中写入数据,这里就直接写“username”和“password”。点击执行。
  7. 检查是否插入成功。当点击上一步的执行后会出现以下界面: 11.png 我们直接查询"test"这张表,可以用sql语句,也可以点击左下角的SELECT*,然后点击执行。结果如下: 12.png
    可以看到,现在的表里已经有内容了,也就是我们刚刚插入的数据。 到此,数据库的部分已经配置完毕。

前端页面的实现

 我承认这一步我偷了点懒,改了改人家的样式,美化了一丢丢。

  1. 登录界面的HTML。
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
    background-size: cover;
                   min-width: 1000px;
    background-image:url(https://img14.360buyimg.com/ddimg/jfs/t1/173858/34/13992/703375/60c1935bEc09335dc/2ff604e5a3cf6a17.jpg);
    font-size:14px;
    }
    #main {
    width:360px;
    height:320px;
    background:#fff;
    border:1px solid #ddd;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-180px;
    margin-top:-160px;
    background-size: cover;
    background-image:url(https://img10.360buyimg.com/ddimg/jfs/t1/178446/19/8424/2229078/60c1935dE8b8c9e27/8d600da7d44741f2.jpg);
    }
    #main .title {
    height: 48px;
    line-height: 48px;
    color:#bfa;
    font-size:16px;
    font-weight:bold;
    text-indent:30px;
    border-bottom:1px dashed #eee;

    }
    #main form {
    width:300px;
    margin:20px 0 0 40px;
    }
    #main form label {
    margin:20px 0 0 40px;
    display:block;
    }
    #main form label input.text {
       border-radius: 20px;
    width:200px;
    height:25px;
    }

    #main form input.submit {
       text-align: center;
       border-radius: 20px;
    width:100px;
    display:block;
    height:35px;
    cursor:pointer;
    margin:20px 0 0 90px;
    }


    #info{
       text-align: center;
       color: greenyellow;
       font-size: larger;
       font-family: cursive;
    }


    </style>
    </head>
    <body>
    <div id="main">
    <div class="title">欢迎使用,请登录</div>
    <form  action="login.php" method="post" onsubmit="return enter()">
    <label><input class="text" type="text"  placeholder="用户名" name="username" /></label>
    <label><input class="text" type="password"  placeholder="密码" name="password" /></label>

    <input class = "submit" type="submit" name="submit" value="登录" />

    <a href="register.html" target="_self"  style="color: #bfa;position: absolute; bottom: 20px; right: 10px;">没有账号,先注册</a>

    </form>
           <p id = "info">啦啦啦啦啦</p> }
           </script>

    </div>

    </body>
    </html>
  2. 注册界面的HTML(跟登录界面简直一模一样,😶)
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
       background-size: cover;

       min-width: 500px;

    background-image:url(https://img10.360buyimg.com/ddimg/jfs/t1/178446/19/8424/2229078/60c1935dE8b8c9e27/8d600da7d44741f2.jpg);

    font-size:14px;
    }
    #main {
    width:360px;
    height:320px;
    background:#fff;
    border:1px solid #ddd;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-180px;
    margin-top:-160px;
    background-size: cover;
    background-image:url(https://img13.360buyimg.com/ddimg/jfs/t1/183837/28/8470/170680/60c1efe9E8afd95f0/90dc1d165d5382b7.jpg);
    }
    #main .title {
    height: 48px;
    line-height: 48px;
    color:#bfa;
    font-size:16px;
    font-weight:bold;
    text-indent:30px;
    border-bottom:1px dashed #eee;

    }
    #main form {
    width:300px;
    margin:20px 0 0 40px;
    }
    #main form label {
    margin:20px 0 0 40px;
    display:block;
    }
    #main form label input.text {
    width:200px;
    height:25px;
       border-radius: 20px;
    }
    #main form input.submit {
       text-align: center;
       border-radius: 20px;
    width:100px;
    display:block;
    height:35px;
    cursor:pointer;
    margin:20px 0 0 90px;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div class="title">注册</div>
    <form  action="register.php" method="post" onsubmit="return enter()">
    <label><input class="text" type="text"  placeholder="用户名" name="username" /></label>
    <label><input class="text" type="password"  placeholder="密码" name="password" /></label>
               <input class="submit" type="submit" name="submit" value="注册" />
               <a href="index.html" target="_self"  style="color: #bfa;position: absolute; bottom: 20px; right: 10px;">已有账号,去登陆</a>

    </form>
    </div>

    </body>
    </html>

PHP与前端及数据库交互的实现

为少写一行代码,我选择将index.html优先级提高,操作如图: 13.png 选择“网站”,点击“管理”,将index.html调整到index.php前面,这样我们的网站首页就直接是登录界面了。

login.php的编写与测试 下面就比较重要的,是本次交互的关键。源代码有点乱,我改了很多,去掉了多余的功能如cookie。因为只是测试,就不用正则表达式判定输入内容啦,注册界面也一样,就是懒~~
<?php
error_reporting(0);
//第一次登陆的时候,通过用户输入的信息来确认用户
//如果提交的表单用户名与密码都不为空,则开始判断
if ((($_POST['username'])) != NULL && (($_POST['password']) != NULL)) {
   $userName = $_POST['username'];
   $password = $_POST['password'];
   //从db获取用户信息
   //PS:数据库连接信息改成自己的 分别为主机 数据库用户名 密码
   $conn = mysqli_connect('localhost:3306', 'root', 'root');//这里端口默认是3306,看自己的情况来输入

   mysqli_select_db($conn, 'mysql');//数据库选择'mysql'
//将用户输入的用户名及其所对应的密码选出来传给res
   $sql = "select username,password from test where username = '$userName'";//这里的test是我们建的表名
   $res = mysqli_query($conn, $sql);//表示从数据库中执行上述sql语句
   $row = mysqli_fetch_array($res);
   if ($row['username'] == $userName && $row['password'] != $password) {
       echo "<script>alert('密码错误,请重新输入!');location.href = 'index.html';</script>";
  }else if ($row['username'] != $userName && $row['password'] != $password) {
       echo "<script>alert('用户不存在!');location.href = 'index.html';</script>";
  }else{
       echo "<script>alert('登陆成功!!');location.href='https://yeyixuan.xyz';</script>";
       //这里以我的博客主页为登陆成功的返回页
  }
}else if((($_POST['username'])) == NULL && (($_POST['password']) == NULL)){
   echo "<script>alert('名字和密码都没有就想登录,做梦呢!');location.href = 'index.html';</script>";
}else if((($_POST['username'])) == NULL && (($_POST['password']) != NULL)){
   echo "<script>alert('是不是忘了写名字啦~~');location.href = 'index.html';</script>";
}else{
   echo "<script>alert('密码没输哦~~');location.href = 'index.html';</script>";
}
下面来测试能否登陆。还记得前面我们建表的时候插入了一组数据,用户名是'username',密码是'password'。这就相当于一个人注册了一个这样的账号,我们来看看能否登陆,理论上如果登陆成功会跳转到我的博客。

Nice!

register.php的编写与测试 其实代码逻辑与登陆很相似,甚至还简单一些。同样的,因为懒,就不对输入内容进行判断了。有兴趣的可以自己加验证功能。
<?php
error_reporting(0);
$username = ($_POST['username']);
$password = trim($_POST['password']);
$conn = mysqli_connect('localhost', 'root', 'root');

//如果有错误,存在错误号
if (mysqli_errno($conn)) {
   echo mysqli_error($conn);
   exit;
}

mysqli_select_db($conn, 'mysql');   //选择数据库
mysqli_set_charset($conn, 'utf8');   //选择字符集

$sql = "select username from test where username = 'username'";
$result = mysqli_query($conn, $sql); //针对user这个数据库进行查询, 查询是否存在有这个用户
$row = mysqli_num_rows($result); //输出查询结果,传给$row

if ($_POST['username'] == NULL) {
   echo "<script>alert('用户名不能为空');location.href='register.html';</script>";
} else if ($_POST['password'] == NULL) {
   echo "<script>alert('密码不能为空');location.href='register.html';</script>";
} else {
   if ($row) {
       echo "<script>alert('用户名已存在');location.href='register.html';</script>";
  } else {
       //PHP MySQL 插入数据
       $sql1 = "insert into test(username,password) values('" . $username . "','" . $password . "')";
       $result = mysqli_query($conn, $sql1); //判断插入数据是否成功
       if ($row) {
           echo "<script>alert('注册失败,请稍后再试!');location.href='register.html';</script>";
      } else {
           echo "<script>alert('注册成功!');location.href='index.html';</script>";
      }
  }
}
mysqli_close($conn);

​下面来测试注册功能,理论上已有用户名无法注册,且注册成功后数据会存进数据库,并且可以进行登录。下面我们来一一测试。

至此,本次体验圆满结束!完结撒花✿✿ヽ(°▽°)ノ✿~~~

后记

 这是我第一次体验与后端交互,感觉妙不可言,这个过程中又学到了一些新知识,保存起来以防忘记,也希望能够帮助到其他的小伙伴们。虽然效果看起来很一般,还有很多可以完善的地方,慢慢来嘛,一口吃成个胖子使不得。本篇内容也是将近写了半天,还挺有成就感,毕竟php才学了两天。目前博客还是用的hexo静态框架,貌似用不到数据库。我想着以后换成WordPress,刚好可以练习练习。再说吧,等闲下来继续更咯!~~