Web 应用开发技术课程
期末学习报告
学院：
班级：
姓名：
学号：
1、 任务目的；
设计并制作一个磨砂玻璃页登录页面主题的动态网站
2、 任务内容（应包含数据存储、数据处理等）；
页面设计：
1、设计一个具有磨砂玻璃效果的登录页面，确保页面美观、简洁，并与整体
应用风格相符。
2、提供输入用户名和密码的表单，以及一个登录按钮。
前端实现：
1、使用 HTML、CSS 和 JavaScript 实现登录页面的基本结构和功能。
2、利用 CSS 实现磨砂玻璃效果，提升页面的视觉效果。
3、确保页面在不同的浏览器和设备上都能良好地展示和运行。
后端连接与验证：
1、使用 JavaScript 连接 MySQL 数据库。
2、当用户点击登录按钮时，将用户名和密码提交到后端进行验证。
3、后端需要查询数据库，判断提交的用户名和密码是否已经注册。
响应处理：
1、如果数据库中已经注册了提交的用户名和密码，则后端返回登录成功的响
应，前端跳转到应用的主界面或相应的用户中心页面。
2、如果数据库中未注册提交的用户名和密码，则直接自动注册本次数据并存
入数据库中，下次可以直接使用本次数据登录。
3、 源代码（HTML 页面、PHP 文件、数据库文件）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>登录页面</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
overflow: hidden;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to
bottom,#f1f4f9,#396c5b);
}
section .color{
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1){
top: -350px;
width: 600px;
height: 600px;
background: #30574b;
}
section .color:nth-child(2){
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
background: #30574a;
}
section .color:nth-child(3){
bottom: 50px;
right: 100px;
width: 500px;
height: 500px;
background: #579783;
}
.box{
position: relative;
}
.box .square{
position: absolute;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgb(0,0,0,0.1);
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgb(255,255,255,0.2);
border-bottom: 1px solid rgb(255,255,255,0.2);
background:rgb(255,255,255,0.1);
border-radius: 10px;
animation: animate 10s linear infinite;
animation-delay: calc(-1s*var(--i));
}
/* 动画 */
@keyframes animate{
0%,100%{
transform: translateY(-40px);
}
50%{
transform: translate(40px);
}
}
.box .square:nth-child(1){
top: -50px;
