PHP+MySQL+Bootstrap 美食主題博客項目

時間 2020-07-20

標籤 php+mysql+bootstrap php mysql bootstrap 美食主題博客項目欄目 PHP 简体版

原文原文鏈接

這個項目是我大三上的PHP課期末項目大做業。做業已經交了，如今放上來給你們參考學習！javascript

一：技術棧介紹

主題：美食博客php

前端：html,js,css, bootstrap,jqcss

後端：php mvchtml

數據庫：mysql前端

本項目美食部分接口調用地址：美食接口文檔java

github源碼：github.com/zoyoy1203/p…mysql

網盤源碼：pan.baidu.com/s/1CEHItobT…git

提取碼：jh36github

二：實現功能總結

登陸，註冊，退出登陸，驗證碼。
API接口調用：菜譜推薦，菜譜分類，菜譜分類詳情，菜譜詳情。
我的信息展現：頭像，座右銘修改。
我的動態發佈展現。
動態點贊評論功能。
動態展現，搜索，關鍵字標紅功能。
用戶列表顯示，添加刪除好友功能。
錯誤信息提示功能。

三：整體結構

該項目採用簡易版mvc的結構。sql

因爲後來我都是直接在控制層裏聲明使用數據表結構數據，因此後面我把Model層去掉了。只留下Controller控制層和View視圖層。

其餘目錄結構以下圖：public（靜態樣式文件）upload(存放上傳的圖片) util (裏面只有一個verCode.php用來繪製驗證碼圖片)

根目錄下的 index.php文件用來對不一樣 url的請求進行 Controller控制層下不一樣類和方法的調用。

本項目Controller文件下只有一個UserController類，裏面包含了項目全部的處理方法。只需按照/phpProject/?a=regis (a=後接相應的調用方法) 這個格式進行請求則可。

四：做品展現

1. 登陸註冊功能

詳細介紹：

登陸註冊頁面都是經過form表單提交數據到action="/phpProject/?a=loginPost" action="/phpProject/?a=regisPost"

而後在Controller文件下的UserController.php裏對應的方法中進行處理。

登陸註冊處理過程當中，若是發生錯誤，則會在頁面上提示相應的錯誤緣由：

功能要求：1.用戶註冊：判斷重名，驗證碼驗證，至少要有用戶名和密碼字段。（完成！）

項目移動過程當中，須要注意，util文件夾下的verCode.php中

$font = "D:/xampp/htdocs/phpProject/public/font/segoepr.ttf"; // 路徑問題

須要修改成當前電腦對應的路徑，否則驗證碼無字體顯示。

驗證碼生成的四個字符存儲在 $_SESSION["code"]中，以便於後續的判斷處理。

另外，爲了解決隨機顏色致使驗證碼個別字符融入背景色的問題，登陸頁面的驗證碼設置了點擊驗證碼圖片切換字符的功能。

主要代碼以下：

<img src="util/verCode.php" alt="看不清楚，換一張" onclick="javascript:newgdcode(this,this.src);" style="width: 100px;height:50px;"  alt=""/>

<script language="javascript"> function newgdcode(obj,url) { obj.src = url+ '?nowtime=' + new Date().getTime(); //後面傳遞一個隨機參數，不然在IE7和火狐下，不刷新圖片 } </script>
複製代碼

功能要求：2.用戶登陸：以SESSION方式。（完成！）

登陸成功後，會將登陸用戶名，用戶id，用戶頭像地址分別存入SESSION：

_SESSION['userid'] $_SESSION['avatar']

在後續頁面菜單欄右側會顯示登陸的用戶名。

首頁和菜譜頁面下的子頁面不須要用戶登陸也能夠顯示。

其餘頁面如：我的中心，動態，好友列表等頁面，須要用戶登陸才能顯示。若是沒有登陸則跳轉到登陸頁面。

功能要求：6.使用API接口製做一項功能，如天氣、菜譜、影視、火車票查詢等（完成！）

2. 首頁

（調用豆果美食數據接口：接口文檔）

3. 菜譜分類頁面，菜譜頁面，菜譜詳情頁面（調用豆果美食數據接口：接口文檔）

4. 我的中心頁面

功能要求： 5.查看本身的分享：已登陸用戶要能查看本身發佈的分享。（完成！）

我的中心頁面左側顯示我的信息：能夠修改我的頭像，座右銘；右側顯示我的發佈的動態，按時間前後顯示。

5. 動態頁面

功能要求： 4.首頁：顯示全部用戶發佈的分享，每一條分享顯示發佈人、時間。（完成）

功能要求：3.內容分享：已登陸用戶能夠發佈本身的圖文分享，文字不超過200中文字，支持最多3張圖片上傳（6分）（完成）

字體圖片檢測主要代碼：

if($_POST['text']){
    if(strlen($_POST['text'])<=400){
        $content = $_POST['text'];
    }else{
        $errinfo = '評論內容超過200中文字！';
        $this -> news1($errinfo,$errinfo1);
        die;
    }
}

if(count($_FILES['img']['name'])>2){
    $errinfo = '上傳圖片超過3張！';
    $this -> news1($errinfo,$errinfo1);
    die;
}
複製代碼

功能要求： 7.全部用戶能夠搜索分享內容：用戶能夠搜索分享內容，並列表顯示，搜索的關鍵字加粗或紅色。（4分）（完成）

搜索動態並關鍵字標紅主要思路：

Input框輸入搜索內容（搜索用戶可填可不填，也可只查詢相應用戶動態）。點擊搜索按鈕，提交form表單action="/phpProject/?a=searchNew"

在 searchNew方法裏鏈接數據庫查詢相應動態:

// 查詢動態
$sql = "SELECT news.*,`user`.avatar,`user`.nickname FROM `user`,news WHERE `user`.id=news.user_id ORDER BY news.createtime DESC,news.id DESC";
複製代碼

若是有搜索內容關鍵字，則在查詢到的每條動態內容數據上對關鍵字進行替換便可：

// 動態內容關鍵字標紅
$result['content'] = str_replace($s_content,"<span style='color:red;'><b>$s_content</b></span>",$result['content']);
複製代碼

動態點贊評論功能的主要代碼以下：

// 點贊
public function addLike() {
    $id = $_GET['id'];
    $like = $_GET['like'];
     // 根據like值判斷是執行點讚語句仍是取消點讚語句
     if($like==1){
         $sql = "DELETE FROM like_news WHERE news_id= ".$id." AND user_id=".$_SESSION['userid'];
     }else if($like==0){
         $sql = "INSERT INTO like_news(news_id,user_id) VALUES(".$id.",".$_SESSION['userid'].")";
     }
    $res = mysqli_query($this->link,$sql);
    
}
// 添加評論
public function addcomments() {
    if(!empty($_POST)){
        $newid = $_POST['newid'];
        $userid = $_SESSION['userid'];
        $content = $_POST['content'];

        $sql =  "INSERT INTO `comment`(new_id,user_id,content) VALUES(".$newid.",".$userid.",'".$content."')"; // 向評論表插入用戶評論信息
        $res = mysqli_query($this->link,$sql);
    }
    
}
其中，爲了點贊評論後，頁面不刷新，用戶體驗效果好，這裏使用了`AJAX`異步請求數據。（修改座右銘，添加刪除好友等功能都使用了該方法）
點贊JS代碼示例以下：
$(".addlike").on("click",function(){
            let uid = $(this).children(".id").text();
            let avatar = $(this).children(".avatar").text();
            let newsid =  $(this).children(".newsid").text();
            let like = $(this).children(".like").text();

            var that = $(this);
            $.get("/phpProject/?a=addLike",{id:newsid,like:like},function(data){

                if(like ==1){
// $(".uid:contains(id)").parent("avatar_img").remove();
                    console.log($(that.next()).find(".avatar_img>.uid:contains(uid)").text());
                    var dom = $(that.next()).find(".avatar_img .uid");
                    console.log(dom);
                    $.each(dom, function(key, val) {
                        console.log(val.innerHTML);
                        if(val.innerHTML == uid){
                            $(val).parent().remove();
                        }
                    });

                    $(dom).parent("avatar_img").remove();

// uidDom.parent("avatar_img").remove();
                    that.children(".like").text("0");
                    that.children(".like_text").text("點贊");
                }
                if(like == 0){
                    var html = "";
                    html += "<div class='avatar_img'><div class='uid'style='display: none;' >";
                    html += uid;
                    html += "</div><img style='width:30px;height:30px;' src='";
                    html += avatar;
                    html += "' ></div>";
                    that.next().append(html)
                    that.children(".like").text("1");
                    that.children(".like_text").text("取消點贊");
                }
            });
        });

複製代碼