2019-08-01 PHP+MySQL开发简单的留言板（5）
2019-08-01 本文已影响0人
NoelleMu
该有的功能目前已经全都有了，现在只要完成首页的编写就可以了。
首页在设计上是要展示所有留言信息，所以跟后台管理页面有一定的相似性，都是循环输出所有的留言信息。
此外，首页作为访问一个网站最先看到的页面，必须要有一定的美观性。
首页的编写
这次针对管理员加了一个“信息管理”选项。
index.php
<!DOCTYPE html>
<?php
session_start();
error_reporting(0);
include_once 'connect.php';
?>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>NullP0的留言板</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="topbar">
<div class="toptitle">NullP0的留言板</div>
<div class="loginOrLogout">
<?php
if (!isset($_SESSION['username'])) {
echo '<a href="html/login.html" class="loginOrLogoutLink">登录</a>';
} else {
if ($_SESSION['username'] === 'admin') {
echo '<a href="admin.php" class="loginOrLogoutLink">信息管理</a>';
}
echo '<a href="html/add.html" class="loginOrLogoutLink">添加留言</a>';
echo '<a href="logout.php" class="loginOrLogoutLink">登出</a>';
}
?>
</div>
</div>
<div class="bigbox">
<?php
mysqli_select_db($con, 'message');
mysqli_set_charset($con, 'utf-8');
$getMeaasgeSql = 'select count(id) as messageCount from user';
$result = mysqli_query($con, $getMeaasgeSql);
$data = mysqli_fetch_assoc($result);
$messageCount = $data['messageCount']; // 根据查询结果获得总留言数
// 从数据库中查询留言信息
$msgsql = 'select id, user, title, content, time from message order by id';
$result = mysqli_query($con, $msgsql);
if ($result && mysqli_num_rows($result)) {
// 将留言信息输出到页面上
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="message">';
echo '<div class="msgtitle">';
echo '<div class="user">' . htmlspecialchars($row['user']) . '：' . '</div>'; // htmlspecialchars用来防止XSS
echo '<div class="title">' . htmlspecialchars($row['title']) . '</div>';
echo '<div class="time">' . ' at ' . $row['time'] . '</div>';
echo '</div>';
echo '<div class="content">' . htmlspecialchars($row['content']) . '</div>';
echo '</div>';
}
} else {
die('没有留言数据！');
}
?>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
}
html {
font-family: DengXian, "Microsoft YaHei";
background-color: #dFdFdF;
}
.topbar {
display: flex;
width: 100%;
height: 40px;
background-color: #036;
position: fixed;
}
.toptitle {
display: flex;
align-items: center;
justify-content: center;
padding-left: 30px;
padding-right: 30px;
font-size: 1.2em;
color: white;
text-decoration: none;
}
.bigbox {
padding-top: 50px;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.loginOrLogout {
display: flex;
margin-left: auto;
align-items: center;
justify-content: center;
padding-left: 30px;
padding-right: 30px;
font-size: 1.2em;
color: white;
text-decoration: none;
}
.loginOrLogoutLink {
margin-right: 30px;
color: white;
text-decoration: none;
}
.message {
width: 80%;
height: 200px;
background-color: white;
box-shadow: 0 5px 10px grey;
border-radius: 5px;
margin: 10px;
}
.msgtitle {
margin: 10px;
padding: 10px;
font-size: 1.2em;
color: #036;
border-bottom: 1px solid #036;
}
.title {
display: inline;
font-weight: bold;
}
.user {
display: inline;
}
.time {
display: inline;
margin-left: 50px;
}
.content {
overflow: auto;
margin: 10px;
padding: 10px;
font-size: 1.1em;
}
实际访问效果
管理员登录：
未登录：
普通用户登录：
总体项目结构：
总结
这是我第一次自己开发一个全栈项目，因为没有想要实现太复杂的功能，所以整个项目也没有特别复杂和庞大，归根结底还是数据库的增删查改操作和后端与前端的配合。
PHP可以像JSP一样直接插入HTML代码的这个特点在这样的项目中确实有不小的优势。但是如果是更大的项目，还是前后端分离更加有利。
PHP有毒，以后再也不会用这门语言开发了，这门语言的脾气太大了……
