一、项目介绍
1、实例图
2、代码目录结构
- admin
后台目录
- article.php
文章管理列表页
- article_add.php
新增文章数据处理页
- article_delete.php
删除文章数据处理页
- article_edit.php
编辑文章显示页
- article_update.php
修改文章数据处理页
- footer.php
管理界面页脚
- header.php
管理界面页头
- index.php
新增文章显示界面
- article.php
- about.php
作者简介
- article.php
文章内容页
- bg.jpg
背景图
- comment.php
评论显示页
- comment_add.php
新增评论数据页
- data.json
数据储存文件
- footer.php
前台页脚
- header.php
前台页头
- index.php
博客首页
3、数据库结构
JSON是一种轻量级的数据交换格式,易于人阅读和编写。同时也易于机器解析和生成。
JSON有两种结构,一是“名称/值”对的集合,类似关联数组;二是值的有序列表,类似索引数组。
[
{
"id": 1, //文章id
"title": "王者荣耀:最强的全能射手", //文章标题
"describe": "哈喽大家好,在王者荣耀里...", //内容简介
"content": "在王者荣耀里,射手位置的热度总是高于其他位置,", //文章内容
"comments": [ //评论
{
"name": "admin", //评论用户名称
"comment": "你好" //评论内容
}
]
}
]
4、相关函数
json_decode()
— 对 JSON 格式的字符串进行解码
//语法格式:
json_decode(
string $json,
bool $assoc = false,
int $depth = 512,
int $options = 0
): mixed
//assoc 当该参数为 true 时,将返回 array 而非 object 。
$datas = json_decode($dataJson, true);
json_encode()
— 对变量进行 JSON 编码
//语法格式:
json_encode(
mixed $value,
int $options = 0,
int $depth = 512
): string|false
$data = json_encode($datas);
file_get_contents()
— 将整个文件读入一个字符串
//语法格式:
file_get_contents(
string $filename,
bool $use_include_path = false,
resource $context = ?,
int $offset = 0,
int $length = ?
): string|false
$dataJson = file_get_contents('../data.json');
file_put_contents()
— 将一个字符串写入文件
//语法格式:
file_put_contents(
string $filename,
mixed $data,
int $flags = 0,
resource $context = ?
): int
file_put_contents('../data.json', json_encode($datas));
二、前台页面
1、header.php 前台页头
<?php
// var_dump($_SERVER);
$uri = $_SERVER['REQUEST_URI'];
if(strpos($uri, 'about') === false){
$active = 'index';
} else {
$active = 'about';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到我的博客</title>
</head>
<body>
<header>
<div class="slogan">
<p class="boke_name"><a href="./index.php">西柚叨叨的博客</a></p>
<p class="boke_slogan">我的地盘我做主</p>
</div>
<ul class="nav">
<li class="<?php echo $active == 'index' ? 'active': ''; ?>"><a href="./index.php">文章列表</a></li>
<li class="<?php echo $active == 'about' ? 'active': ''; ?>"><a href="./about.php">关于作者</a></li>
</ul>
</header>
<style>
*{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
body{
background-image: url('./bg.jpg');
background-repeat: repeat-x;
background-size: cover;
height: 100%;
}
.slogan{
height: 300px;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.boke_name{
font-size: 50px;
font-family: '微软雅黑';
border-bottom: 2px solid #fff;
padding-bottom: 10px;
}
.boke_slogan{
margin-top: 10px;
}
.nav{
list-style: none;
display: flex;
flex-direction: row;
color: #fff;
width: 70%;
margin-left: 15%;
}
.nav > li{
cursor: pointer;
}
.nav > li:hover{
color: #3880d4;
border: 1px solid #3880d4;
}
.nav > li > a {
display: block;
padding: 10px 30px;
}
.active {
color: #3880d4;
border: 1px solid #3880d4;
}
.active > a{
color: #3880d4;
}
.main{
margin-bottom:80px;
overflow:hidden;
width: 70%;
margin-left: 15%;
margin-top: 30px;
}
</style>
<div class="main">
2、footer.php 前台页脚
</div>
<footer>
<span class="footer_text">Copyright©2020-<?php echo date("Y");?> 荆州理工职业学院</span>
</footer>
<style>
footer{
color: #fff;
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.footer_text{
text-align: center;
}
</style>
</body>
</html>
3、index.php 博客首页
<?php
include_once "./header.php";
?>
<?php
$dataJson = file_get_contents('./data.json');
$datas = json_decode($dataJson, true);
arsort($datas);
foreach($datas as $data){
echo <<<ABC
<div class="article">
<a href="./article.php?id={$data['id']}"><h3 class="article_title">{$data['title']}</h3></a>
<p class="describe">{$data['describe']}</p>
</div>
ABC;
}
?>
<style>
.article{
padding: 20px 20px;
background-color: #fff0cd;
margin-bottom: 15px;
border-radius: 11px;
color: #666;
cursor: pointer;
opacity: 0.7;
}
.article > a {
color: blue;
}
.article:hover{
opacity: 1;
}
.article_title:hover{
color: #3880d4;
}
.describe{
color: #888;
margin-top: 10px;
}
</style>
<?php
include_once "./footer.php";
?>
4、about.php 作者简介
<?php
include_once "./header.php";
?>
<p class="about">作者:西柚叨叨</p>
<p class="about">gitee博客: xiyoudaodao.gitee.io</p>
<p class="about">与我联系:vesong87@qq.com</p>
<style>
.about{
text-align: center;
color: #fff;
padding: 10px 0;
}
.main {
border: 1px solid #fff;
}
</style>
<?php
include_once "./footer.php";
?>
5、article.php 文章内容页
<?php
include_once "./header.php";
?>
<div class='article'>
<?php
// var_dump($_GET);
if(!isset($_GET['id']) || $_GET['id'] <= 0){
die('<h1 style="text-align: center;color: #fff;">参数错误</h1>');
}
$id = $_GET['id'];
$dataJson = file_get_contents('./data.json');
$datas = json_decode($dataJson, true);
foreach ($datas as $data) {
if($id == $data['id']){
echo <<<ABC
<h1 class='article_title'>{$data['title']}</h1>
<div class='article_content'>{$data['content']}</div>
ABC;
}
}
?>
<?php
include_once "./comment.php";
?>
</div>
<style>
.article{
padding: 20px 20px;
background-color: #fff0cd;
margin-bottom: 15px;
border-radius: 11px;
color: #666;
}
.article_title{
margin: 30px;
text-align: center;
}
.article_content{
margin-bottom: 30px;
text-indent: 30px;
letter-spacing: 5px;
font-size: 17px;
}
.comment_title{
margin: 20px 0;
}
.comment_item{
margin: 10px 3%;
}
</style>
<?php
include_once "./footer.php";
?>
6、comment.php 评论显示页
<hr>
<h3 class='comment_title'>评论</h3>
<?php
foreach ($datas as $data) {
if($id == $data['id'] && isset($data["comments"])){
foreach($data["comments"] as $comment){
echo <<<ABC
<div class='comment_item'>
<span>{$comment['name']}:</span>
<span>{$comment['comment']}</span>
</div>
ABC;
}
}
}
?>
<hr>
<form class="add_comment_form" action="/comment_add.php" method="POST">
<input type="text" hidden name="id" value="<?php echo $id;?>">
<div class="item">
<label for="name">用户名:</label><input type="text" id="name" name="name" placeholder="请输入用户名">
</div>
<div class="item">
<label for="comment">评论内容:</label><textarea type="text" id="comment" name="comment" placeholder="请输入评论内容"></textarea>
</div>
<div class="item">
<label> </label>
<input type="submit" value="提交"/>
</div>
</form>
<style>
.comment_title{
margin: 20px 0;
}
.comment_item{
margin: 10px 3%;
}
.add_comment_form input{
width: 65%;
height: 30px;
text-indent: 8px;
}
.item {
margin: 30px;
}
.item label {
float: left;
width: 85px;
}
#comment{
width: 65%;
height: 100px;
}
</style>
7、comment_add.php 新增评论数据页
<?php
if(!isset($_POST['id']) || !isset($_POST['name']) || !isset($_POST['comment'])){
die('<h1>参数不完整</h1>');
}
$dataJson = file_get_contents('./data.json');
$datas = json_decode($dataJson, true);
$id = $_POST['id'];
foreach ($datas as $key => $data) {
if($data['id'] == $id){
$datas[$key]["comments"] = isset($data["comments"]) ? $data["comments"]: [];
array_push($datas[$key]["comments"], [
"name" => $_POST['name'],
"comment" => $_POST['comment'],
]);
}
}
file_put_contents('./data.json', json_encode($datas));
echo <<<ABC
<p><a href='/article.php?id=$id'>返回上一层</a></p>
<p>保存成功!<p>
ABC;
三、后台页面
1、header.php 管理界面页头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
</head>
<body>
<header>
<ul>
<li><a href="/admin/index.php">新增文章</a></li>
<li><a href="/admin/article.php">编辑文章</a></li>
</ul>
</header>
<hr>
<div class="main">
2、footer.php 管理界面页脚
</div>
<footer>
<span class="footer_text">Copyright©2020-<?php echo date("Y");?> 荆州理工职业学院</span>
</footer>
<style>
footer{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.footer_text{
text-align: center;
}
</style>
</body>
</html>
3、index.php 新增文章显示界面
<?php
include_once "./header.php";
?>
<form action="/admin/article_add.php" method="POST" class="add_article_form">
<div class="item">
<label for="title">文章标题:</label><input type="text" id="title" name="title" placeholder="请输入标题">
</div>
<div class="item">
<label for="describe">内容简介:</label><input type="text" id="describe" name="describe" placeholder="请输入内容简介">
</div>
<div class="item">
<label for="content" id="content_lable">文章内容:</label><textarea type="text" id="content" name="content" placeholder="请输入文章内容"></textarea>
</div>
<div class="item">
<button type="submit">确认</button>
<button type="reset">重置</button>
</div>
</form>
<style>
form{
width: 70%;
margin-left: 15%;
}
.add_article_form input{
width: 65%;
height: 30px;
text-indent: 8px;
}
.item {
margin: 30px;
}
#content_lable{
float: left;
}
#content{
width: 65%;
height: 300px;
}
button:first-child{
margin-left: 40%;
}
</style>
<?php
include_once "./footer.php";
?>
4、article_add.php 新增文章数据处理页
<?php
if(!isset($_POST['title']) || !isset($_POST['describe']) || !isset($_POST['content'])){
die('<h1>参数不完整</h1>');
}
$dataJson = file_get_contents('../data.json');
$datas = json_decode($dataJson, true);
$id = 1;
if(count($datas) > 0){
$id = $datas[count($datas) - 1]['id'] + 1;
}
array_push($datas, [
"id" => $id,
"title" => $_POST['title'],
"describe" => $_POST['describe'],
"content" => $_POST['content'],
]);
file_put_contents('../data.json', json_encode($datas));
echo <<<ABC
<p><a href='/admin'>返回上一层</a></p>
<p>保存成功!<p>
ABC;
5、article.php 文章管理列表页
<?php
include_once "./header.php";
?>
<?php
$dataJson = file_get_contents('../data.json');
$datas = json_decode($dataJson, true);
arsort($datas);
foreach($datas as $data){
echo <<<ABC
<p><span>{$data['title']}</span><a href="/admin/article_edit.php?id={$data['id']}">编辑</a><a href="/admin/article_delete.php?id={$data['id']}">删除</a></p>
ABC;
}
?>
<style>
.main{
width: 70%;
margin-left: 15%;
}
p > span{
border-bottom: 1px solid #666;
}
p > a{
margin: 0 10px;
}
</style>
<?php
include_once "./footer.php";
?>
6、article_edit.php 编辑文章显示页
<?php
include_once "./header.php";
$dataJson = file_get_contents('../data.json');
$datas = json_decode($dataJson, true);
$article = [];
foreach ($datas as $data) {
if($_GET['id'] == $data['id']){
$article = $data;
}
}
?>
<form action="/admin/article_update.php" method="POST" class="add_article_form">
<input type="text" hidden name="id" value="<?php echo $article["id"]; ?>">
<div class="item">
<label for="title">文章标题:</label><input type="text" id="title" name="title" placeholder="请输入标题" value="<?php echo $article["title"]; ?>">
</div>
<div class="item">
<label for="describe">内容简介:</label><input type="text" id="describe" name="describe" placeholder="请输入内容简介" value="<?php echo $article["describe"]; ?>">
</div>
<div class="item">
<label for="content" id="content_lable">文章内容:</label><textarea type="text" id="content" name="content" placeholder="请输入文章内容"><?php echo $article["content"]; ?></textarea>
</div>
<div class="item">
<button type="submit">确认</button>
<button type="reset">重置</button>
</div>
</form>
<style>
form{
width: 70%;
margin-left: 15%;
}
.add_article_form input{
width: 65%;
height: 30px;
text-indent: 8px;
}
.item {
margin: 30px;
}
#content_lable{
float: left;
}
#content{
width: 65%;
height: 300px;
}
button:first-child{
margin-left: 40%;
}
</style>
<?php
include_once "./footer.php";
?>
7、article_update.php 修改文章数据处理页
<?php
if(!isset($_POST['id']) || !isset($_POST['title']) || !isset($_POST['describe']) || !isset($_POST['content'])){
die('<h1>参数不完整</h1>');
}
$dataJson = file_get_contents('../data.json');
$datas = json_decode($dataJson, true);
foreach ($datas as $key => $data) {
if($_POST['id'] == $data['id']){
$datas[$key]["title"] = $_POST["title"];
$datas[$key]["describe"] = $_POST["describe"];
$datas[$key]["content"] = $_POST["content"];
}
}
file_put_contents('../data.json', json_encode($datas));
echo <<<ABC
<p><a href='/admin'>返回上一层</a></p>
<p>修改成功!<p>
ABC;
8、article_delete.php 删除文章数据处理页
<?php
if(!isset($_GET['id']) || $_GET['id'] <= 0 ){
die('<h1>参数错误</h1>');
}
$dataJson = file_get_contents('../data.json');
$datas = json_decode($dataJson, true);
$index = -1;
foreach($datas as $key => $data){
if($data['id'] == $_GET['id']){
$index = $key;
break;
}
}
if($index < 0){
die('<h1>未找到对应的ID文章</h1>');
}
array_splice($datas, $index, 1);
file_put_contents('../data.json', json_encode($datas));
echo <<<ABC
<p><a href='/admin'>返回上一层</a></p>
<p>删除成功!<p>
ABC;