简易留言板用网页的方式代码
时间: 2023-08-07 14:05:44 浏览: 55
好的,以下是一个基于 PHP 和 MySQL 的简易留言板的示例代码:
1. 前端页面
```html
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
form {
margin: 20px 0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"], textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}
li h2 {
font-size: 18px;
margin-top: 0;
}
li p {
margin-bottom: 0;
}
</style>
</head>
<body>
<h1>留言板</h1>
<form action="post.php" method="post">
<label for="name">姓名</label>
<input type="text" name="name" id="name">
<label for="email">邮箱</label>
<input type="text" name="email" id="email">
<label for="message">留言内容</label>
<textarea name="message" id="message" rows="5"></textarea>
<input type="submit" value="提交留言">
</form>
<h2>留言列表</h2>
<ul>
<?php
// 从数据库中获取留言
$host = 'localhost';
$dbname = 'test';
$username = 'root';
$password = '';
$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8";
$options = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
);
try {
$pdo = new PDO($dsn, $username, $password, $options);
} catch(PDOException $e) {
echo '连接数据库失败:' . $e->getMessage();
}
$sql = 'SELECT * FROM messages ORDER BY created_at DESC';
$stmt = $pdo->prepare($sql);
$stmt->execute();
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 显示留言
foreach ($messages as $message) {
echo '<li>';
echo '<h2>' . htmlspecialchars($message['name']) . '</h2>';
echo '<p>' . htmlspecialchars($message['message']) . '</p>';
echo '<p>' . htmlspecialchars($message['created_at']) . '</p>';
echo '</li>';
}
?>
</ul>
</body>
</html>
```
2. 后端处理
```php
<?php
// 接收表单数据
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$created_at = date('Y-m-d H:i:s');
// 将留言存入数据库
$host = 'localhost';
$dbname = 'test';
$username = 'root';
$password = '';
$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8";
$options = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
);
try {
$pdo = new PDO($dsn, $username, $password, $options);
} catch(PDOException $e) {
echo '连接数据库失败:' . $e->getMessage();
}
$sql = 'INSERT INTO messages (name, email, message, created_at) VALUES (:name, :email, :message, :created_at)';
$stmt = $pdo->prepare($sql);
$stmt->execute([
'name' => $name,
'email' => $email,
'message' => $message,
'created_at' => $created_at
]);
// 返回到留言板页面
header('Location: index.php');
exit();
?>
```
您需要将这些代码保存为 index.php 和 post.php 两个文件,并将其放在支持 PHP 和 MySQL 的 Web 服务器上,就可以访问留言板页面了。请注意,这个示例代码并不完善,仅供参考。如果您想要在生产环境中使用,请务必进行适当的安全性和性能优化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)