您现在的位置是: 网站首页 >Django >Vue+Django REST framework前后端分离生鲜电商 Django

【Vue+DRF生鲜电商】22.个人中心显示用户收藏功能,对收藏进行删除

admin2019年5月31日 13:37 Django | Vue 1260人已围观

Vue+Django REST framework前后端分离生鲜电商简介 Vue+Django REST framework 打造前后端分离的生鲜电商项目(慕课网视频)。 Github地址:https://github.com/xyliurui/DjangoOnlineFreshSupermarket ; Django版本:2.2、djangorestframework:3.9.2。 前端Vue模板可以直接联系我拿。

## 用户收藏显示功能 在前面已经写好了用户收藏和取消收藏商品的功能,访问 http://127.0.0.1:8000/userfavs/ 即可看到,但收藏的商品只显示了商品的id ![BLOG_20190531_133850_49](/media/blog/images/2019/05/BLOG_20190531_133850_49.png "博客图集BLOG_20190531_133850_49.png") ### 序列化收藏的商品UserFavListSerializer 没有显示商品的具体信息,首先还得做序列化。直接使用商品已做好的序列化类,也可以自己写,只显示所需要的信息。 ```python # apps/user_operation/serializers.py from goods.serializers import GoodsSerializer class UserFavListSerializer(serializers.ModelSerializer): goods = GoodsSerializer() class Meta: model = UserFav fields = ['goods', 'id'] ``` 由于收藏商品和显示用户已收藏的商品使用了不同的序列化类,则也需要用到动态Serializer ### 动态使用序列化类UserFavViewSet 当显示用户的收藏时,使用上面的序列化类 ```python # apps/user_operation/views.py class UserFavViewSet(mixins.CreateModelMixin, mixins.DestroyModelMixin, mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet): """ create: 用户收藏商品 destroy: 取消收藏商品 list: 显示收藏商品列表 retrieve: 根据商品id显示收藏详情 """ queryset = UserFav.objects.all() # serializer_class = UserFavSerializer def get_serializer_class(self): """ 不同的action使用不同的序列化 :return: """ if self.action == 'list': return UserFavListSerializer # 显示用户收藏列表序列化 else: return UserFavSerializer permission_classes = (IsAuthenticated, IsOwnerOrReadOnly) authentication_classes = (JWTAuthentication, SessionAuthentication) # 配置登录认证:支持JWT认证和DRF基本认证 lookup_field = 'goods_id' def get_queryset(self): # 过滤当前用户的收藏记录 return self.queryset.filter(user=self.request.user) ``` 现在刷新 http://127.0.0.1:8000/userfavs/ 即可显示用户收藏商品的列表 ![BLOG_20190531_133840_81](/media/blog/images/2019/05/BLOG_20190531_133840_81.png "博客图集BLOG_20190531_133840_81.png") 同时商品的详情也被序列化。 ### Vue中显示收藏列表 当组件创建时调用`getCollection()` ```JavaScript // src/views/member/collection.vue getCollection() { //获取收藏列表 getAllFavs().then((response) => { this.collections = response.data; }).catch(function (error) { console.log(error); }); }, ``` 之后调用`getAllFavs`函数,请求接口获取用户的所有收藏 ```JavaScript // src/api/api.js //显示收藏列表 export const getAllFavs = () => { return axios.get(`${local_host}/userfavs/`) }; ``` 获取到数据之后,赋值给`collections`,之后遍历显示到html中 ```html <!-- src\views\member\collection.vue --> <tr v-for="(item,index) in collections"> <td bgcolor="#ffffff"> <router-link :to="'/app/home/productDetail/'+item.goods.id" class="f6" target="_blank">{{item.goods.name}}</router-link> </td> <td bgcolor="#ffffff">本店价<span class="goods-price">¥{{item.goods.shop_price}}元</span> </td> <td align="center" bgcolor="#ffffff"> <a class="f6" @click="deletePro(index, item.goods.id)">删除</a> </td> </tr> ``` 访问 http://127.0.0.1:8080/#/app/home/member/collection 可以查看用户收藏的商品列表 ![BLOG_20190531_133831_84](/media/blog/images/2019/05/BLOG_20190531_133831_84.png "博客图集BLOG_20190531_133831_84.png") ### 从收藏夹删除商品 当用户点击收藏商品后面的删除时,传递的参数为`item.goods.id`即商品的`id`,因为在后端 apps/user_operation/views.py 的`UserFavViewSet()`定义了有个属性叫`lookup_field = 'goods_id'`,表示搜索的字段为`goods`的`id` ```html <!-- src/views/member/collection.vue --> <td align="center" bgcolor="#ffffff"> <a class="f6" @click="deletePro(index, item.goods.id)">删除</a> </td> ``` 会调用删除商品的函数`deletePro()` ```JavaScript // src/views/member/collection.vue deletePro(index, id) { //删除收藏商品 // alert('您确定要从收藏夹中删除选定的商品吗?'); let msg = "您确定要从收藏夹中删除选定的商品吗?\n\n请确认!"; if (confirm(msg) === true) { delFav(id).then((response) => { this.collections.splice(index, 1); alert('已删除商品'); }).catch(function (error) { console.log(error); }); return true; } else { return false; } } ``` ![BLOG_20190531_133824_19](/media/blog/images/2019/05/BLOG_20190531_133824_19.png "博客图集BLOG_20190531_133824_19.png") 如果点击确认,会请求删除商品的接口,也就是取消商品收藏 ```JavaScript // src/api/api.js //取消收藏 export const delFav = goodsId => { return axios.delete(`${local_host}/userfavs/` + goodsId + '/') }; ```

很赞哦! (2)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行2285天
  • 系统信息:Linux
  • 后台程序:Python: 3.8.10
  • 网站框架:Django: 3.2.6
  • 文章统计:257 篇
  • 文章评论:63 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 公众号:微信扫描二维码,关注我们
  • QQ群:QQ加群,下载网站的学习源码
返回
顶部
标题 换行 登录
网站