当前位置： 首页 > news >正文

Web设计之登录网页源码分享，PHP数据库连接，可一键运行！

news 来源：原创 2025/6/8 9:19:21

HTML

页面结构（index.html）

1. 流星雨动态背景

2. 主体界面（包含登录和注册表单）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/login.css"><link rel="stylesheet" href="./font/iconfont.css"><link rel="icon" href="./src/images/capybara.png"><title>施霁の小屋</title>
</head>
<body><!-- 绘制流星雨 --><div class="meteor"><canvas id="canvas"></canvas></div><!-- 主体界面 --><div class="box"><!-- 登录 --><form action="" method="post"><div class="login-form"><dotlottie-player class='cat' src="https://lottie.host/a3033571-ac02-4729-a4d9-d26fb88daa07/HPJ1ubBluP.lottie" background="transparent" speed="1" direction="1" playMode="normal" loop autoplay></dotlottie-player><div class="pre-box"><h1>WELCOME</h1><div class="img-box"><img src="./src/images/boy.jpg" alt="user"></div></div><div class="title-box"><dotlottie-player src="https://lottie.host/e7669feb-3952-4f0f-aa68-68e9f217f9cc/ez4KCGLiEu.json" background="transparent" speed="1" style="width: 0.7rem; height: 0.7rem" direction="1" playMode="normal" loop autoplay></dotlottie-player><h1>Login</h1></div><div class="input-box"><input type="text" id="username" name="username"  placeholder="Username" required="required"><input type="password" id="password" name="password" placeholder="Password" required="required"></div><!-- <p class="login-error"></p> --><div class="btn-box"> <button type="submit" class="login" id="log">登 录</button></div><p class="click-msg" onclick="mySwitch()">没有账号？去注册</p></div></form><!-- 注册 --><form action="" method="post"><div class="register-form"><div class="title-box"><dotlottie-player src="https://lottie.host/772658ce-16ee-413d-96fc-b485d7ccae05/SshfRp85XJ.json" background speed="1" style="width: 0.7rem; height: 0.7rem" direction="1" playMode="normal" loop autoplay></dotlottie-player><h1>Register</h1></div><div class="input-box"><input type="text" id="username_1" name="username_1" placeholder="Username" required="required"><input type="password" id="password_1" name="password_1" placeholder="Password" required="required"><input type="email" id="email_1" name="email_1" placeholder="Email" required="required"></div><!-- <p class="register-error"></p> --><div class="btn-box"><button type="submit" class="register" id="rgs">注 册</button></div><p class="click-msg" onclick="mySwitch()">已有账号？去登录</p></div></form></div><!-- 设置遮盖移动效果 --><script src="./js/cover.js"></script><!-- 登录注册功能 --><script src="./js/Login.js"></script><script src="./js/register.js"></script><!-- 绘制流星雨 --><script src="./js/meteor.js"></script><script src="./js/jquery.js"></script><!-- 设置自适应效果 --><script src="./js/flexible.js"></script><!-- Lottie动画 --><script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
</body>
</html>

CSS

表单结构美化（login.css），部分动画依靠Lottie的调用

* {margin: 0;padding: 0;box-sizing: border-box;
}
input {outline: none;
}
html,
body {height: 100%;
}
body {display: flex;background: url(../src/images/your-name.jpg) no-repeat top fixed;overflow: hidden;background-size: cover;
}
.meteor {width: 100%;height: 100%;position: absolute;z-index: -1;
}
.meteor .canvas {filter: drop-shadow(0 0 1px white);
}
@font-face {font-family: "SNAP";src: url(../font/fonts/SNAP.TTF);
}
.title-box h1 {font-family: "SNAP";color: #ffffff;
}
/* 抖动画面 */
@keyframes jitter {0%,100% {/* 动画开始和结束时，元素保持原始状态 */transform: rotate(0deg);}25% {/* 动画的1/4处，元素向右旋转一个小角度 */transform: rotate(10deg);}50% {transform: rotate(5deg);}75% {/* 动画的3/4处，元素开始向左旋转 */transform: rotate(-5deg);}
}
.box {width: 8.3799rem;height: 5.3073rem;position: relative;display: flex;margin: auto;border-radius: .1397rem;border: .0279rem;box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.1);
}.pre-box {position: absolute;width: 4.1899rem;height: 100%;top: 0;left: 0;border-radius: .1117rem;box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.1);background: linear-gradient(#8de7f7, #87a5e8);transition: 0.5s ease-in-out;z-index: 1;
}
.pre-box h1 {margin-top: .419rem;color: white;letter-spacing: .0279rem;text-align: center;font-size: .6285rem;text-shadow: 5px 4px 3px rgba(0, 0, 0, 0.1);
}
.pre-box h1:hover {cursor: pointer;text-shadow: 5px 4px 3px rgba(9, 5, 230, 0.3);
}
.pre-box .img-box {width: 2.7933rem;height: 2.7933rem;margin: .2793rem auto;text-align: center;
}
.pre-box .img-box img {width: 80%;height: 80%;border-radius: 50%;margin-top: 30px;box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.1);
}
.pre-box .img-box img:hover {animation: jitter 0.3s ease-in-out;
}
form {flex: 1;height: 100%;
}
.login-form,
.register-form {position: relative;height: 100%;
}
.title-box {display: flex;justify-self: center;align-items: center;flex-direction: column;height: 1.3966rem;line-height: 0.35rem;
}
.title-box h1 {text-align: center;font-size: .6285rem;
}
.input-box {display: flex;flex-direction: column;align-items: center;
}
.input-box input {width: 70%;height: .419rem;margin: .1397rem;padding: .0698rem .0698rem .0698rem .3911rem;font-size: .2235rem;border: 1px solid #b0cfe9;border-radius: 3px;background-repeat: no-repeat;background-size: .2235rem;background-position: 5px center;
}input[type="text"] {background-image: url(../src/images/user.png);
}
input[type="password"] {background-image: url(../src/images/pwd.png);
}
input[type="email"] {background-image: url(../src/images/email.png);
}
/* .login-error,
.register-error {height: .419rem;padding: .0698rem auto;margin-top: 10px;color: #99eef7;text-align: center;font-weight: bold;
} */
.btn-box {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;
}
.btn-box button {border: none;width: .838rem;height: .419rem;border-radius: .0419rem;margin: .1397rem;font-size: .2235rem;background-color: #69b3f0;color: white;
}
.btn-box button:hover {cursor: pointer;opacity: 0.8;
}.click-msg {position: absolute;bottom: 10px;left: 25%;text-align: center;color: #69b3f0;font-size: .2514rem;
}
.click-msg:hover {cursor: pointer;color: #99eef7;
}.cat {position: absolute;width: 40px;height: 40px;bottom: 40px;left: 50%;transform: translate(-50%);
}

JS

控制代码

1. 流星雨控制（meteor.js）（注意，流星雨需要jquery，需要下载到本地或者通过链接调用code.jquery.com/jquery-3.7.1.min.js，这个链接内容是源码，复制到本地js文件即可）

let canvas = document.querySelector("#canvas")
/** @type {CanvasRenderingContext2D} */
let ctx = canvas.getContext("2d")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let meteors = []
let allstar = 40function init() {for (let i = 0; i < allstar; i++){newmeteor();}
}function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;
}function newmeteor() {meteors.push({lines:[{x: parseInt(Math.random() * canvas.width),y: parseInt(Math.random() * canvas.height * 0.7)}],life: parseInt(Math.random() * 100 + 100),age: 0})
}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height)var flag = falsefor(let i = 0; i < meteors.length; i++){meteor = meteors[i]lines = meteor.linesflag = !flagfor(let j = 0; j < lines.length; j++){ctx.fillStyle = `rgba(255, 255, 255, ${j / lines.length})`ctx.fillRect(lines[j].x, lines[j].y, 1, 1)}ctx.fillStyle = 'yellow'// 流星头部let head = lines[lines.length - 1]ctx.fillRect(head.x, head.y, 1, 1)ctx.fillRect(head.x - 1, head.y, 1, 1)ctx.fillRect(head.x + 1, head.y, 1, 1)ctx.fillRect(head.x, head.y - 1, 1, 1)ctx.fillRect(head.x, head.y + 1, 1, 1)if(meteor.age <= meteor.life / 2){lines.push({x: head.x - 1,y: head.y + 0.51})}else{lines.shift()}meteor.age++if(meteor.age >= meteor.life){meteors.splice(i, 1)newmeteor()}}
}// function setup() {
//     init();
//     window.addEventListener('resize', resizeCanvas);
//     setInterval(draw, 12);
// }// setup();init();
setInterval(draw, 12);

2. 登录表单动画（cover.js）

let flag = true;
const mySwitch = () => {if(flag) {$(".pre-box").css("transform", "translateX(100%)");$(".pre-box").css("background", "linear-gradient(rgb(131, 184, 204), rgb(18, 48, 138))");$(".img-box img").attr("src", "./src/images/girl.jpg");}else {$(".pre-box").css("transform", "translateX(0%)");$(".pre-box").css("background", "linear-gradient(rgb(141, 231, 247), rgb(135, 165, 232))");$(".img-box img").attr("src", "./src/images/boy.jpg");}flag = !flag;
};

3. 页面自适应（flexible.js）

(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 20;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement("body");var testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}
})(window, document);

4. 登录控制（Login.js）

document.addEventListener("DOMContentLoaded", function() {  var btn = $("#log");  var errorMsg = $(".login-error"); // 获取错误消息的元素  errorMsg.css("font-size", ".2235rem"); // 设置文字大小为16像素// 使用jQuery绑定点击事件  $(btn).click(function(e) {  e.preventDefault(); // 阻止表单的默认提交行为  var username = $("#username").val(); // 获取用户名  var password = $("#password").val(); // 获取密码  // 发送AJAX请求  $.ajax({  url: "../php/Login.php", // PHP处理文件的路径  type: "POST",  data: { // 发送的数据  "username": username,  "password": password  },  success: function(response) {  // 根据PHP返回的结果进行处理  if (response === "success") {  location.href = "../首页.html"; // 登录成功，跳转到主页  console.log("success");  errorMsg.text(''); // 清除错误消息} else {  console.log("failed");  errorMsg.text("登录失败，请检查您的账号和密码！");// alert("登录失败，请检查您的账号和密码！");  }  },  error: function(xhr, status, error) {  // 处理请求失败的情况  // alert("请求失败: " + error);  errorMsg.text("请求失败: " + error);setTimeout(function() {// 3秒后清空errorMsg的文本内容errorMsg.text("");}, 3000); // 3000毫秒等于3秒}  });  });  
});

5. 注册控制（register.js）

document.addEventListener("DOMContentLoaded", function() {  var btn = $("#rgs");  var errorMsg = $(".register-error"); // 获取错误消息的元素 errorMsg.css("font-size", ".2235rem"); // 设置文字大小为16像素 // 使用jQuery绑定点击事件  $(btn).click(function(e) {  e.preventDefault(); // 阻止表单的默认提交行为  var username = $("#username_1").val(); // 获取用户名  var password = $("#password_1").val(); // 获取密码 var email = $("#email_1").val(); // 获取邮箱// 发送AJAX请求  $.ajax({  url: "../php/register.php", // PHP处理文件的路径  type: "POST",  data: { // 发送的数据  "username": username,  "password": password,"email": email},  success: function(response) {   // 根据PHP返回的结果进行处理  if (response.trim() === "success") {errorMsg.text('注册成功， 去登录叭~'); // 清除错误消息}else if (response.trim() === "exist") {  errorMsg.text("该用户已经存在了嗷~");  }else {errorMsg.text("注册失败，请稍后再试~");// alert("注册失败，请稍后再试~")  }},  error: function(xhr, status, error) {  errorMsg.text("请求失败: " + error);// alert("请求失败: " + error);setTimeout(function() {// 3秒后清空errorMsg的文本内容errorMsg.text("");}, 3000); // 3000毫秒等于3秒}  });  });  
});

MySQL

使用PHP连接数据库，这里是基础功能的实现，需要先创建一个数据库，基本步骤如下：

1. 进入MySQL，输入你的密码 

2. 创建数据库，这里取名为web

3. 在该数据库下创建一个表user，用来存放用户登录注册信息

4. 向表中插入一些数据用于登录 

5. 插入结果 

6. 分配一个用户（wang）可对web中的所有表执行任何操作（可选）

PHP 

（代码很简单，看注释即可）

1. 登录控制 （Login.php）

<?php  
// 数据库配置信息  
$host = 'localhost'; // 数据库服务器地址  
$dbuser = 'wang'; // 数据库用户名  
$dbpwd = 'Wxl020403.'; // 数据库密码  
$dbname = 'web'; // 数据库名  // 表单提交数据  
$username = trim($_POST['username']); // 去除前后空格  
$password = trim($_POST['password']); // 去除前后空格  // 创建连接  
$conn = new mysqli($host, $dbuser, $dbpwd, $dbname);  // 检查连接  
if ($conn->connect_error) {  die("连接失败: " . $conn->connect_error);  
}else{// $selectSQL = "SELECT * FROM user WHERE username='{$username}' AND password='{$password}'";// $result = $conn->query($selectSQL);// if ($result->num_rows == 1) {//     echo "success";// }// else{//     echo "error";// }// 准备SQL语句  $stmt = $conn->prepare("SELECT * FROM user WHERE username=? AND password=?");  // 绑定参数  $stmt->bind_param("ss", $username, $password);  // 执行查询  $stmt->execute();  // 获取结果  $result = $stmt->get_result();  // 检查是否有行返回  if ($result->num_rows == 1) {  echo "success";  } else {  echo "error";  }  // 关闭语句和连接  $stmt->close();  $conn->close();  
}
?>

2. 注册控制（register.php）

<?php// 数据库配置信息  
$host = 'localhost'; // 数据库服务器地址  
$dbuser = 'wang'; // 数据库用户名  
$dbpwd = 'Wxl020403.'; // 数据库密码  
$dbname = 'web'; // 数据库名  // 创建连接  
$conn = new mysqli($host, $dbuser, $dbpwd, $dbname);  $username = trim($_POST['username']); // 去除前后空格  
$password = trim($_POST['password']); // 去除前后空格  
$email = trim($_POST['email']);// 检查连接  
if ($conn->connect_error) {  die("连接失败: " . $conn->connect_error);  
}// 使用预处理语句检查用户是否已存在  
$stmt = $conn->prepare("SELECT 1 FROM user WHERE username = ?");  
$stmt->bind_param("s", $username);  
$stmt->execute();  
$stmt->store_result();  if ($stmt->num_rows > 0) {  echo "exist";  $stmt->close();  $conn->close();  exit;  
}  // 用户不存在，插入新用户，非常简单的判断
$stmt = $conn->prepare("INSERT INTO user (username, password, email) VALUES (?, ?, ?)");  
$stmt->bind_param("sss", $username, $password, $email);  if($stmt->execute()) {  echo "success";exit;
}
else{echo "error";exit;
}  $stmt->close();  
$conn->close();  ?>

相关文章：

  • 2025年- H77-Lc185--45.跳跃游戏II(贪心）--Java版
  • 【MLLM】字节BAGEL多模态理解和生成统一模型
  • 获取 OpenAI API Key
  • GIC700概述
  • python中Tk小工具-物料品名匹配系统
  • 基于51单片机的24小时倒计时仿真
  • VB.net复制Ntag213卡写入UID
  • 统一点云数据格式：高效转换与属性保留
  • 桌面图标无法对齐！
  • CountingDINO
  • C++中的排列组合算法详解
  • 学习使用YOLO的predict函数使用
  • Go 语言 range 关键字全面解析
  • 算法题(164):贴海报
  • Mysql 插入中文乱码
  • MS2691 全频段、多模导航、射频低噪声放大器芯片，应用于导航仪 双频测量仪
  • STM32标准库-输入捕获
  • 在 Windows 11 或 10 上删除、创建和格式化分区
  • 力扣刷题（第五十天）
  • 蓝桥杯单片机之通过实现同一个按键的短按与长按功能
  • 大连无网站的企业有哪些/站长之家域名查询排行
  • 怎样自己免费搭建网站/新东方教育培训机构
  • 南川网站制作/b站推广入口
  • 百度网站怎么做的赚钱吗/品牌策略怎么写
  • 做ptt网站/成都全网营销推广
  • 在excel中怎么做邮箱网站/潍坊网站开发公司