📄题目要求
- 阅读下列说明、效果图和代码，进行动态网页开发，补充代码（1）-（30）。
- 会员中心，需要先注册后登录，先要求应用HTML、CSS、AJAX、JSON、PHP、MySql等技术实现注册和登录功能。项目包含主页index.html、style.css、login.js、register.php和login.php文件，其中，主页面index.html是首页，只显示“登录成功”字样；style.css为主页样式文件；login.php为判断登录，register.php为注册数据，返回JSON格式数据。
主页分为两个部分：登录和注册，当点击登录和注册按钮时，通过ajax发送请求到login.php或者register.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作。
【问题1】根据现有的代码，补全样式代码，和效果图一致
【问题2】根据提示，完成数据库的搭建
【问题3】根据现有代码和提示，完成数据库的链接
【问题4】用ajax完成数据请求，并处理接收到的数据
🧩效果图
1
💻HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二题-登录</title> <link rel="stylesheet" href="css/login.css"> <script src="js/jquery.min.js"></script> </head> <body> <div class="box"> <div class="con"> <ul class="title"> <li class="cur">登录</li> <li>注册</li> </ul> <div class="form"> <form class="login" style="display: block;"> <ul> <li> <input type="text" class="loginUsername" name="username" placeholder="请输入用户名"> </li> <li> <input type="password" class="loginPwd" name="password" placeholder="请输入密码"> </li> <li> <button type="button" class="loginBtn">登录</button> </li> </ul> </form> <form class="register"> <ul> <li> <input type="text" class="registerUsername" name="username" placeholder="请输入用户名"> </li> <li> <input type="password" class="registerPwd" name="password" placeholder="请输入密码"> </li> <li> <input type="password" class="registerPwdOk" name="passwordOk" placeholder="请确认密码"> </li> <li> <button type="button" class="registerBtn">注册</button> </li> </ul> </form> </div> </div> </div> <script src="js/login.js"></script> </body> </html>
💻CSS代码
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{ margin: 0; padding: 0; } ul,ol{ list-style: none; } input{ width: 100%; height: 40px; padding:0 10px; border:1px solid #d8d8d8; _____(1)_______;/*设置盒子大小始终是100%*/ } .box{ position: absolute; top:50%; left:50%; _____(2)_transform:translate(-50%,-50%)______;/*设置盒子水平垂直居中，用CSS3的方法*/ width: 400px; padding:20px; _____(3)____: 0 0 15px #ccc;/*设置盒子投影*/ border:1px solid #ccc; } .box .title{ _______(4)______;/*设置弹性盒子*/ ________(5)___justify-content:space-between__;/*设置弹性盒子两端对齐*/ text-align: center; margin-bottom: 20px; } .box .title li{ flex:1; } .box .title li.cur{ ____(6)__font-weight____: 600;/*文字加粗*/ color:orange; } .box .title li:first-child{ border-right:1px solid #ccc; } .box .form form{ display: none; } .box form ul li{ margin-bottom:10px; } button{ width: 100%; height: 40px; border:none; ____(7)_border-radius_____: 5px;/*设置圆角*/ background-color: green; color:#fff; }
💻MySQL代码
//删除存在list数据库 ____(8)____ DATABASE IF EXISTS list; //创建list数据库 ______(9)_________; USE list; CREATE TABLE `admin` ( `id` int (4) NOT NULL （10）auto_increment COMMENT '序号', `username` varchar (16) NOT NULL COMMENT '用户名', `password` varchar (16) NOT NULL COMMENT '密码', `time` datetime DEFAULT ___(11)_current_timestamp___ COMMENT '创建时间', （12）primary key (`id`) )ENGINE= InnoDB DEFAULT CHARSET= utf8;
💻PHP代码
1
<?php // header ("Content-type: text/html; charset=utf-8") $servername = "localhost"; $username = "root"; $password = "123456"; // 创建连接 $conn = _____(13)_mysqli_connect____($servername, $username, $password); // 检测连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } mysqli_query($conn,'set names utf8'); // 查询数据库 _____(14)_mysqli_select_db___($conn,"list");1
<?php //引入conn.php页面 ______(15)___include(“conn.php”)____; $username=$_POST['username']; $password=$_POST['password']; // 判断用户是否已经存在 $sqlUsername="____(16)_ $resultUsername = mysqli_query($conn, $sqlUsername); if($resultUsername && mysqli_num_rows($resultUsername)>0){ $res = array( 'code'=>2, 'message'=>'用户名已经存在' ); }else{ //插入SQL语句，并发送 $sql="___________(17)________________"; $result = mysqli_query($conn, $sql); //解析结果集 if($result){ $res = array( 'code'=>1, 'message'=>'注册成功' ); }else{ $res = array( 'code'=>0, 'message'=>'注册不成功' ); } } //将$res转成json echo_____(18)_ ____; //关闭数据库 _____(19)___ _____; ?> 【问题3 代码：login.php】 在登录页表单中填入数据，点击“登录”按钮，通过ajax去请求login.php页面,判断登录是否成功。 <?php //引入conn.php页面 ______(15)_______; $username=$_POST['username']; $password=$_POST['password']; //4.定义SQL语句，并发送 $sql="_________(20)____________"; $result = mysqli_query($conn, $sql); //5.解析结果集 if($result && mysqli_num_rows($result)>0){ $res = array( 'code'=>1, 'message'=>'登录成功' ); }else{ $res = array( 'code'=>0, 'message'=>'用户名密码输入有误' ); } //将$res转成json echo_____(18)_____; //关闭数据库 _____(19)________; ?>
💻JavaScript代码
$(function(){ $(".title li").click(function(){ //给点击的元素添加类，将其他元素的cur类移除 $(this).____(21)_ ___('cur').siblings().___(22)_ ____('cur'); $(".form form").eq(__(23)___).css("display","block").____(24)____().css("display","none"); }) $(".loginBtn").click(function(){ //获取表单中的值 var username=$(".login .loginUsername").__(25)_val()___; var password=$(".login .loginPwd").__(25)_val()__; $.ajax({ url: 'http://localhost/second/login.php', type: 'post', dataType: '__(26)_json___', ___(27)__ _: { username: username, password: password } }) .done(function(data) { if(data.code==1){ //登录成功加载首页 _____(28)_______="http://localhost/second/index.html"; }else{ //弹出后台返回的message信息 _____(30)______; } }) }) $(".registerBtn").click(function(){ var username=$(".register .registerUsername").__(25)___; var password=$(".register .registerPwd").__(25)___; var passwordOk=$(".register .registerPwdOk").__(25)___; //判断两次密码输入是否一致 if(_____(29)______){ $.ajax({ url: 'http://localhost/second/register.php', type: 'post', dataType: '__(26)_ ___', ___(27)___: { username: username, password: password } }) .done(function(data) { if(data.code==1){ //弹出后台返回的message信息 _____(30)_ _____; ____(28)_____="http://localhost/second/login.html"; }else{ //弹出后台返回的message信息 _____(30)______; } }) }else{ alert("密码和确认密码不一致"); } }) })
🎯实现效果
📰完整答案
试题二（45分）
【问题】（45分）
（1）box-sizing: border-box
（2）transform: translate(-50%,-50%)
（3）box-shadow
（4）display: flex
（5）justify-content: space-between
（6）font-weight
（7）border-radius
（8）DROP（不区分大小写）
（9）CREATE DATABASE list
（10）auto_increment
（11）current_timestamp
（12）primary key
（13）new mysqli
（14）mysqli_select_db
（15）include("conn.php")
（16）select
（17）insert into admin(username,password) values('$username','$password')
（18） json_encode($res)
（19）mysqli_close($conn)
（20）select * from admin where username='$username' and password='$password'
（21）addClass
（22）removeClass
（23）$(this).index()
（24）siblings
（25）val()
（26）json
（27）data
（28）window.location.href
（29）password==passwordOk
（30）alert(data.message)
（每空1.5分，共45分）
🎯点赞收藏，防止迷路🔥
