超级简单的原生php+Mysql+jquery教程,适用人群(新手,大学生做毕设)---第4篇(详情页篇)

前端代码

css代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav-ul{
            display: flex;
            background-color: #2ecc71;
            position: relative;
        }
        .nav-ul li{
            list-style-type: none;
            margin: 20px 0 30px 100px;
        }

        img{
            width: 700px;
            height: 600px;
            margin-left: 30%;
            margin-top: 100px;
            border-radius: 100px;
        }
        button{
            width: 80%;
            margin-top: 30px;
            height: 50px;
            background-color: #00a0e9;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            margin-left: 10%;
        }
        /*    -----------*/
        .foot {
            width: 100%;
            min-height: 230px;
            color: #666;
            background: #222
        }

        .payment + .foot {
            border-top: 90px solid #f9f9f9
        }

        .foot .foot-box {
            width: 1200px;
            margin: auto;
            display: flex;
            padding: 40px 0 30px;
            background: #222
        }

        .foot .foot-box .company-msg {
            padding: 0 60px;
            border-right: 1px solid #333
        }

        .foot .foot-box .company-msg .img {
            display: block;
            margin: auto;
            width: 100px;
            height: 100px
        }

        .foot .foot-box .company-msg .name {
            color: #00a0e9;
            font-size: 14px;
            margin: 5px 0 10px;
            text-align: center
        }

        .foot .foot-box .company-msg .web {
            line-height: 20px
        }

        .foot .foot-box .right {
            display: flex;
            margin-left: 60px;
            padding-top: 5px
        }

        .foot .foot-box .right .item {
            width: 100px;
            margin-right: 80px
        }

        .foot .foot-box .right .item:last-child {
            margin-right: 0
        }


        .foot .foot-box .right .item.service .tit {
            font-size: 14px;
            margin-top: 3px
        }

        .foot .foot-box .right .item.service .con {
            margin-top: 10px;
            line-height: 30px
        }

        .foot .copyright {
            width: 100%;
            background: #1b1b1b;
            padding: 10px 0;
            text-align: center
        }
    </style>

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    
</head>
<body>
    <header>
        <!--        这里可以放一个商标什么的-->
        <div class="nav">
            <ul class="nav-ul">
                <li><a href="home.html" style="text-decoration:none;color: #0d0d0d">首页</a></li>
                <li><a href="" style="text-decoration:none;color: #0d0d0d">关于我们</a></li>
                <li><a href="My.html" style="text-decoration:none;color: #0d0d0d">个人中心</a></li>
                <li style="position: absolute; left: 80%;">
                    <a style="margin-left: 20px " onclick="exit()">退出登录</a>
                </li>
            </ul>
        </div>
    </header>
    <div id="getGoods">
<!--       从数据库里面拿数据-->

    </div>
    <div>
        <button onclick="addGoods()">加入购物车</button>
        <button onclick="buy()" style="margin-bottom: 100px">立即购买</button>
    </div>

    <footer>
        <div class="foot">
            <div class="foot-box">
                <div class="company-msg">
                    <img class="img" src="images/logo.jpg" alt="logo"/>
                    <div class="name">农产品+果鲜</div>
                </div>
                <div class="right">
                    <div class="item service">
                        <div class="tit">服务保障</div>
                        <div class="con">
                            <div class="text">正品保证</div>
                            <div class="text">7天无理由退</div>
                            <div class="text">24小时服务</div>
                        </div>
                    </div>
                    <div class="item service">
                        <div class="tit">支付方式</div>
                        <div class="con">
                            <div class="text">线上支付</div>
                            <div class="text">货到付款</div>
                            <div class="text">线下付款</div>
                        </div>
                    </div>
                    <div class="item service">
                        <div class="tit">会员服务</div>
                        <div class="con">
                            <div class="text">免费注册</div>
                            <div class="text">找回密码</div>
                            <div class="text">个人中心</div>
                        </div>
                    </div>
                    <div class="item service">
                        <div class="tit">物流服务</div>
                        <div class="con">
                            <div class="text">商品免邮</div>
                            <div class="text">快递配送</div>
                            <div class="text">EMS</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

js代码

<script src="js/jquery-3.6.1.min.js"></script>
<script>

    // //拿到上面传过来的id
    var params = location.search.slice(4)
    //拿到本地存储的
   user_id= localStorage.getItem('user_id');
    if(user_id===""){
        alert("账号未登录,跳转到登录页面")
        location.href="login.html"
    }
    $.post(
        'getDetail.php',
        {id:params },
        function(res){ // 假设后端返回true false的字符串
            // console.log(res);
            var obj = $.parseJSON(res);
            var html =
                     ` <img src="${obj.img}" alt="">
                         <div style="margin-top: 50px;margin-left: 50%">
                             <div style="font-size: 30px">${obj.title}</div>
                             <div style="color: red;font-size: 30px">${obj.price}</div>
                             <div style="margin-left: -50px;width: 200px">${obj.detail}</div>
                         </div>`;
        //     $.each(obj, function(index, value){
        //
        //     });
            $('#getGoods').html(html);
        }
    );

    function exit() {
        //退出时删除本地存储的id,并且条状
        // delete localStorage["user_id"]
        localStorage.setItem("user_id","")
        location.href="login.html"

    }
    function buy() {
        alert("购买成功")
    }

    //点击添加购物车时候发送的请求
    function addGoods() {
        //先发送请求
        //这里的id正常放在session这里就不放了
        $.post(
            'addMyGoodsId.php',
            {goods_id:params,user_id:user_id},
            function(res){
                // 假设后端返回true false的字符串
                console.log(res)
                if (res=='true'){
                    //请求成功时加入购物车并跳转
                    alert("添加成功")
                    location.href="My.html"
                }else{
                    alert("该商已添加,前往个人中心")
                    location.href="My.html"
                }
            }
        );
    }
</script>

后端代码

addMyGoodsId.php

注:判断是否添加到自己的购物车中,也就是my_detail中

<?php
    // 允许所有来源进行跨域请求
    //		header('Access-Control-Allow-Origin: *');
    //		// 允许的HTTP方法
    //		header('Access-Control-Allow-Methods: GET, POST, PUT');
    //		// 允许的头信息
    //		header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
    //1 连接数据库应用系统,并选择数据库
    $conn = mysqli_connect("localhost", "root", "root", "shop");

    $user_id = $_POST['user_id'];
    $goods_id = $_POST['goods_id'];

    $sql = "select * from my_detail where user_id='$user_id' and goods_id='$goods_id'";

    $rs = mysqli_query($conn, $sql);

    $data = mysqli_fetch_assoc($rs);

    if ($data=="") {
        $sql = "INSERT INTO my_detail(user_id, goods_id) VALUES ('$user_id', '$goods_id')";
        $rs2 = mysqli_query($conn, $sql);
        if ($rs2){
            echo "true";
        }else{
            echo "false";
        }
    }else{
        echo "false";
    }

getDetail.php

注:这里是获取商品详情信息的商品,拿到里面的数据,方便调用

<?php
        //1 连接数据库应用系统,并选择数据库
        $conn = mysqli_connect("localhost", "root", "root", "shop");
        ///
        //2 编写sql asc 升序 desc 降序
        $id = $_POST['id'];
        $sql = "select * from shop_detail where id = $id";
        ///
        //3 执行sql,并将结果保存
        $rs = mysqli_query($conn, $sql);
        //
        //4 将数据库返回的结果集转换为PHP能处理的二维关联数组
        $data = mysqli_fetch_assoc($rs);

//        将结果返回
        echo json_encode($data);
?>

总结:详情页到这里就已经结束了,这里的商品详情页主要有几个功能,添加到购物车,也就是后面的个人中心页,如果重复的情况下则无法添加(商品已经拥有)另一个则就是购买的按钮,后面可以通过这个按钮来实现购买,可以调用接口等。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值