目前已使用Spingboot框架写了如下代码:html div class=box-container div class=box theach=good$GoodsList div class=image img thsrc=downloadfilepath=+$goodpic a
根据您提供的代码,可以通过以下步骤来实现您想要的功能:
- 在前端页面中,给按钮添加一个点击事件,调用
goods_like函数,并传递goodsId和memberId参数。
<button tpye="submit" onclick="goods_like(this, ${good.goods_id}, ${memberId})">
<i class="far fa-heart"></i>
</button>
- 修改
goods_like函数,通过AJAX请求将goodsId和memberId传递到后端。
function goods_like(button, goodsId, memberId) {
var likeIconElement = button.querySelector('i');
if (likeIconElement.classList.contains('far')) {
likeIconElement.classList.remove('far');
likeIconElement.classList.add('fas');
// 发送AJAX请求,调用insertLike接口
$.ajax({
url: '/likes/insert',
type: 'POST',
data: {
goodsId: goodsId,
memberId: memberId
},
success: function(response) {
console.log('收藏成功');
},
error: function(error) {
console.log('收藏失败');
}
});
} else {
likeIconElement.classList.remove('fas');
likeIconElement.classList.add('far');
// 发送AJAX请求,调用deleteLike接口
$.ajax({
url: '/likes/delete',
type: 'POST',
data: {
goodsId: goodsId,
memberId: memberId
},
success: function(response) {
console.log('取消收藏成功');
},
error: function(error) {
console.log('取消收藏失败');
}
});
}
}
- 修改
LikesService接口,添加根据goodsId和memberId查询收藏记录的方法。
public interface LikesService {
void insertLike(int goodsId, int memberId);
void deleteLike(int goodsId, int memberId);
Likes getLike(int goodsId, int memberId);
}
- 修改
LikesServiceImpl类,添加根据goodsId和memberId查询收藏记录的实现。
@Override
public Likes getLike(int goodsId, int memberId) {
return likesMapper.getLike(goodsId, memberId);
}
- 修改
LikesMapper接口,添加根据goodsId和memberId查询收藏记录的方法。
@Mapper
public interface LikesMapper {
@Insert("INSERT INTO likes (goods_id, member_id) VALUES (#{goodsId}, #{memberId})")
void insertLike(int goodsId, int memberId);
@Delete("DELETE FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")
void deleteLike(int goodsId, int memberId);
@Select("SELECT * FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")
Likes getLike(int goodsId, int memberId);
}
- 修改
LikesController类,添加查询收藏记录的接口。
@RestController
@RequestMapping("/likes")
public class LikesController {
@Autowired
private LikesService likesService;
@PostMapping("/insert")
public void insertLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
likesService.insertLike(goodsId, memberId);
}
@PostMapping("/delete")
public void deleteLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
likesService.deleteLike(goodsId, memberId);
}
@GetMapping("/get")
public Likes getLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
return likesService.getLike(goodsId, memberId);
}
}
通过以上步骤,您应该能够实现点击按钮后图标的变化,并且将数据加入和删除likes表中
原文地址: https://www.cveoy.top/t/topic/inrN 著作权归作者所有。请勿转载和采集!