PHP+MySQL+Bootstrap 美食主题博客项目

这个项目是我大三上的PHP课期末项目大做业。 做业已经交了，如今放上来给你们参考学习！

一：技术栈介绍

主题：美食博客

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

后端：php mvc

数据库：mysql

本项目美食部分接口调用地址：美食接口文档

github源码：github.com/zoyoy1203/p…

网盘源码：pan.baidu.com/s/1CEHItobT…

提取码：jh36

二：实现功能总结

1. 登陆，注册，退出登陆，验证码。
2. API接口调用：菜谱推荐，菜谱分类，菜谱分类详情，菜谱详情。
3. 我的信息展现：头像，座右铭修改。
4. 我的动态发布展现。
5. 动态点赞评论功能。
6. 动态展现，搜索，关键字标红功能。
7. 用户列表显示，添加删除好友功能。
8. 错误信息提示功能。

三：整体结构

该项目采用简易版mvc的结构。

因为后来我都是直接在控制层里声明使用数据表结构数据，因此后面我把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("取消点赞");
                }
            });
        });

复制代码

6. 好友列表页面，更多好友页面（具备查看全部用户，添加删除好友功能）