阿里云新用户优惠

实例简单个人博客

2021-09-29 · 1257 words · 6 minute read

php

php简单博客

一、项目介绍

1、实例图

2、代码目录结构

admin 后台目录
- article.php 文章管理列表页
- article_add.php 新增文章数据处理页
- article_delete.php 删除文章数据处理页
- article_edit.php 编辑文章显示页
- article_update.php 修改文章数据处理页
- footer.php 管理界面页脚
- header.php 管理界面页头
- index.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");?> &nbsp;&nbsp; 荆州理工职业学院</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>&nbsp;</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");?> &nbsp;&nbsp; 荆州理工职业学院</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;

一、项目介绍

1、实例图

2、代码目录结构

3、数据库结构

4、相关函数

二、前台页面

1、header.php 前台页头

2、footer.php 前台页脚

3、index.php 博客首页

4、about.php 作者简介

5、article.php 文章内容页

6、comment.php 评论显示页

7、comment_add.php 新增评论数据页

三、后台页面

1、header.php 管理界面页头

2、footer.php 管理界面页脚

3、index.php 新增文章显示界面

4、article_add.php 新增文章数据处理页

5、article.php 文章管理列表页

6、article_edit.php 编辑文章显示页

7、article_update.php 修改文章数据处理页

8、article_delete.php 删除文章数据处理页

关注微信公众号，与我交流吧~