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

文章目录

📄题目要求

🧩效果图

💻HTML代码

📄题目要求

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


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代码


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


//引入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页面,判断登录是否成功。
//引入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分）

🎯点赞收藏，防止迷路🔥

相关阅读:
CommunityToolkit.Mvvm8.1 viewmodel使用-旧式写法(2)
1.mysql字段类型该怎么选择？
一文带你了解java基础，要让自己随时处于可以面试的一种状态，不能被动，要主动
 第3次作业练习题（第三章指令流程与微命令）
期货客户开户手续费（期货开户最低手续费）
【深入浅出Java并发编程指南】「难点 - 核心 - 遗漏」让我们一起探索一下CountDownLatch的技术原理和源码分析
 ViewModel的共享(下)
（c语言）二维数组求最大值
 2022.8.16 模拟赛
 数据库连接池长时间不用，乍一用还用不了，结果是防火墙的锅
原文地址：https://blog.csdn.net/weixin_53231455/article/details/127914098

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

📄题目要求

🧩效果图

💻HTML代码

💻CSS代码

💻MySQL代码

💻PHP代码

💻JavaScript代码

🎯实现效果

📰完整答案

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