php博客系统开发并部署到腾讯云服务器

女爷i 2022-09-10 06:11 209阅读 0赞

# 项目场景： #

近几日，博主浏览到许多个人博客，心血来潮也想拥有一个，但市面上的博客虽然功能强大，但大多需要付费或者界面并不美观，因此，博主想自己开发一个博客页面，用于记录自己的内容，由于没有太多时间，因此只开发了博客列表与博客添加功能

--------------------

# 所遇问题： #

博主学过一学期的PHP，但后期侧重与Java,故而在开发过程中遇到了许多问题，设计的也存在瑕疵，望诸位不吝赐教

--------------------

# 准备工作： #

博主不愿意用那些免费的博客系统的原因就是因为其页面太过普通，故而自己开发时要避免这个问题也就只能借鉴他人成果了（毕竟博主的前端也不咋地）。  
首先，便去找了一款博客前端模板，这个页面中规中矩还算可以  
  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

# 开发步骤： #

博主只要博客列表，那么我们的工作也就很轻快了，想好思路：  
连接数据库——页面发送ajax请求数据——数据查询返还结果——解析展示

## 展示： ##

![在这里插入图片描述][8d0c3e376f6b445580482ca2f504d610.gif_pic_center]

下面是详细代码：  
数据库连接：

<?php 
    	header("Content-Type: text/html;charset=utf-8"); 
    	$conn = new mysqli("localhost", "root", "", "blog")or die ("You cannot connect the database!<br>".mysqli_error());	  
    ?>

index.html发送ajax请求

$.ajax({ 
                        type:"GET",
                        url:"list.php?cur="+$cur+"&&title="+title,
                        dataType:"json",
                        success:function(result){ //获取返还结果，并遍历数据
    					$row.empty();
    						data=result.data;
    						for(var i=0;i<data.length;i++){ 
    						//遍历数据
    						}
    					});

查询数据：

<?php
    	require 'fun.php';  //引入数据库
    	include "msg.php";  //方便json封装，使用了一个msg类
    	$cur=$_GET["cur"];  //获取页码
    	$title=$_GET["title"];  //获取标题
    	$sql="select * from blog where title like '%$title%' LIMIT $cur,6";
    	$result =mysqli_query($conn,$sql); 
    	$num = mysqli_num_rows($result);
    	$msg=new Msg();
    	$msg->setnum($num);
          if ($num) { 
            $search_result = array();
              while($row = mysqli_fetch_array($result)){ 
                  $search_result[] = $row;
              }
              // 将数组转成json格式
    		  $msg->setdata($search_result);
             echo json_encode($msg); //返还数据
            }
    ?>

其输出的json字符串：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
分页的方法使用js实现：

msg类：

<?php
    class Msg { 
      /* 成员变量 */
      var $data;
      var $num;
      
      /* 成员函数 */
      function setdata($data){ 
         $this->data = $data;
      }
      
      function getdata(){ 
         echo $this->data . PHP_EOL;
      }
      
      function setnum($num){ 
         $this->num = $num;
      }
      
      function getnum(){ 
         echo $this->num. PHP_EOL;
      }
    }
    ?>

然后我们再修改一些样式，看一下最终效果：  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

接着，便是添加博客了：  
添加博客页面：使用了layui框架  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
页面代码：

上传图片并插入数据库：

<?php
    if($_SERVER['REQUEST_METHOD']=='POST'){ 
    // 允许上传的图片后缀
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    echo $_FILES["file"]["size"];
    $extension = end($temp);     // 获取文件后缀名
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/x-png")
    || ($_FILES["file"]["type"] == "image/png"))
    && ($_FILES["file"]["size"] < 204800)   // 小于 200 kb
    && in_array($extension, $allowedExts))
    { 
        if ($_FILES["file"]["error"] > 0)
        { 
            echo "错误：: " . $_FILES["file"]["error"] . "<br>";
        }
        else
        { 
            echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
            echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
            echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
            echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
            
            // 判断当前目录下的 upload 目录是否存在该文件
            // 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
            if (file_exists("upload/" . $_FILES["file"]["name"]))
            { 
                echo $_FILES["file"]["name"] . " 文件已经存在。 ";
            }
            else
            { 
                // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
                move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
                echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
            }
        }
    }
    else
    { 
        echo "非法的文件格式";
    }
    require 'fun.php';
    $img=$_FILES["file"]["name"];
    $tilte=$_POST["title"];
    $info=$_POST["info"];
    $type=$_POST["type"];
    $times=date("y-m-d h:m:s",time());
    $sql="insert into blog(title,img,info,type,times) values('$tilte','$img','$info','$type','$times')";
    if (mysqli_query($conn,$sql) === TRUE) { 
        header("location:file.html");
    } else { 
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
    
    $conn->close();
    }
    ?>

接下来，便是将其部署到服务器上了：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
然后我们就可以访问了  
[鹏翔博客][Link 1]  
这里是博客源码：  
[下载地址][Link 2]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/2f6b79d6d01e4202806c70df9379600b.png
[8d0c3e376f6b445580482ca2f504d610.gif_pic_center]: /images/20220829/aef484dedd3440f0ab68c7ab1b5f7064.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/d86ef19cf89f449ba9dbe3a434820312.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/6b8f691a64b04c318328ea918f42bafd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/9b96a86726cf4986b41af6bb26cba2f7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b2t56WlLg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/94f5683c495047c6a7ab9ad612f41368.png
[Link 1]: http://www.pengxiang.club:8081/blog/index.html
[Link 2]: https://download.csdn.net/download/pengxiang1998/21964698