vue+vuex+node+express+mysql实现收藏

首先实现进入详情页看是否已收藏
点击实现取消和确定收藏
查看我的收藏
总结
效果展示

业务逻辑

  • 首先实现进入详情页看是否已收藏
    vue+vuex+node+express+mysql实现收藏_第1张图片

步骤

  • 前端进入详情页,发送用户id和商品id

vue+vuex+node+express+mysql实现收藏_第2张图片

  • 后端查询对应用户和对应商品,返回数据给前端
    vue+vuex+node+express+mysql实现收藏_第3张图片
  • 前端拿到返回值判断是否收藏
  • 点击实现取消和确定收藏
    vue+vuex+node+express+mysql实现收藏_第4张图片

步骤

  • 1.前端发送用户id和商品id给后端
    vue+vuex+node+express+mysql实现收藏_第5张图片

  • 2.后端进行删除或者插入表操作
    vue+vuex+node+express+mysql实现收藏_第6张图片
    vue+vuex+node+express+mysql实现收藏_第7张图片

  • 3.前端拿到后端的值进行更改样式
    vue+vuex+node+express+mysql实现收藏_第8张图片

查看我的收藏

vue+vuex+node+express+mysql实现收藏_第9张图片

步骤
1.前端发用户id
在这里插入图片描述
2.后端返回商品id
vue+vuex+node+express+mysql实现收藏_第10张图片
3.用户发送商品id
vue+vuex+node+express+mysql实现收藏_第11张图片
4.前端把返回的值进行处理展示

总结

感觉交互挺有意思的,经过这几次,感觉更好的把握了前后端的交互了,继续加油

你可能感兴趣的:(node.js,vue.js,less)