会员中心通过AJAX、JSON、PHP、MySql等技术实现注册和登录功能(1+X Web前端开发中级例题)——初稿

黛琳ghz

已于 2022-11-22 00:32:43 修改

372

分类专栏：前端 # 1+X Web前端开发职业技能等级证书系列 # php 文章标签： javascript 前端 1+x Web 例题 php MySQL

于 2022-11-17 23:29:35 首次发布

本文链接：https://blog.csdn.net/weixin_53231455/article/details/127914098

版权

前端同时被 3 个专栏收录

133 篇文章 3 订阅

订阅专栏

1+X Web前端开发职业技能等级证书系列

47 篇文章 24 订阅

订阅专栏

php

14 篇文章 1 订阅

订阅专栏

文章目录

📄题目要求

阅读下列说明、效果图和代码，进行动态网页开发，补充代码（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代码

<?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");

<?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分）

🎯点赞收藏，防止迷路🔥

黛琳ghz

关注

3
点赞
踩
6
收藏
打赏
2
评论
会员中心通过AJAX、JSON、PHP、MySql等技术实现注册和登录功能(1+X Web前端开发中级例题)——初稿

阅读下列说明、效果图和代码，进行动态网页开发，补充代码（1）-（30）。会员中心，需要先注册后登录，先要求应用HTML、CSS、AJAX、JSON、PHP、MySql等技术实现注册和登录功能。
复制链接

扫一扫