이 기사에서 공유한 내용은 PHP를 사용하여 간단한 백엔드 등록 및 로그인(코드 포함)을 구현하는 방법에 관한 것입니다. 이 내용은 도움이 필요한 친구들에게 큰 도움이 되기를 바랍니다.
저는 PHP 초보입니다. 얼마전에 공부해서 PHP 중국어 사이트의 백그라운드 프레임워크를 다운받고 스타일을 변경한 후 인터넷에서 형성된 프로젝트를 참고하여 함수코드를 추가했습니다.
또 다른 참고 사항: 저는 검증을 위해 navicat for mysql+sublime+phpmystudy 도구를 사용합니다.
1. 먼저 레이어와 디렉터리 파일을 생성합니다
먼저 프로젝트의 계층적 디렉터리를 넣습니다:
등록 및 로그인 기능만 구현해야 하는 경우 생략할 수 있는 폴더가 많이 있습니다. 그 안에도 구현했기 때문입니다. 프런트 엔드 코드는 전체 시스템의 계층적 디렉터리에 배치됩니다.
2. 항목 파일(index.php)
<?php
/* PHP系统进入的入口页面*/
header("Content-type: text/html; charset=utf-8");
include('admin/login.html');//首页
?>3. 로그인 페이지
3.1 admin/login.html (여기서는 부트스트랩 프레임워크와 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. 등록 페이지
4.1 admin/register.html(부트스트랩 프레임워크 및 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.5 admin/register_check.php (it 로그인 모듈과 데이터 테이블 공유)
<?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.6 렌더링(인터넷의 배경 이미지 소스)
마침내
: 직접 확인했습니다. 등록과 로그인의 두 가지 기본 기능은 다음과 같습니다. 완전히 실현되었으며 데이터베이스와의 상호 작용은 문제가 되지 않습니다.관련 권장 사항:
php 대기열 처리: PHP 메시지 대기열 구현 원리(그림 및 텍스트)
위 내용은 PHP를 사용하여 간단한 백그라운드 등록 및 로그인 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
