最近有一个项目需要实现会员注册和页面登陆后才能访问,所以简单的HTML是无法实现的,就必须通过PHP、html和Mysql来实现,先给大家看一下登录和注册页的效果图。(注册完成后会自动跳转到登录窗口,即使A用户登陆后分享了网址,B用户也必须要先登陆后才能浏览)
程序是100%可以运营跑通的,下面我直接附上源码(CSS为非核心代码,代码比较长,你也可以自行修改。如果想完全复用我的,也可以私我):
如果完全复用代码,需要在mysql中新建数据库(aaaaa),密码为aaaaa,数据中新建表dlcs,表中有username、password。
一、登录源码
HTML前端登录样式
login.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>焰遐云会员管理系统平台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
<span class="login100-form-title-1">会员登录</span>
</div>
<form class="login100-form validate-form" action="login.php" method="post">
<div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
<span class="label-input100">账号</span>
<input class="input100" type="text" name="username" placeholder="请输入账号">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
<span class="label-input100">密码</span>
<input class="input100" type="password" name="password" placeholder="请输入密码">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30">
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1" type="checkbox" name="remember" value="yes">7天内自动登录</label>
</div>
<div>
<a href="javascript:" class="txt1">没有账号?立即注册</a>
</div>
</div>
<div class="container-login100-form-btn">
<input class="login100-form-btn" type="submit" name="login" value="提交">
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>
login.php文件
<?php
// 告知浏览器我们是html,解码用utf-8,header()表示向客户端发送一个原始的http包头
header('Content-type:text/html; charset=utf-8');
// 开启Session,返回一个bool值
// Session表示存储关于用户会话(session)的信息
session_start();
// 处理用户登录信息
// $_POST[]的变量应该是请求的html页面中,通过‘name’被复制的变量
if (isset($_POST['login'])) {
# 接受用户的登录消息,trim去掉字符串中的空格
$username = trim($_POST['username']);
$password = trim($_POST['password']);
// 判断提交的登录信息
if (($username == '') || ($password == '')) {
// 若为空,视为未填写,提示错误,并3秒后返回登录界面
header('refresh:3; url=login.html');
echo "用户名或密码不能为空,系统将在3秒后跳转到登录界面,请重新填写登录信息!";
exit;
}
// 连接数据库
$link = mysqli_connect('127.0.0.1','aaaaa','lixiang123456','aaaaa');
// 验证数据库的连接状态
$query=mysqli_query($link,"SELECT username,password FROM dlcs WHERE username = '$username'");
$row = mysqli_fetch_array($query);
if (!$row) {
header('refresh:3; url=login.html');
echo "用户名或密码错误,系统将在3秒后跳转到登录界面,请重新填写登录信息!";
exit;
} else {
# 用户名和密码都正确,将用户信息存储到Session中
$_SESSION['username'] = $username;
$_SESSION['islogin'] = 1;
// 若勾选7天内自动登录,则将其保存到Cookie并设置保留7天
if ($_POST['remember'] == "yes") {
setcookie('username', $username, time()+7*24*60*60);
setcookie('code', md5($username.md5($password)), time()+7*24*60*60);
} else {
// 没有勾选则删除Cookie
setcookie('username', '', time()-999);
setcookie('code', '', time()-999);
}
// 处理完附加项后跳转到登录成功的首页
header('location:weizhuang.php');
}
}
?>
HTML前端注册样式
zhuce.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>焰遐云会员管理后台</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
<span class="login100-form-title-1">会员管理系统</span>
</div>
<form class="login100-form validate-form" action="zhuce.php" method="get">
<div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
<span class="label-input100">账号</span>
<input class="input100" type="text" name="username" placeholder="请输入账号">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
<span class="label-input100">密码</span>
<input class="input100" type="password" name="password" placeholder="请输入密码">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<input class="login100-form-btn" type="submit" name="zhuce" value="立即注册">
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>
zhuce.php文件
<meta charset="UTF-8">
<?php
$username = 'aaaaa';
$password = 'lixiang123456';
$ip = '127.0.0.1';
$database = 'aaaaa';
$conn = new mysqli($ip,$username,$password,$database);
$logname = $_GET['username'];
$password = $_GET['password'];
$sql = "select * from dlcs where username = '$logname';";
$res = mysqli_query($conn,$sql);
if($res->num_rows > 0){
echo '用户已存在,3秒后跳转,请重新输入。';
header('Refresh:3,houtai.html');
}else{
$sql = "insert into dlcs value('$logname','$password');";
if(mysqli_query($conn,$sql)){
echo'注册成功,3秒后返回登录页面。';
header('Refresh:3,login.html');
}else{
echo'注册失败。';
}
}
?>
前端注销样式
logout.php文件
<?php
header('Content-type:text/html; charset=utf-8');
// 注销后的操作
session_start();
// 清除Session
$username = $_SESSION['username']; //用于后面的提示信息
$_SESSION = array();
session_destroy();
// 清除Cookie
setcookie('username', '', time()-99);
setcookie('code', '', time()-99);
// 提示信息
echo "欢迎下次光临, ".$username.'<br>';
echo "<a href='login.html'>重新登录</a>";
?>
必须登陆后才能访问:
在需要登陆后才能访问的页面增加该文件即可:
<?php
header('Content-type:text/html; charset=utf-8');
// 开启Session
session_start();
// 首先判断Cookie是否有记住了用户信息
if (isset($_COOKIE['username'])) {
# 若记住了用户信息,则直接传给Session
$_SESSION['username'] = $_COOKIE['username'];
$_SESSION['islogin'] = 1;
}
if (isset($_SESSION['islogin'])){
} else exit("<script language='javascript'>window.location.href='./login.html';</script>");
?>
``