就剩一个登陆了，把这个小demo写完整。为了不会把新手带偏，这里在登录里我就不涉及session与cookie了，虽然很简单，但是对于新人来说还是有点晕的，感兴趣的可以自行了解一下。
实现登录
登录界面
登录界面我们把注册界面拿过来用一用，修改一下提交地址和按钮名称就行了。
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" action="doAction.php?action=login" method="post">
<h2 class="form-signin-heading">Please sign up</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<br>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<br>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<br>
<input type="submit" class="btn btn-lg btn-primary btn-block" type="submit" value="Sign up">
</form>
</div>
</body>
</html>
PHP登录逻辑实现主要代码
$sql = "select email,password from users where email='%s'";
$formatted = sprintf($sql, $data['email']);
$result = mysqli_query($handle, $formatted);
$res = mysqli_fetch_assoc($result);
if(!$res){
echo "<script>alert('无此用户！')</script>";
echo "<script>window.location.href='login.html'</script>";
}
// 此处应注意的是数据库的密码是摘要后的，无法还原的
// 所以我们对比密码的方法就是把提交过来的密码也进行摘要
// 然后两个密码做对比，相同的话登录到首页
if ($data['password'] == $res['password']) {
// 核对邮件和密码无误后登录到首页
echo "<script>alert('登录成功！')</script>";
echo "<script>window.location.href='home.html'</script>";
}else{
echo "<script>alert('密码错误！')</script>";
echo "<script>window.location.href='login.html'</script>";
}
PHP注册登录完整代码
<?php
/**
* 配置数据库信息
*/
define('host', '127.0.0.1');
define('user', 'root');
define('passwd', '');
define('dbName', 'artist_demo');
$handle = mysqli_connect(host, user, passwd, dbName);
if (!$handle) {
die('连接数据库失败！' . mysqli_connect_error());
}
$action = $_GET['action']; // 获取get过来的action行为参数
if (!$action) {
// 如果没有该参数，跳转到登录页面
echo "<script>window.location.href='login.html'</script>";
}
// 如果行为参数为register我们继续进行下面的操作
$email = $_POST['email'];
$password = $_POST['password'];
// trim()函数去除两边空白
// stripcslashes()去除转义字符
// htmlspecialchars()把一些预定义的字符转换为 HTML 实体
// md5()数据摘要(习惯上称为加密，但是md5()实际上不是加密，而是摘要)
$data['email'] = htmlspecialchars(stripcslashes(trim($email)));
$data['password'] = md5($password);
if ($action == 'register') {
$sql = "insert into users (email, password) values('%s', '%s')";
$formatted = sprintf($sql, $data['email'], $data['password']);
echo '打印刚才执行的SQL语句：' . '<br>' . $formatted . '<br>';
$result = mysqli_query($handle, $formatted);
echo $result ? '注册成功!' : '注册失败!';
}elseif ($action == 'login') {
$sql = "select email,password from users where email='%s'";
$formatted = sprintf($sql, $data['email']);
$result = mysqli_query($handle, $formatted);
$res = mysqli_fetch_assoc($result);
if(!$res){
echo "<script>alert('无此用户！')</script>";
echo "<script>window.location.href='login.html'</script>";
}
// 此处应注意的是数据库的密码是摘要后的，无法还原的
// 所以我们对比密码的方法就是把提交过来的密码也进行摘要
// 然后两个密码做对比，相同的话登录到首页
if ($data['password'] == $res['password']) {
// 核对邮件和密码无误后登录到首页
echo "<script>alert('登录成功！')</script>";
echo "<script>window.location.href='home.html'</script>";
}else{
echo "<script>alert('密码错误！')</script>";
echo "<script>window.location.href='login.html'</script>";
}
}
image.png
顺便附上首页代码
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
</html>
image.png
