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