一.成品展图
二.前端代码
1.注册regist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<meta charset="utf-6">
<link rel="stylesheet" type="text/css" href="./css/index1.css">
<style>
body {
/*加载背景图：图片地址 不平铺 */
background: url(../img/01.jpg) no-repeat;
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body background="../jmg/01.jpg">
<table style="width: 30%;height:300px;margin: 0 auto;margin-top:15%;background:#E0FFFF60;border-radius:20px">
<tr>
<td align="center" >
<form action="../after_end/regist.php " name="dl" method="post">
<table align="center" width="350" height="230" style="font-family:宋体;font-size:25px;">
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">注册用户</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">用户名</td>
<td>
<input type="username" maxlength="20" name="username" placeholder="Username" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">密码</td>
<td >
<input name="passwd" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">再次输入</td>
<td>
<input name="confirmPassword" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="zu" value="注册" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 200px;height:30px;border-radius:30px;margin-top: 15px;font-size: 18px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;margin-top: 30px;" class="btn"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
2.登录login.html
<!DOCTYPE html>
<html>
<head>
<title>用户登陆</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/index1.css"><!-- 这里设置了一个链接文档，href连接的文档是一个新样式表，是主页面样式 -->
<style>
body {
/*加载背景图：图片地址 不平铺 */
background: url(../img/02.jpg) no-repeat;
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body background="../img/02.jpg"> <!--换了一个清爽一点的背景-->
<!--这个地方有一个问题就是这个背景图不是全填充，是原比例，但是我不会调-->
<div>
<table style="width: 30%;height:300px;margin: 0 auto;margin-top:15%;background:#E0FFFF60;border-radius:20px"><!--设置了一个表单的宽度和高度、背景颜色和半透明（#00000060），然后设置了一个居中-->
<tr>
<td align="center" ><!--规定了单元格中的居中对齐-->
<table align="center" width="350" height="230"><!--设置表格的居中、大小-->
<!--标签<td>和<table>都是可以使用align属性的,即规定表格行的对齐方式-->
<form method ="POST" action = "../after_end/login.php" name="frmLogin"> <!--使用POST的方法提交登录，用的是之后要写的loading.php文件实现-->
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">Login</td><!--设置了单元格横跨两列，规定了字体的大小为50像素-->
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">用户名</td>
<td><input type="name" maxlength="20" name="username" placeholder="Username" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;"></td>
<!--规定了输入路径，输入框的居中、大小、边框去掉，只加了下边款，背景设置成白色透明（#ffffff00）-->
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">密 码</td>
<td><input name="passwd" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;padding: 5px"></td>
</tr>
<tr align="center">
<td colspan="2"><!--要设置占用两个单元格才能整体居中-->
<input type="submit" name="login" value="登陆" class="btn" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 200px;height:30px;border-radius:30px;margin-top: 15px;font-size: 18px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;">
<!--margin-top: 30px是设置了一个间距，还加了一个从网上找的渐变，调了一下字体大小、加粗和颜色，加了一个鼠标放上去变手指-->
</td>
</tr>
<tr align="center">
<td colspan="2" >
<a href="regist.html" target="_blank"><!--跳转登陆页面-->
<input type="button" name="register" value="注册" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #ffffff;width: 200px;height: 30px;border-radius: 30px;margin-top: 15px;font-size: 18px;font-family:默陌狂飞侠客体;cursor: pointer;border:none;
οnclick="window.location.href='regist.html'" class="btn" >
</a>
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
3.发送信息leave_message.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的留言板</title>
</head>
<style> body {
/*加载背景图：图片地址 不平铺 */
background: url("../img/03.jpg") no-repeat;
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
background-attachment: fixed;
}</style>
<body background="../img/hk.png">
<div>
<table style="width: 80%;height:300px;margin: 0 auto;margin-top:5%;">
<form method ="POST" action="../after_end/leave_message.php" name="add"> <!--使用POST的方法提交title和留言，用的是之后要写的insert.php文件实现-->
<tr>
<td align="center" >
<table align="center" style="width: 80%;height= 230px;">
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">名称<!--设置了单元格横跨两列，规定了字体的大小为50像素-->
<input type="text" maxlength="20" name="name" placeholder="Title" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;"></td>
</tr>
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">联系方式<!--设置了单元格横跨两列，规定了字体的大小为50像素-->
<input type="text" maxlength="20" name="connect" placeholder="Title" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;"></td>
</tr>
<tr>
<td colspan="3" style="font-size:50px;font-family:默陌狂飞侠客体">留言内容</td>
</tr>
<tr>
<td><textarea class="form-control" align="center" name="content" rows="30" cols="40" style="width: 100%;height:300px;margin: 0 auto;background:#E0FFFF60;border-radius:30px;border:none;font-size: 30px"></textarea></td>
<!--这里有几个name注意一点和数据库当中的命名一一对应-->
</tr>
<tr align="center">
<td colspan="2"><!--要设置占用两个单元格才能整体居中-->
<input type="submit" value="发布" class="btn" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 300px;height:50px;border-radius:30px;margin-top: 15px;font-size: 30px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;margin-top: 30px;">
</td>
</tr>
</table>
<hr class="hr_t" size="4" color="#999" style="border:1 solid #999;margin-top:3%;"/> <!--这是一条横线-->
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
三.后端代码
1.连接数据库代码conn.php
<?php //登录插件
$servername="???"; //域名，IP地址，在自己电脑上做就localhost
$username="???"; //默认root
$password="???"; //默认root
$dbname="????"; //数据库名
$conn=mysqli_connect($servername,$username,$password,$dbname);
if(!$conn){
die("connection failed: ".mysqli_connect_error());
}else;
//没有断开，需要另切
$conn->set_charset('utf8'); //设置字符集 ，让进入数据库的汉字是正常汉字
?>2.login.php登录代码（login的’英文单词‘意思有注册有登录）
<?php
header('content-type:text/html;charset=utf-8');
include("conn.php");
// 创建连接
//实例化 mysqli 对象，连接 mysql 数据库
getuserlist($conn);
function getuserlist($mysqli){
$sql = "SELECT username,passwd FROM users WHERE username=? and passwd=? ";
$mysqli_stmt = $mysqli->prepare($sql);
$username=$_POST["username"];
$password=$_POST["passwd"];
$mysqli_stmt->bind_param('ss',$username, $password);
if ($mysqli_stmt->execute()) {
//bind_result() 绑定结果集中的值到变量
if($mysqli_stmt->fetch()) {
echo '<br/>尊敬的用户，欢迎您的到来，以下是您的用户信息：';
echo '<br/>姓名：' . $username;
}else{echo "密码错误<br/>";}
} //释放结果集
$mysqli_stmt->free_result();
$mysqli_stmt->close();
}
$conn->close();
3.rigist.php注册代码
<?php
header('content-type:text/html;charset=utf-8');
// 创建连接
$username =$_POST["username"];
$password=$_POST["passwd"];
$doublepassword=$_POST["confirmPassword"];
if($password==$doublepassword){
include("conn.php");
$username =$_POST["username"];
$password=$_POST["passwd"];
$sql = "insert into users(username,passwd) values(?,?)";
$mysqli_stmt = $conn->prepare($sql); //准备预处理语句
//s 代表 string 类型
$mysqli_stmt->bind_param('ss',$username,$password);
//执行预处理语句
if ($mysqli_stmt->execute()) {
echo $mysqli_stmt->insert_id; //程序成功，返回插入数据表的行 id
//echo PHP_EOL;
} else {
echo $mysqli_stmt->error; //执行失败，错误信息
}
//释放结果集
$mysqli_stmt->free_result();
$mysqli_stmt->close();
$conn->close();
}
4.leave_message.php留言代码
<?php
header('content-type:text/html;charset=utf-8');
include("conn.php");
$a=$_POST['name'];
$b=$_POST['connect'];
$c=$_POST['content'];
$timestamp = time();
$d = date("Y-m-d H:i:s", $timestamp);
echo $a."<br>".$b."<br>".$c."<br>".$d;
$sql ="insert into leave_message(name,connect,content,time) values (? ,? ,? ,? ) ";
$mysqli_stmt = $conn->prepare($sql);
$mysqli_stmt->bind_param('ssss',$a,$b,$c,$d);
if ($mysqli_stmt->execute()) {
echo "留言成功";
}
$mysqli_stmt->free_result();
$mysqli_stmt->close();
mysqli_close($conn);
?>5.see_lv_message.php查看留言代码 ，没做前端，感兴趣自己做吧
<?php
header('content-type:text/html;charset=utf-8');
include("conn.php");
$sql="select * from leave_message";
$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result) > 0){
while($row=mysqli_fetch_assoc($result)){
echo "name: ".$row["name"]."<br>"."connect: ".$row["connect"]."<br>".
"content: ".$row["content"]."<br>"."time: ".$row["time"]."<br>"."<br>"."<br>";
}
}else {
echo "0 result";
}
mysqli_close($conn);
?>
四.数据库内表的设置+制作工具+
1.数据库+服务器用的phpstudy2018，内置musql数据库
2.表结构
下图留言表
下图账号表 
五.代码漏洞
<上传留言时>
出现<script>alert(1);</script>弹框漏洞，同理以上代码有很多漏洞需要处理但我没有发现和修改，如果网友已经发现请联系我或者发在留言区：v：lidd123456a
六。来源
登陆注册以及留言： https://blog.csdn.net/sevenlob/article/details/104269468
但是这个有部分的结构不完整被我修改了
图片全展开来源代码：https://blog.csdn.net/qq_51636863/article/details/122112383
3271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
