web1
煤矿路口西 Lv3

第一个网页

做的不好,花了很长时间才想明白一些很简单的道理。简单记录

  • 连接数据库

用纯Php实现的时候,打开phpstudy直接开干。html+php的模式中采用了phpstudy+Navicat+Intellij IDEA的方式。

先用phpstudy打开Apache和MySQL服务,Navicat中可以直观地看到本地数据库。IDEA中编写代码:

首先是明确整体框架。实现的功能是:1)指定的用户才能登录2)增删改查3)显示结果

设计页面功能:在经过调整和构思后,最终定的效果是1)登录2)显示结果及增删改查按钮3)返回

其中第二张网页和第三张在功能上还可以进行进一步优化,只是目前笔者还无法实现这一点。

login.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Ginkgo_Login</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form class="box" action="http://localhost/admin.php" method="post">
<img src="image/MiniGoldLogo.png" width="180px" height="100px">
<span><h1>Login</h1></span>
<input type="text" placeholder="账户" name="admin">
<br/>
<input type="password" placeholder="密码" name="passwd">
<br/>
<input type="submit" value="确定">
</form>
</body>
</html>

style.css

body{
margin:0;
padding:0;
font-family:sans-serif ;
background: #34495e;
}
.box{
width:300px;
padding:40px;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background: #191919;
text-align:center;
}
.box h1{
color:white;
text-transform: none;
font-weight: 500;
}
.box input[type="text"],.box input[type="password"]{
border: 0;
background: none;
display: block;
margin:20px auto;
text-align: center;
border: 2px solid #3498db;
padding:14px 10px;
width:200px;
outline:none;
color:white;
border-radius: 240px;
transition: 0.25s;
}
.box input[type="text"]:focus,.box input[type="password"]:focus{
width:280px;
border-color:#F5B041;
}
.box input[type="submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #F5B041;
padding:14px 40px;
outline:none;
color:white;
border-radius: 240px;
transition:0.25s;
cursor:pointer;
}
.box input[type="submit"]:hover{
background: none;
}

以上两段代码实现了对登录界面的优化及跳转到第二张网页的功能。至于验证用户的功能则安排在了下一部分代码中:

admin.php

<?php
function conn(){
header("content-type:text/html;charset=utf8");
$conn = new mysqli('localhost', 'root', 'Phpstudy', 'test');
if ($conn->connect_error) {
die("连接失败" . $conn->connect_error);
echo "<script> alert('连接失败')</script>";
}
if (preg_match("/^\w{1,20}$/", $_POST['admin'], $matches)) {
if (preg_match("/^\w{1,20}$/", $_POST['passwd'], $matches)) {
$login_sql = "SELECT * FROM `admin` WHERE `id`=" . "\"{$_POST['admin']}\"" . "AND `passwd`=" . "\"{$_POST['passwd']}\"";
$login_result = $conn->query($login_sql);

}
}
else
{
echo "<script>alert('输入异常')</script>";
echo "<script type='text/javascript'>history.go(-1)</script>"; //此方法直接返回
}
if($login_result->num_rows>0||$_POST['goto']) {
find($conn);
}
return($conn);
$conn->close();
}
function find($conn){
$sql = "SELECT * FROM `member` ORDER BY `num`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "Id: " . $row["id"] . " ";
echo "Grade: " . $row["grade"] . "<br>";
}
} else {
echo "无数据";
}
}
?>

这里笔者还添加了一段用于防止sql注入的代码,目前的测试是有效的,只允许输入字母数字下划线构成的1到20位字符。但专业的测试人员还没介入,暂时不敢说大话。

登录界面

login

简单注入语句

sql

yichang

密码错误时

wrong

yichang

admin.php中的下半部分代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Ginkgo_Login</title>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<style>
body{
margin:0px;
}
div#container{
width:100%;
height:750px;
background-color: #34495e;
}
div#header{
width:100%;
height: 30%;
background-color: #34495e;
}
div#menu{
width:60%;
height:67%;
background-color: #F5B041;
}
div#content{
width:40%;
height: 67%;
background-color: white;
}
div#footer{
width:100%;
height:3%;
background-color: gray;
}
</style>

</head>
<body>
<div id="container">

<div id="header" align="middle" >
<img src="image/MiniGoldLogo.png" width="200px" height="120px">
<span><h1 style="color: white">
<script type="text/javascript">
var today=new Date();
var hour=today.getHours();
var times = "";
if(hour >5 & hour <=11){
times="上午好";
}
else if(hour>11&hour<=14){t
times="中午好";
}
else if(hour>14 &hour<=18){
times="下午好";
}
else if(hour>18&hour<=24){
times="晚上好";
}
//document.write(hour);
document.write(times);

</script>
,admin
</h1></span>
</div>
<div id="menu" style="float:left;">
<?php conn();?>
</div>

<div id="content" style="float:right;">

<form class="box" action="http://localhost/dosth.php" method="post">
<input type="text" placeholder="ID" name="id">
<input type="text" placeholder="Grade" name="grade">

<input type="submit" name="action" value="add">
<input type="submit" name="action" value="delete" >
<input type="submit" name="action" value="change" >
<input type="submit" name="action" value="find" >
</form>
</div>

<div id="footer" style="clear:both;text-align:center;">
©版权所有</div>

</div>

</body>

对前端进行了简单的设计,使其与login界面相对和谐。并根据系统的当前时间设置了对应的欢迎语。

admin

增删改查的具体代码在dosth.php中:

<?php
function dosth(){
$q=isset($_POST['action'])?htmlspecialchars($_POST['action']):"";
echo $q."<br>";
if($q){
$conn = new mysqli('localhost', 'root', 'Phpstudy', 'test');
if($q=='add'){
$sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
$result=mysqli_query($conn,$sql);
$row_cnt=mysqli_num_rows($result);
if($row_cnt > 0){
echo "<script>alert('该id已存在')</script>";
echo "<script type='text/javascript'>history.go(-1)</script>"; //此方法直接返回
}elseif($row_cnt == 0){
$sql = "INSERT INTO `member`(`id`,`grade`) VALUES("."\"{$_POST['id']}\"".","."\"{$_POST['grade']}\"".")";
echo "id: " . $_POST["id"] . " - grade: " . $_POST["grade"] . "<br>";
}

}
elseif ($q=='delete'){
$sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
$result=mysqli_query($conn,$sql);
$row_cnt=mysqli_num_rows($result);
if($row_cnt > 0){
$sql= "DELETE FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
while($row = mysqli_fetch_assoc($result)) {
echo "id: " . $row["id"] . " - grade: " . $row["grade"] . "<br>";
}
}elseif($row_cnt == 0){
echo "<script>alert('无此用户')</script>";
echo "<script type='text/javascript'>history.go(-1)</script>"; //此方法直接返回
}

}
elseif ($q=='change'){
$sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
$result=mysqli_query($conn,$sql);
$row_cnt=mysqli_num_rows($result);
if($row_cnt > 0){
$sql= "UPDATE `member` SET `grade`="."\"{$_POST['grade']}\""." WHERE `id`="."\"{$_POST['id']}\"";
echo "id: " . $_POST["id"] . " - grade: " . $_POST["grade"] . "<br>";
}elseif($row_cnt == 0){
echo "<script>alert('无此用户')</script>";
echo "<script type='text/javascript'>history.go(-1)</script>"; //此方法直接返回
}
}
elseif($q=='find'){
$sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
$result=mysqli_query($conn,$sql);
$row_cnt=mysqli_num_rows($result);
if($row_cnt == 0){
echo "<script>alert('无此用户')</script>";
echo "<script type='text/javascript'>history.go(-1)</script>"; //此方法直接返回
}elseif ($row_cnt > 0){
while($row = mysqli_fetch_assoc($result)) {
echo "id: " . $row["id"] . " - grade: " . $row["grade"] . "<br>";
}
}
}
$result = $conn->query($sql);
//if ($result->num_rows > 0) {
//while ($row = $result->fetch_assoc()) {
//echo "Id: " . $row["id"] . " ";
//echo "Grade: " . $row["grade"] . "<br>";
//}
//} else {
//echo "无数据";
//}
}
echo 'SUCCESS!';
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Ginkgo_Login</title>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<style>
body{
margin:0px;
}
div#container{
width:100%;
height:750px;
background-color: #34495e;
}
div#header{
width:100%;
height: 30%;
background-color: #34495e;
}
div#menu{
width:60%;
height:67%;
background-color: #F5B041;
}
div#content{
width:40%;
height: 67%;
background-color: white;
}
div#footer{
width:100%;
height:3%;
background-color: gray;
}
</style>

</head>
<body>
<div id="container">

<div id="header" align="middle" >
<img src="image/MiniGoldLogo.png" width="200px" height="120px">
<span><h1 style="color: white">Welcome,admin</h1></span>
</div>
<div id="menu" style="float:left;">
<?php dosth();?>
</div>

<div id="content" style="float:right;">

<form class="box" action="http://localhost/admin.php" method="post">

<input type="submit" name="goto" value="goto">
</form>
</div>

<div id="footer" style="clear:both;text-align:center;">
©版权所有</div>

</div>

</body>
</html>

尝试添加重复用户时

add

删除该用户

delete

check

删无可删时

nodelete

find

目前的效果是笔者相对满意的,下一步优化页面想把第二页的输入变得更加美观。加油吧

  • 本文标题:web1
  • 本文作者:煤矿路口西
  • 创建时间:2020-12-05 14:52:34
  • 本文链接:http://www.mklkx.xyz/2020/12/05/web1/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!