VScode连接数据库(登录网页)

VScode连接数据库(登录网页)

最近做网页碰到连接数据库的问题,上网查了3天终于搞明白了。
我连接的是phpstudy里自带的Mysql数据库。
如果要连接自己下载的Mysql数据库的话,再去网上找找方法吧。我还没琢磨出来😑😑😑
话不多说,亮实例!

登录网页 login.html

<!DOCTYPE html>
<html>
	<head>
		<!-- meta-----定义关键词 -->
		<meta charset="utf-8">
		<title>普通高中素质评价系统</title>
        <!-- Stylesheet -- 定义一个外部加载的样式表 -->
		<link rel="stylesheet" href="../css/login.css"/>      
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right">
				<h4>登 录</h4>
				<form  action="../php/login.php" method="post"  onsubmit="return enter()">
					<!-- placeholder提供可描述输入字段预期值的提示信息 -->
					<input class="acc" type="text"  name="username" placeholder="用户名"/>   
					<input class="acc" type="password"  name="password" placeholder="密码"/>
					<div class="down">
						<label>权限:</label>
						<label1><input type="radio" name="ren" value="student" checked="true">学生</label1>
						<label1><input type="radio" name="ren" value="teacher">老师</label1>
					</div>
				<!-- 首先是在form标签中有一个onsubmit的属性,他有两个值分别是true和false,
				如果true,这个网页就跳转到action属性的search_result.php页面,否则不跳转。 -->
					<input class="submit" type="submit"  name="log" value="登录"/>
				</form>
			</div>
		</div>
	</body>
</html>

第8行的"…/css/login.css"文件

我把对 div ,form 部分的设置放在了这里。这个CSS文件的代码,我忘记从哪位大佬分享的网盘里下载的了。如果大佬看到可以联系我删除文章🥰🥰🥰
因为我是初学,大佬的代码我大部分不理解,所以自己加了点注释。`

/* 通用选择器 */
*{
	margin: 0;      /*设置一个元素所有外边距的宽度*/
	padding: 0;     /* 可以定义元素边框与元素内容之间的空间,即上下左右的内边距*/
	box-sizing: border-box;
} 
/* a{
	text-decoration: none;
} */
/* 页面背景 */
html{
	font-size: 8px;        /* 登录页面大小 */
	background: url(../img/login/22.jpg) no-repeat 100% fixed;
	background-size: 100% 100%;
}
/* 页面前(html元素前) */
html::before{
	content: '';            /*添加内容*/
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;                        /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
	backdrop-filter:blur(0.8rem);       /* 可以让一个元素后面区域添加图形效果(如模糊或颜色偏移)*/     /*大背景图*/
}
/* ::selection选择器 */
/* 选中的文本是蓝色背景,白色的字体 */
::selection{
	color: #FFFFFF;
	background-color: rgb(81, 67, 214);
}
/* box盒子的设置 */
.box{
	display: flex;       /*弹性布局*/
	overflow: hidden;    /*溢出隐藏*/
	width: 90rem;
	height: 55rem;
	border-radius: 1.5rem;   /*外边框边角*/
	margin: 10% auto;        /*设置一个元素所有外边距的宽度*/
	/* box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10%); */       /*添加阴影,增加立体感*/
}
.box .left{
	position: relative;
	width: 50%;
	height: 100%;
	/* background-color: skyblue; */
}
/* 插入左侧图片 */
.box .left::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/login/首页.jpg) no-repeat ;
	background-size: cover;
	opacity: 80%;             /*设置或返回元素的不透明度*/
}
.box .right{
	display: flex;        /*弹性布局*/
	width: 50%;
	/* 指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向 (正方向或反方向) */
	flex-direction: column; 		/* column: 作为列,垂直地显示弹性项目。 */
	/* align-items :弹性容器内的项目指定默认对齐方式。 */
	align-items: center;            /*项目位于容器的中央*/
	background-color: rgba(255, 255, 255, 0.8);  /* 0.8---透明度 */
}
/* 开头登录二字字体 */
.box .right h4{
	color: rgb(99, 159, 239);
	font-size: 3rem;
	margin-top: 5rem;
}
.box .right form{
	display: flex;
	/* 指定 flex 元素单行显示还是多行显示。如果允许换行,这个属性允许你控制行的堆叠方向。 */
	flex-wrap: wrap;           /*允许换行*/
	/* 定义了浏览器之间,如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。 */
	justify-content: center;   /* 居中排列 */
}
/* 输入框 */
.box .right form .acc{
	outline: none;       /*外框样式*/
	width: 60%;
	height: 5rem;
	font-size: 1.6rem;
	margin-top: 5rem;     /*上边距*/
	padding: 0 0 0 1.6rem;       /* 可以定义元素边框与元素内容之间的空间,即上下左右的内边距*/
	border: none;         /* 去掉输入框的边框 */
	border-bottom: 1px solid rgb(144,129,241);  /*下边框*/
	/* color: rgb(144,129,241); */
	background-color: rgba(0,0,0,0);
}
/* CSS伪类 :focus 表示获得焦点的元素(如表单输入) */
.right form .acc:focus{ 
	outline: none;
	color:#FF7F50;
	padding: 0 0 0 1.6rem;      /*内边距*/
}
/* 登入按钮 */
.submit{
	width: 500px;
	height: 5rem;
	color: #f6f6f6;
	background: linear-gradient(120deg, #4b068ba7 0%, #076cd1c7 100%);   /*设置渐变*/
	font-size: 1.4rem;
	border: none;
	border-radius: 0.5rem;       /*外边框边角*/
	margin: 6rem 0 0 50%;        /*设置一个元素所有外边距的宽度*/
	transform: translateX(-50%);  /*定义转换,只是用 X 轴的值。*/
}
/* :hover 选择器用于选择鼠标指针浮动在上面的元素。 */
.right .submit:hover{
	box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 /15%);    /*添加阴影,增加立体感*/
}
.right .down{
	display: flex;           /*弹性布局*/
	justify-content: space-between;   /* justify-content: space-between; 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 */
	margin-top: 1rem;        /*上边距*/
	width: 60%;
}
/* right盒子中down部分中a的设置 */
.right .down label{
	font-size: 2rem;
	margin-top: 5rem;       /*上边距*/
	padding: 1rem 2rem;    
	color: #666;
}
.right .down label1{
	font-size: 2rem;
	margin-top: 5rem;       /*上边距*/
	padding: 1rem 2rem;    
	color: #666;
}
/* :hover 选择器用于选择鼠标指针浮动在上面的元素。 */
.right .down label1:hover{
	color: rgb(144,129,241);
}

注意:属性background设置背景图,需要你修改成自己图片的存储位置

<form action="…/php/login.php"文件

连接数据库的关键代码,点击登录会执行该文件。

<?php
// error_reporting(0);
$userName = $_POST['username'];
$password = $_POST['password'];
$classif = $_POST['ren'];
$class="";
if(($userName==null) || ($password==null)){
    echo "<script> alert('请输入用户名或密码');parent.location.href='login.html'; </script>";
    // header('Location:index.html');
}
else if ( ($userName!=NULL) && ($password!=NULL)){
    //数据库连接信息改成自己的 :主机(单词localhost不用改)+数据库用户名+密码+要连接的数据库
    $conn = mysqli_connect('localhost','root','root','suzhipingjia');
    $sql = "select * from userf where num = '$userName'";
    $res = mysqli_query($conn,$sql);
    $row = mysqli_fetch_array($res);
    if($row['num']==null) {
        echo "<script> alert('该用户不存在!请联系管理员!');parent.location.href='login.html'; </script>";
    }
    else if($row['num']==$userName&&$row['pwd']!=$password)
    {
        echo "<script> alert('密码错误!若忘记密码,请联系管理员!');parent.location.href='login.html'; </script>";
    }
    else if($row['num']==$userName && $row['pwd']==$password){
        if($classif=='student'){$class='学生';}
        else if($classif=='teacher'){$class='老师';}
        if($row['classif']!=$class){
            echo "<script> alert('权限错误!');parent.location.href='login.html'; </script>";
        }
        else{
            if($class=='学生'){
                echo "<script>alert('登陆成功!!');location.href='html/StuMain.html';</script>";
            }
            else if($class=='老师'){
                echo "<script>alert('登陆成功!!');location.href='html/TeaMain.html';</script>";
            }
        }
    }
}
?>

注意:$_POST[‘name’],name是你自己给控件设置的name

注意还有,有的echo后面加了跳转的页面!适当修改后(创建相应名称的跳转页面),直接复制代码就可以运行了。😋😋😋

                       

点击阅读全文

上一篇 2023年 6月 11日 am10:46
下一篇 2023年 6月 11日 am10:48