PHP实现登录注册-LAMP示例
PHP实现登录注册-LAMP示例
唔仄lo咚锵
发布于 2021-09-14 11:21:29
发布于 2021-09-14 11:21:29
文章目录
基础的环境搭建参考：
Apache安装配置(Windows和Linux)-有手就行
效果演示
网页：http://123.56.47.42/UIUE/login.html
PHP实现登录注册效果演示
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页</title>
<link href="favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<link type="text/css" href="css/animatemin.css" rel="stylesheet"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="css/TGTool.css" rel="stylesheet"/>
<link type="text/css" href="css/model.css" rel="stylesheet"/>
<link type="text/css" href="css/verify.css" rel="stylesheet"/>
<link type="text/css" href="css/login.css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/TGTool.js"></script>
<style type="text/css">body{background:url(images/loginBg.jpg);background-size: 100% 100%;}</style>
</head>
<body>
<!--注册模态框-->
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<h4 class="modal-title" id="myModalLabel">用户注册</h4>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="name_add_input" class="col-md-3 control-label">用户名</label>
<div class="col-md-9">
<input type="text" class="form-control" name="name" id="name_add_input" placeholder="name">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="password_add_input" class="col-md-3 control-label">密码</label>
<div class="col-md-9">
<input type="password" class="form-control" name="password" id="password_add_input" placeholder="password">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="password2_add_input" class="col-md-3 control-label" style="padding:0px 0px">确认密码</label>
<div class="col-md-9">
<input type="password" class="form-control" name="password2" id="password2_add_input" placeholder="password again">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="user_save_btn">注册</button>
<button type="reset" class="btn btn-reset">重置</button>
<button type="button" class="btn btn-default" id="closeBtn">关闭</button>
</div>
</form>
</div>
</div>
</div>
<!-- 搭建显示页面和登录表单 -->
<div id="container">
<!-- 时间 -->
<div class="col-md-4" style="font-size:30px">
<span class="label label-warning">
<span class="glyphicon glyphicon-time" aria-hidden="true">
<span id="time"><script type="text/javascript"> showTime();</script></span>
</span>
</span>
</div>
<!-- 欢迎信息 -->
<div class="col-md-6 col-md-offset-6" style="top:20px">
<p style="font-size:75px;color: #e76f51;font-family: 楷体"><img src="images/logo.png"height="18%" width="18%"><B> 宿心</B></p>
</div>
<div class="col-md-4 col-md-offset-6" style="top:20px">
<I><p style="font-size:33px;color: #f4a261;font-family: 仿宋">天地之大，四海为家！</p></I>
</div>
<!-- 登录表单 -->
<div id="content"class="animate__animated animate__zoomIn animate__delay-0.6s">
<div class="form-group"style="margin-top: -10px;color: #f4a261">
<h3 class="col-sm-5"><B>用户名:</B></h3>
<input type="text" class="form-control input-lg" id="user_login_name" name="loginid" placeholder="请输入用户名"/>
</div>
<div class="form-group"style="margin-top: -10px;color: #f4a261">
<h3 class="col-sm-4"><B>密码:</B></h3>
<input type="password" class="form-control input-lg" id="user_login_password" name="password" placeholder="请输入密码" />
</div>
<I><div class="form-group" id="mpanel1" style="font-size: 18px;color: #5e5e5e;margin-top: 35px"></div></I>
<div class="row">
<div class="col-md-5 "style="margin-top: 20px;margin-left: 13px">
<button class="btnn"id="user_register_btn"><span>注册</span></button>
</div>
<div class="col-md-5 "style="margin-top: 20px;margin-left:12px">
<button class="btnn"id="user_login_btn"><span>登录</span></button>
</div>
</div>
</div>
</div>
<div class="box">
<ul>
<li class="weixin">
<div class="weixin-logo"></div>
</li>
<li class="idea"></li>
<li class="app">
<div class="app-logo"></div>
</li>
</ul>
</div>
<script type="text/javascript">
var verify=false;
let tg = TGTool();
$('#mpanel1').slideVerify({
type : 1,
success : function() {
verify=true;
},
error : function(){
verify=false;
}
});
$("#user_login_btn").on("click", function() {
var id=$("#user_login_name").val();
var pwd=$("#user_login_password").val();
if(id=="")
tg.warning("请输入用户名！");
else if(pwd=="")
tg.warning("请输入密码！");
else if(verify==false)
tg.warning("请完成验证！");
else{
//发送登录请求
$.ajax({
url:"login.php",
type:"POST",
data:{username:$("#user_login_name").val(),password:$("#user_login_password").val()},
success:function (result) {
if(result==100){
tg.success("登录成功！");
setTimeout(function(){
window.location.reload();
},3100);
}
else{
tg.error("用户名或密码错误！");
setTimeout(function(){
window.location.reload();
},3100);
}
}
});
}
})
//点击注册按钮弹出模态框
$("#user_register_btn").click(function(){
//清除表单数据（表单重置）
show_validate_msg("#name_add_input","","");
show_validate_msg("#password_add_input","","");
show_validate_msg("#password2_add_input","","");
$("#name_add_input").val("");
$("#password_add_input").val("");
$("#password2_add_input").val("");
//弹出模态框
$('#modal-container').removeAttr('class').addClass('one');
$('body').addClass('modal-active');
});
//显示校验提示
function show_validate_msg(ele,status,msg){
//首先清空当前元素
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if ("success" == status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if ("error"==status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//校验表单数据
function validate_add_form(){
var rtn=true;
//1.拿到要校验的数据，使用jquery正则表达式
var userName = $("#name_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(userName)) {
show_validate_msg("#name_add_input","error","×:2-5中文或3-16英文数字");
rtn= false;
}
else {
show_validate_msg("#name_add_input","success","√");
}
//2.密码校验（两次一样且不为空）
var password1=$("#password_add_input").val();
var password2=$("#password2_add_input").val();
if(password1==""){
show_validate_msg("#password_add_input","error","×:密码不能为空");
rtn= false;
}
else{
show_validate_msg("#password_add_input","success","√");
}
if(password2==""){
show_validate_msg("#password2_add_input","error","×:请再次输入密码");
rtn= false;
}
else if(password1!=password2){
show_validate_msg("#password2_add_input","error","×:输入的两次密码不相同");
rtn= false;
}
else{
show_validate_msg("#password2_add_input","success","√");
}
return rtn;
}
//点击保存，注册用户
$("#user_save_btn").click(function(){
//1.前端校验表单数据
if(!validate_add_form()){
tg.error("注册失败！");
return false;
}
//2.发送ajax请求注册用户
$.ajax({
url:"register.php",
type:"POST",
data:{username:$("#name_add_input").val(),password:$("#password2_add_input").val()},
success:function (result) {
if(result==200){
tg.error("注册失败！");
show_validate_msg("#name_add_input","error","×:该用户名已存在");
}else{
tg.success("注册成功!");
$("#user_login_name").val($("#name_add_input").val());
$("#modal-container").addClass('out');
$('body').removeClass('modal-active');
}
}
});
});
//显示实时时间
function showTime(){
var time = new Date();
nowTime = (time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("time").innerHTML = nowTime;
}
//点击关闭模态框
setInterval("showTime()",1000);
$('#closeBtn').click(function(){
$("#modal-container").addClass('out');
$('body').removeClass('modal-active');
});
</script>
</body>
</html>（
插播反爬信息）博主CSDN地址：https://wzlodq.blog.csdn.net/
login.php
<?php
error_reporting(0);
header("Content-Type: text/html;charset=utf-8");
//建立连接
$conn = mysqli_connect('localhost','root','改成你的密码');
if($conn){
//数据库连接成功
$select = mysqli_select_db($conn,"uiue"); //选择数据库
if($select){
//数据库选择成功
$user = $_POST["username"];
$pass = $_POST["password"];
//sql语句
$sql_select = "select id,pwd from user where id = '$user' and pwd = '$pass'";
//设置编码
mysqli_query($conn,'SET NAMES UTF8');
//执行sql语句
$ret = mysqli_query($conn,$sql_select);
$row = mysqli_fetch_array($ret);
//用户密码正确
if($row!=null&&$row!=null&&$user == $row['id']&&$pass == $row['pwd']){
echo 100;
}else{
echo 200;
}
}
//关闭数据库
mysqli_close($conn);
}else{
//连接错误处理
die('Could not connect:'.mysqli_error());
}
?>register.php
<?php
error_reporting(0);
header("Content-Type: text/html;charset=utf-8");
//建立连接
$servername = "localhost";
$username = "root";
$password = "改成你的密码";
$conn = mysqli_connect($servername, $username, $password, 'uiue');
if($conn){
//数据库连接成功
$select = mysqli_select_db($conn,"uiue"); //选择数据库
$user = $_POST["username"];
$pass = $_POST["password"];
mysqli_set_charset($conn,'utf8'); //设置编码
//sql语句
$sql_select = "select id from user where id = '$user'";
//sql语句执行
$result = mysqli_query($conn,$sql_select);
//判断用户名是否已存在
$num = mysqli_num_rows($result);
if($num){
//用户名已存在
echo 200;
}else{
//用户名不存在
$sql_insert = "insert into user(id,pwd) values('$user','$pass')";
//插入数据
$ret = mysqli_query($conn,$sql_insert);
$row = mysqli_fetch_array($ret);
echo 100;
}
//关闭数据库
mysqli_close($conn);
}else{
//连接错误处理
die('Could not connect:'.mysqli_error($conn));
}
?>源码
番外
最近事情越来越多了，比赛、实验、大作业、项目、考试，已经很难挤出时间写博客了，十一月产量也不高，但是我会更的(咕咕咕)。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL（TencentDB for MySQL）为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性，包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL，可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理，不仅经济实惠，而且稳定可靠，易于运维。