文章目錄
- 效果演示
- login.html
- login.php
- register.php
- 原始碼
- 番外
基礎的環境搭建參考：
Apache安裝配置(Windows和Linux)-有手就行
PHP安裝配置(Windows和Linux)-一篇就夠了
PHP連接MySQL-踩坑總結
效果演示
網頁：http://123.56.47.42/UIUE/login.html
PHP實作登錄注冊效果演示
<iframe id="zro5w2iY-1606887623572" src="https://player.bilibili.com/player.html?aid=885392657" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
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));
}
?>
原始碼
GitHub
番外
最近事情越來越多了，比賽、實驗、大作業、專案、考試，已經很難擠出時間寫博客了，十一月產量也不高，但是我會更的(咕咕咕)，
原創不易，請勿轉載（
本不富裕的訪問量雪上加霜）
博主首頁：https://wzlodq.blog.csdn.net/
微信公眾號：唔仄lo咚鏘
如果文章對你有幫助，記得一鍵三連?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229474.html
標籤：其他
上一篇：為了這篇關于QT最全面的專案實戰總結，成功加入脫發大軍！不看也給我先收藏起來！
下一篇：CSS系列講解-總目錄