JS&PHP&mysql/不用cookie实现用户收藏功能的小demo

来源：互联网发布：张子萱淘宝店月收入编辑：程序博客网时间：2024/06/05 10:01

//购物车vs店铺收藏

回想一下在逛淘宝的时候，我们经常会用到购物车，添加/删除/清空/支付什么的~再回忆一下淘宝的另一项功能：收藏店铺，大家看到喜欢的店铺就会去点击“收藏”，这个操作也是想必大家也是很熟悉了吧！我想问问大家，“购物车”与“收藏店铺”究竟有什么需求上的不同？嗯，对于购物车而言，如果我退出登录清除cookie，那里面的东西基本就烟消云散了，基于cookie的数据都是这样的，谁让没有写进数据库呢；而对于店铺收藏功能而言，我们更希望退出登录清除cookie之后再登陆，那些个收藏的店铺还是在的，也就是说可以与cookie毫无关联，在收藏的一刹那就统统被塞进了数据库里。今天向大家展示一个自己的写的超超超超超简易小demo，jq+php+mysql，没有任何样式，重在思路，看官们轻拍~

//需求分析

每个文章标题都有个收藏按钮，我点了收藏就把按钮改为已收藏，如果再点就弹框“您已收藏”，同时下面列表会即时添加我收藏的文章标题。本demo的重点是存储功能，我关闭页面后无论多久再次访问这个页面，都会保存并显示我所收藏的文章以及按钮的状态

//图示

注：本demo用的是xampp自带的apache和mysql。

网页部分：

mysql数据库（极简）

（该demo的数据库中真正有用的只有user_favorite字段)

//代码展示

目录结构：

php文件与html文件位于同一目录下，favorite.html通过http://localhost:9999/demo/favorite.html访问

#后端代码

favor_str.php：负责在favorite.html每次加载页面的时候传输实时的数据库里user_favorite里的字段；

<?php    // 创建连接    error_reporting(0);    $servername = "localhost";    $user = "root";    $password = "";    $dbname = 'demo';    $conn = new mysqli($servername, $user, $password,$dbname);    mysqli_query($conn,'set names utf8');    // 检测连接    if ($conn->connect_error) {        die("连接失败: " . $conn->connect_error);    }     //查询并更改相应的user_favorite    $sql = "SELECT user_favorite FROM my_favorite";    $result = mysqli_query($conn,$sql);    $row = mysqli_fetch_assoc($result);    $str = $row['user_favorite'];    echo $str;//向前端输出内容    //与数据库断开连接    $conn->close();     ?>

favorite.php: 负责回应favorite.html里收藏按钮点击事件的ajax请求，返回的是已经更新好的了user_favorite字段内容;

<?php    // 创建连接    error_reporting(0);    $servername = "localhost";    $user = "root";    $password = "";    $dbname = 'demo';    $conn = new mysqli($servername, $user, $password,$dbname);    mysqli_query($conn,'set names utf8');    // 检测连接    if ($conn->connect_error) {        die("连接失败: " . $conn->connect_error);    }     //获取前端传来的数据    $title = $_POST['title'];    //根据username查询并更改相应的user_favorite    $sql = "SELECT user_favorite FROM my_favorite";    $result = mysqli_query($conn,$sql);    $row = mysqli_fetch_assoc($result);    $temp = $user_favorite = $row['user_favorite'];    //更新添加user_favorite的内容，并存储覆盖    $temp .= $title . ';';    $sql = "UPDATE my_favorite SET user_favorite='$temp'";    $result = mysqli_query($conn,$sql);         echo $temp;//向前端输出内容    //与数据库断开连接    $conn->close();     ?>

#前端代码：

html结构

<body>    <div id="article">        <a href="javasript:;">我是文章1</a><input type="button" value="收藏"><br>        <a href="javasript:;">我是文章2</a><input type="button" value="收藏"><br>        <a href="javasript:;">我是文章3</a><input type="button" value="收藏"><br>        <a href="javasript:;">我是文章4</a><input type="button" value="收藏"><br>        <a href="javasript:;">我是文章5</a><input type="button" value="收藏"><br>    </div>    <div id="favorite">        <h1>您收藏的文章有：</h1>        <ul id="list"></ul>    </div></body>

js代码

<script>    $(function (){        //当页面刚加载的时候，我就要发送一个ajax请求，向后台询问“我收藏了哪些文章”        $.post('./favor_str.php',null, function (res){            //根据返回的字符串，进行收藏div的渲染            let titles = $('#article').children('a');            let arr = res.split(';');            arr.pop();//因为用数据库用分号隔开的，所以最后会多个分号，转换的数组最后一项是空的，要把最后的空字符串去掉            let inner = '';            for(let i = 0; i < arr.length; i++){                inner += '<li>'+arr[i]+'</li>';            }            $('#list').html(inner);            //循环所有的按钮            for(let i = 0; i < titles.length; i++){                let $titleText = $(titles[i]).text();                let $btn = $(titles[i]).next();                //如果我所点的这个按钮对应的文章标题在ajax收到的结果字符串里是存在的，就显示“已收藏”                if(res.indexOf($titleText)!=-1){                    $btn.val('已收藏');                }                else{//否则显示“收藏”                    $btn.val('收藏');                }                //为每个按钮绑定点击事件                                $btn.click(function (){                    if($btn.val()=='已收藏'){                        //如果已收藏，则弹框并终止点击事件函数                        alert('你已收藏过！')                        return;                                             }                    //走到这里说明没有收藏过，那我就要发送ajax请求，在user_favorite字段里存储title                    $.post('./favorite.php',{                        'title': $titleText                     },function (res){                        //根据返回的结果，即时地渲染进收藏的div里，一个个append                        //注：这里的res和上面的res是两个ajax请求的结果，是完全不相同的                        let arr = res.split(';');                        arr.pop();//把最后的空字符串去掉                        $btn.val('已收藏');                        let $newLi = $('<li>');                        $newLi.html(arr[arr.length - 1]);                        $('#list').append($newLi);                                            })                          })            }                    })    })</script>

完工，这样一个最最基本的收藏功能就完成了，任你怎么刷新页面怎么关机，收藏过的文章就安安静静躺在那巍然不动！

阅读全文

0 0