前端代码
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;
}
/*上传头像的样式*/
.upload-button {
padding: 6px 25px;
background-color: #00bfff;
border-radius: 4px;
color: white;
cursor: pointer;
}
input {
display: none;
}
.myGoods{
display: flex;
}
.myGoods-img{
margin-top: 40px;
width: 400px;
height: 400px;
}
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>个人中心</a></li>
<li style="position: absolute; left: 80%;">
<a style="margin-left: 20px " onclick="exit()">退出登录</a>
</li>
</ul>
</div>
</header>
<div style="margin: 30px 0 30px 90%">
<img src="images/OIP-C%20(2).jpg" style="width: 100px;height: 100px;border-radius: 50px;display: block">
<label class="input-file-button upload-button" for="upload"> 更换头像 </label>
<input type="file" id="upload" />
</div>
<div>
<span style="font-size: 30px">我的购物车
<hr>
</span>
<div class="myGoods" id="myGoods">
<div class="goods-left" style="margin-left: 20%;margin-right: 10%;width: 400px;" id="goods-left">
<!-- 左边的数据-->
</div>
<div class="goods-right" id="goods-right" style="width: 400px;">
<!-- 右边的数据-->
</div>
</div>
<button onclick="buy()">立即购买</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>
if(localStorage.getItem('user_id')===""){
alert("账号未登录，跳转到登录页面")
location.href="login.html"
}
//浏览器加载自动执行
$.post(
'getMyGoods.php',{id:localStorage["user_id"]},
function(res){
var obj = $.parseJSON(res);
console.log(obj)
if (obj.length!==0){
var lfhtml = '';
var rghtml = '';
$.each(obj, function(index, value){
console.log(index%2)
if (index%2===0){
lfhtml+=`
<img src="${value.img}" class="myGoods-img">
<h2>${value.title}</h2>
<h4>${value.price}</h4>
<div>${value.detail}</div>
<button onclick="deletethis(${value.goods_id})">删除</button>
`
}else if (index%2===1){
rghtml+=`
<img src="${value.img}" class="myGoods-img">
<h2>${value.title}</h2>
<h4>${value.price}</h4>
<div>${value.detail}</div>
<button onclick="deletethis(${value.goods_id})">删除</button>
`
}
});
$('#goods-left').html(lfhtml);
$('#goods-right').html(rghtml);
}else {
var nohtml=`
<img src="images/nogoods.jpg" alt="没有加入购物车的商品" style="margin: 100px 30%">
`
$('#myGoods').html(nohtml)
}
}
);
// 定义一个函数来处理点击事件
function deletethis(id) {
$.post(
'deleteMyGood.php',
{id:id},
function (res) {
if (res==="true"){
alert("删除成功")
location.href="My.html"
}else {
alert("删除失败，请重试")
}
}
)
}
// 退出登录
function exit() {
//退出时删除本地存储的id，并且条状
// delete localStorage["user_id"]
localStorage.setItem("user_id","")
location.href="login.html"
}
function buy() {
alert("购买成功")
}
</script>后端代码
删除某一个商品的代码
<?php
//1 连接数据库应用系统，并选择数据库
$conn = mysqli_connect("localhost", "root", "root", "shop");
///
//2 编写sql asc 升序 desc 降序
$id = $_POST['id'];
$sql = "DELETE FROM my_detail WHERE goods_id = $id;";
///
//3 执行sql，并将结果保存
$rs = mysqli_query($conn, $sql);
//
if ($rs){
echo "true";
}else{
echo "false";
}
?>最开始进来的时候的商品列表
<?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");
///
$id=$_POST['id'];
$sql = "select * from user a,my_detail b,shop_detail c where b.user_id=a.id and b.goods_id=c.id and b.user_id=$id;";
///
//3 执行sql，并将结果保存
$rs = mysqli_query($conn, $sql);
//
$data = mysqli_fetch_all($rs, MYSQLI_ASSOC);
echo json_encode($data);
总结：这次的项目到这里就已经结束了，主要重要的是数据库的操作，还有如何转化为json发送到前端，而前端如何通过这个数据把他转化为对象格式，这里还需要理解jq中插入html代码和jq的便利->$.each
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
