PHP留言板功能完整开发教程 - 从数据库设计到前端展示与提交

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// 设置PDO错误模式为异常
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>

function insertMessage($username, $messageContent){
global $conn;
$sql = "INSERT INTO messages(username,content, post_time)
VALUES(:uname,:msg,NOW())";

$stmt= $conn->prepare($sql);

$stmt->bindParam(':uname', $username);
$stmt->bindParam(':msg', $messageContent);

if ($stmt->execute()){
return true;
} else{
return false;
}
}

// 示例调用:
if(insertMessage($_POST['username'], $_POST['comment'])){
// 提交成功后的提示或跳转...
}else{
// 错误处理...
}

function getMessages(){
global $conn;

$sql = "SELECT * FROM messages ORDER BY post_time DESC ";
$result = $conn->query($sql);

if ($result -> rowCount() > 0) {
while ($row = $result->fetch_assoc()) {
// 将每一行结果集转化为数组元素存入总集合内.
$data[] = $row;
}

return $data;
}else{
return [];
}
}

$dataList = getMessages();

foreach($dataList as $item){
// 渲染每个留言至HTML模板输出...
}

<!-- 在 body 部分包含你的留言框 -->
<form action="submit_message.php" method="POST">
<input type="text" name="username" placeholder="请输入您的名字"/>
<textarea rows="6" cols="80" name="comment"></textarea>
<button class="send-comment">提交</button>
</form>

<div id="comments-list"><!-- 动态填充此处留言 --></div>

<script src="https://code.jquery.com/jquery-3.x.min.js"></script> <!-- 引入库 -->

<script>
$(document).ready(function () {

$('.send-comment').click( function(event){
event.preventDefault();

var username = $('input[name=username]').val(),
comment = $('textarea[name=comment]').val();

$.ajax({
url : "submit_message.php",
data : {'username': username,'comment': comment},
dataType:"json",
type:'POST',
success:function(data,status,xhr){
if(status == "success"){
$('#comments-list').prepend(renderCommentTemplate(data)); // 根据返回的新留言对象生成 DOM 并追加至顶部

// 可能需要清空已填写过的表单控件值
$('input:text, textarea').val('');
}
},
error:function(xhr,errorType,errThrown){
console.log(errorType + ": " + errThrown);
}
});
});

});

/* 定义 renderCommentTemplate 函数用于根据留言实体转换为对应的 html 片段 */
function renderCommentTemplate(commentData){
/* 实现具体的模板拼装逻辑...例如：*/
let templateStr = '<p><strong>' + commentData.username + '</strong>: ';
templateStr += commentData.content + '</p>';
templateStr += '<span style="color:silver;">(' + getTimeAgo(commentData.post_time) + ') </span>';

return $(templateStr); // 返回 jQuery 对象方便直接插入文档流
}

/* 获取相对当前日期的时间差字符串表示 */
function getTimeAgo(timeStamp){
// ...这里省略计算时间差异的具体实现细节...
}
</script>