Rumah > Artikel > pembangunan bahagian belakang > 利用php实现简单的后台注册登录（附代码）
利用php实现简单的后台注册登录（附代码）
- 不言asal
- 2018-07-24 11:32:2521805semak imbas
这篇文章分享给大家的内容是关于利用php实现简单的后台注册登录（附代码），内容很有参考价值，希望可以帮到有需要的小伙伴。
本人PHP小白，前段时间研究它，下载了一个php中文网的后台框架，改了样式，然后自己参考网络上面成型的项目添加了功能代码。
另：我是使用 navicat for mysql+sublime+phpmystudy 工具来实现验证的。
一、先建立好层及目录文件
先放一下项目的层级目录：
如果只要实现注册登录功能则有很多文件夹都可以省略，因为我还在其中实现了前台代码，所以放上了整个系统的层级目录。
二、入口文件（index.php）
<?php
/* PHP系统进入的入口页面*/
header("Content-type: text/html; charset=utf-8");
include('admin/login.html');//首页
?>三、登陆页面
3.1 admin/login.html (这里使用了bootstrap框架以及jquery)
<!-- PHP系统进入的页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="../public/css/base.css"> -->
<link rel="stylesheet" type="text/css" href="css/b_login.css">
<title></title>
</head>
<body>
<span class="visible-lg"><!-- bootstrap自适应工具 大屏幕>=1200px可见 必须全屏才可以使用-->
<p class="login">
<p class="loginmain">
<h2>熊猫个人事务管理系统</h2>
<form action="admin/login_check.php" class="form-horizontal" method="post">
<!-- 让表单在一行中显示form-horizontal -->
<!-- 用户名 -->
<p class="form-group">
<!-- for 属性规定 label 绑定到哪个表单元素 -->
<label for="username" class="col-lg-1 control-label">用户名</label>
<p class="col-lg-4">
<input type="text" name="username" id="username" class="form-control" placeholder="请输入登录账号"/>
</p>
</p>
<p class="form-group"></p>
<p class="form-group"></p>
<!-- 密码 -->
<p class="form-group">
<label for="password" class="col-lg-1 control-label">密 码</label>
<p class="col-lg-4">
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码"/>
</p>
</p>
<p class="form-group"></p>
<p class="form-group"></p>
<!-- 验证码 -->
<p class="form-group">
<!-- for 属性规定 label 与哪个表单元素绑定。 -->
<label for="captcha" class="col-lg-1 control-label">验证码</label>
<p class="col-lg-2">
<!-- ./ 当前路径 -->
<!-- 用户输入验证码的框 -->
<input type="text" name="captcha" id="captcha" class="form-control" placeholder="请输入右图内容：" />
<!-- 当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。 -->
</p>
<p>
<!-- 验证码图片 -->
<a href="#" onclick="javascript:reflash()">
<img id="captcha_img" name="captcha_img" alt="看不清楚，换一张" border="1" src="admin/captcha.php?r=<?php echo rand(); ?>" width=100 height=30>
</a>
</p>
<p class="form-group"></p>
<p class="form-group"></p>
<p class="form-group">
<p class="col-lg-11 col-lg-offset-1">
<span class="checkbox ">
<label><input type="checkbox" name="" class="checkbox-inline">记住我</label>
</span>
</p>
</p>
<p class="form-group">
<p>
<p class="col-lg-1 col-lg-offset-1">
<input type="submit" name="b_login" value="登录" class="btn btn-success btn-lg">
</p>
<p class="col-lg-1 col-lg-offset-1">
<a href="admin/register.html">
<input type="button" name="b_register" value="注册" class="btn btn-success btn-lg">
</a>
</p>
<p class="form-group"></p>
<p class="form-group"></p>
<span class="text" name="text"></span>
</p>
</form>
</p>
<p class="rightpic" >
<p id="container" >
</p>
</p>
</p>
<p class="bottom">
版权所有 2017-2018 我是熊(￣(工)￣)工作室
</p>
</span>
<script src="public/js/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="public/js/delaunay.js"></script>
<script src="public/js/TweenMax.js"></script>
<script src="js/effect.js"></script>
<script src="js/b_login.js"></script>
</body>
</html>3.2 css/b_login.css（图片根据个人爱好即可）
body{
background-image: url(../picture/17.png);
background-size: cover;
font-size: 17px;
font-family: "幼圆"
}
.login{
width:1000px;
height:500px;
margin:100px auto;
border:1px;
background-color: rgba(0, 0, 0, 0.3);
padding: 1px;
position:relative;
color:#fff;
}
.rightpic{
width:500px;
height:360px;
position:absolute;
right:30px;
top:50px;
opacity: 0.6;
}
.captcha{
cursor:pointer
}
.text{
font-size: 18px;
margin-left: 180px;
text-align: center;
color: #f00;
}
.bottom{
text-align: center;
color: #fff;
}
#container{
position: relative;
width:500px;
height:330px;
}
canvas{ position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
img {
position: absolute;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}3.3 js/b_login.js（这里涉及到了验证码）
//alert($)
function reflash(){
var change = document.getElementById('captcha_img');
check.src="admin/captcha.php?r=<?php echo rand(); ?>";
}
$(document).ready(function(){//页面加载完成再加载脚本
/*点击登录按钮后做的事件处理*/
$('input[name="b_login"]').click(function(event){
var $name = $('input[name="username"]');
var $password = $('input[name="password"]');
var $captcha = $('input[name="captcha"]');
var $text = $(".text");
var _name = $.trim($name.val());//去掉字符串多余空格
var _password = $.trim($password.val());
var _captcha_img = $.trim($captcha.val());
if(_name==''){
$text.text('请输入用户名');
$name.focus();
return;
}
if(_password==''){
$text.text('请输入密码');
$password.focus();
return;
}
if(captcha==""){
$text.text('请输入验证码');
return;
}
});
});3.4 admin/captcha.php（这个图片验证码是我从网上找的）
<?php
/*实现简单的验证码功能*/
//开启session
session_start();
//创建一个大小为 100*30 的验证码
$image = imagecreatetruecolor(100, 30);
$bgcolor = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $bgcolor);
$captch_code = '';
for ($i = 0; $i < 4; $i++) {
$fontsize = 6;
$fontcolor = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));
$data = 'abcdefghijkmnpqrstuvwxy3456789';
$fontcontent = substr($data, rand(0, strlen($data) - 1), 1);
$captch_code .= $fontcontent;
$x = ($i * 100 / 4) + rand(5, 10);
$y = rand(5, 10);
imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}
//就生成的验证码保存到session
$_SESSION['authcode'] = $captch_code;
//在图片上增加点干扰元素
for ($i = 0; $i < 200; $i++) {
$pointcolor = imagecolorallocate($image, rand(50, 200), rand(50, 200), rand(50, 200));
imagesetpixel($image, rand(1, 99), rand(1, 29), $pointcolor);
}
//在图片上增加线干扰元素
for ($i = 0; $i < 3; $i++) {
$linecolor = imagecolorallocate($image, rand(80, 220), rand(80, 220), rand(80, 220));
imageline($image, rand(1, 99), rand(1, 29), rand(1, 99), rand(1, 29), $linecolor);
}
//设置头
header('content-type:image/png');
imagepng($image);
imagedestroy($image);
?>3.5 admin/login_check.php（这就是主要的功能代码了 在这之前 你需要有数据库文件
比如我这里的数据库文件名叫做panda_work 我连接数据库的用户名是root 密码是123456）
<?php
//开启Session
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect('localhost','root','123456','panda_work');
if (!$link) {
die("连接失败:".mysqli_connect_error());
}
//接受提交过来的用户名及密码
$username = @$_POST["username"];//用户名
$password = @$_POST["password"];//密码
$captcha = @$_POST["captcha"]; //验证码
/*if($username == "")
{
//echo "请填写用户名<br>";
echo"<script type='text/javascript'>alert('请填写用户名');location='login.html'; </script>";
}
if($password == "")
{
//echo "请填写密码<br><a href='login.html'>返回</a>";
echo"<script type='text/javascript'>alert('请填写密码');location='login.html';</script>";
}*/
if($captcha != @$_SESSION['authcode']) //判断填写的验证码是否与验证码PHP文件生成的信息匹配
{
echo "<script type='text/javascript'>alert('验证码错误!');location='../index.php';</script>";
return;
}
$sql = "select * from panda_admin";
$result = mysqli_query($link, $sql);
$rows = mysqli_fetch_array($result);
if($rows) {
//拿着提交过来的用户名和密码去数据库查找，看是否存在此用户名以及其密码
if ($username == $rows["name"] && $password == $rows["password"]) {
$_SESSION['username'] = $username;
//echo "验证成功！<br>";
echo "<script type='text/javascript'>alert('登陆成功');location='../web/index.html';</script>";
} else {
//echo "用户名或者密码错误<br>";
echo "<script type='text/javascript'>alert('用户名或者密码错误');location='../index.php';</script>";
//echo "<a href='login.html'>返回</a>";
}
}
?>3.6 数据库（按照自己需要的来即可）
3.7 效果图
四、注册页面
4.1 admin/register.html (这里使用了bootstrap框架以及jquery)
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="../public/css/base.css"> -->
<link rel="stylesheet" type="text/css" href="../css/b_register.css">
<title>后台注册页面</title>
</head>
<body>
<span class="visible-lg"><!-- bootstrap自适应工具 大屏幕>=1200px可见 必须全屏才可以使用 或者改百分比使用-->
<p class="register">
<form action="register_check.php" method="post" enctype="multipart/form-data">
<p class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="Username" name="username">
</p>
<p class="form-group">
<label for="nickname">昵称</label>
<input type="text" class="form-control" id="nickname" placeholder="Nickname" name="nickname">
</p>
<p class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="password">
</p>
<p class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="ConfirmPassword" name="confirmPassword">
</p>
<p class="form-group">
<a href="#" onclick="javascript:reflash()">
<img id="captcha_img" name="captcha_img" alt="看不清楚，换一张" border="1" src="captcha.php?r=<?php echo rand(); ?>" width=100 height=30>
</a>
<p><p>
<input type="text" class="form-control" id="captcha" placeholder="请输入上图验证码，按F5可刷新" name="captcha">
</p>
<p class="form-group">
<label for="photoFile">头像</label>
<input type="hidden" name="MAX_FILE_SIZE" value="10240000" id=""/>
<input type="file" id="photoFile" name="photoFile">
</p>
<button type="submit" name="b_register" class="col-lg-1 col-lg-offset-3">提交</button>
<p>
<a href="../index.php">
<button type="button" name="b_login" class="col-lg-1 col-lg-offset-3">返回</button>
</a>
<span class="text2"></span>
</form>
</p>
</span>
<p class="bottom">
版权所有 2017-2018 我是熊(￣(工)￣)工作室
</p>
</body>
<script src="./../public/js/jquery-3.1.1.min.js"></script>
<script src="./../bootstrap/js/bootstrap.min.js"></script>
<script src="./../public/js/delaunay.js"></script>
<script src="./../public/js/TweenMax.js"></script>
<script src="../js/effect.js"></script>
<script src="../js/b_register.js"></script>
</html>4.2 css/b_register.css（图片根据个人爱好即可）
body{
/*background-image: url(../picture/14.png);*/
background-size: auto;
font-size: 17px;
font-family: "幼圆";
background-image: url(../picture/19.jpg);
background-repeat:no-repeat;
/* text-align: center;*/
/*color: #00F;*/
}
.register{
width:800px;
height:600px;
margin:200px auto;
border:1px;
background-color: rgba(0, 0, 0, 0.3);
padding: 1px;
position:relative;
background-image: url(../picture/18.gif);
opacity: 0.8;
}
.bottom{
text-align: center;
color: #fff;
margin-bottom: 100px;
}4.3 js/b_register.js（这里涉及到了图片上传）
//alert($)
function reflash(){
var change = document.getElementById('captcha_img');
check.src="admin/captcha.php?r=<?php echo rand(); ?>";
}
$(document).ready(function(){//页面加载完成再加载脚本
/*点击登录按钮后做的事件处理*/
$('input[name="b_register"]').click(function(event){
var $name = $('input[name="username"]');
var $password = $('input[name="password"]');
var $confirmPassword = $('input[name="confirmPassword"]');
var $photoFile = $('input[name="photoFile"]');
var $nickname = $('input[name="nickname"]');
var $text2 = $(".text2");
var _name = $.trim($name.val());//去掉字符串多余空格
var _password = $.trim($password.val());
var _confirmPassword = $.trim($confirmPassword.val());
var _nickname = $.trim($.trim($nickname.val()));
if(_name == ''){
$text2.text('请输入用户名');
$name.focus();
return;
}
if(_nickname == ""){
$text2.text('请输入昵称');
$nickname.focus();
return;
}
if(_password == ''){
$text2.text('请输入密码');
$password.focus();
return;
}
if(_confirmPassword == ""){
$text2.text("请输入验证码");
$confirmPassword.focus();
return;
}
if(_password !=_confirmPassword){
$text2.text("两次输入的密码不一致");
$password.focus();
return;
}
if (_photoFile == "") {
$text2.text("请选择一个图片文件");
$photoFile.focus();
return;
}
});
});4.4 admin/file_check.php(处理上传的图片文件，这个也是我从网上找的，更改了一小部分代码，
其中需要在admin文件夹下新建一个存储文件uploads)
<?php
//1.处理文件信息
$fileArr = @$_FILES["photoFile"];//input标签中的name
//将文件信息保存在变量中
$name = @$fileArr['name'];//文件名
$type = @$fileArr["type"];//文件类型
$tmp_name = @$fileArr["tmp_name"];//文件临时存储位置的文件名
$error = @$fileArr["error"];//文件的错误信息
$size = @$fileArr["size"];//文件的大小
//2.新建存储文件的目录
$filePath = "uploads";
function createDir($filePath){
if(!file_exists($filePath)){
$res = mkdir($filePath);
if($res){
echo "创建成功";
}
}
}
createDir($filePath);
//因为要上传的文件为图片，所以此时设置允许的后缀名如下，如果其他文件则修改为txt等后缀
$allowExt=["image/png","image/jpeg","image/gif"];
//3.判断文件是否上传成功
if($error===UPLOAD_ERR_OK){//UPLOAD_ERR_OK==0,上传成功
if(!in_array($type,$allowExt)){//如果类型不在数组中
exit("非法类型文件");
}
//判断后缀正确但不是图片的文件
if(!getimagesize($tmp_name)){
exit("不是真正的一张图片");
}
$ext = pathinfo($name)["extension"];//获取文件后缀
$uniname = time().".".$ext;//生成一个唯一的文件名
$destination = $filePath."/".$uniname;
//4.move_uploaded_file将上传的文件移动到新位置。 若成功,则返回 true,否则返回 false
$res = move_uploaded_file($tmp_name,$destination);
if($res){//上传成功
//把图片服务器连接传出去：拼接出一个图片的src
$server = @$_SERVER["HTTP_ORIGIN"];
$rootDir = pathinfo($_SERVER["REQUEST_URI"])["dirname"];
$imgPath = $server.$rootDir."/".$destination; //图片的src
//echo "<img src='{$imgPath}'>";//输出图片
$_SESSION['imgPath'] = $imgPath;
}
else{
echo "<script type='text/javascript'>alert('上传失败!');location='register.html';</script>";
}
}
else{//上传失败，给出错误提示
switch ($error) {
case UPLOAD_ERR_INI_SIZE://1
die("上传的文件超过了PHP配置中upload_max_file大小的最大值");//die();结束程序
break;
case UPLOAD_ERR_FORM_SIZE://2
die("上传的文件超过了HTML表单中隐藏域MAX_FILE_SIZE中value选项指定的值");
break;
case UPLOAD_ERR_NO_TMP_DIR://6
die("没有找不到临时文件夹");
break;
case UPLOAD_ERR_CANT_WRITE://7
die("文件写入失败");
break;
case UPLOAD_ERR_EXTENSION://8
die("php文件上传扩展没有打开");
break;
case UPLOAD_ERR_PARTIAL://3
die("文件只有部分被上传");
break;
default:
break;
}
}
?>4.5 admin/register_check.php （其和登录模块是共用一个数据表的）
<?php
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect('localhost','root','123456','panda_work');
if (!$link) {
die("连接失败:".mysqli_connect_error());
}
$username = @$_POST['username'];
$password = @$_POST['password'];
$confirm = @$_POST['confirmPassword'];//确认密码
$code = @$_POST['captcha'];//验证码
$nickname = @$_POST['nickname'];
$photoFile = @$_FILES['photoFile']['tmp_name'];//图片文件
/* $data['img'] =base64_encode(file_get_contents($_FILES['photoFile']['tmp_name']));*/
//$data['img_type'] = @$_FILES['photoFile']['type'];
/* $image = mysql_real_escape_string(file_get_contents(@$_FILES['photoFile']['tmp_name']),"localhost"); //获取图片*/
include('file_check.php');
$imgPath = @$_SESSION['imgPath'];
if($username == "" || $password == "" || $confirm == "" || $code == "" ||$nickname == ""||
$photoFile==""
)
{
echo "<script>alert('信息不能为空！重新填写');window.location.href='register.html'</script>";
} elseif ((strlen($username) < 3)||(!preg_match('/^\w+$/i', $username))) {
echo "<script>alert('用户名至少3位且不含非法字符！重新填写');window.location.href='register.html'</script>";
//判断用户名长度
}elseif(strlen($password) < 5){
echo "<script>alert('密码至少5位！重新填写');window.location.href='register.html'</script>";
//判断密码长度
}elseif($password != $confirm) {
echo "<script>alert('两次密码不相同！重新填写');window.location.href='register.html'</script>";
//检测两次输入密码是否相同
}
elseif($code != $_SESSION['authcode']) {
echo "<script>alert('验证码错误！重新填写');window.location.href='register.html'</script>";
//判断验证码是否填写正确
} elseif(mysqli_fetch_array(mysqli_query($link,"select * from panda_admin where name = '$username'"))){
echo "<script>alert('用户名已存在');window.location.href='register.html'</script>";
}
else{
$sql= "insert into panda_admin(name,nickname, password,photo_file) values('$username','$nickname','$password','$imgPath')";
//插入数据库
if(!(mysqli_query($link,$sql))){
echo "<script>alert('数据插入失败');window.location.href='register.html'</script>";
}
else{
echo "<script>alert('注册成功！');window.location.href='../index.php'</script>";
}
}
/*elseif (!preg_match('/^[\w\.]+@\w+\.\w+$/i', $email)) {
echo "<script>alert('邮箱不合法！重新填写');window.location.href='zhuce.html'</script>";
//判断邮箱格式是否合法
} */
?>4.6 效果图（背景图来源网络）
最后：经过本人验证，完全可以实现注册和登陆两大基本功能，与数据库的交互也不成问题。
相关推荐：
Atas ialah kandungan terperinci 利用php实现简单的后台注册登录（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何升级PHP7操作MongoDB的方法介绍Artikel seterusnya：如何使用PHP实现单点登录的方法分析
Artikel berkaitan
Lihat lagi- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Semua simbol ungkapan dalam ungkapan biasa (ringkasan)