如何通过点击商品详情下方的加入购物车按钮，将商品信息加入到个人购物车下？如何阻止重复加入同一个商品到购物车？如何在删除购物车中的商品时，重点提示？后端的数据库如何设计来保证加入的商品在当前用户下？
前言
这里的页面暂时未进行优化、只是大概演示这个功能的流程实现。页面自己随便搞
实现效果
商品加入购物车 -删除购物车中的商品(前后端分离)
1、商品详情页面
2、购物车页面
3、禁止重复加入同一个商品
4、删除商品信息重点提示
5、删除后效果
6、前端部分源码
这里可以通过点击商品图片实现图片放大效果
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" v-if="false" label="编号" width="100">
</el-table-column>
<el-table-column prop="name" label="商品" width="180">
<template width="100" slot-scope="scope">
<el-popover placement="top-start" title="" trigger="click">
<a
:href="scope.row.fileName"
target="_blank"
title="查看最大化图片"
>
<img
:src="scope.row.fileName"
style="width: 300px; height: 300px"
/>
</a>
<img
slot="reference"
:src="scope.row.fileName"
style="width: 100px; height: 100px; cursor: pointer"
/>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" width="180">
</el-table-column>
<el-table-column prop="count" label="数量" width="180">
</el-table-column>
<el-table-column prop="discount" label="折扣" width="180">
</el-table-column>
<el-table-column prop="totalPrice" label="小计"> </el-table-column>
<el-table-column prop="description" label="描述"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="success" size="mini">购买</el-button>
<el-popconfirm
confirm-button-text="好的"
cancel-button-text="不用了"
icon="el-icon-info"
icon-color="red"
title="确定删除该吗？"
@confirm="handleDelete(scope.$index, scope.row)"
>
<el-button type="danger" size="mini" slot="reference"
>删除</el-button
>
</el-popconfirm>
<el-button type="warning" size="mini">修改</el-button>
</template>
</el-table-column>
</el-table>
7、后端部分源码
@RequestMapping(value = "/delete",method = RequestMethod.DELETE)
public Result deleteCartShopOneInfo(@RequestParam Map<String,Object> maps){
Long userId = Long.parseLong(maps.get("userId").toString());
Long goodsId = Long.parseLong(maps.get("goodsId").toString()) ;
HashMap<String, Object> map = new HashMap<>();
map.put("userId",userId);
map.put("goodsId",goodsId);
int rs = cartShopInfoMapper.deleteByMap(map);
if(rs > 0){
return Result.ok();
}else{
return Result.error().data("errMessage","删除失败");
}
}
8、后语
很容易的业务逻辑实现，如有需要、可以在下方加我联系交流技术
