您现在的位置是: 网站首页 >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
当前用户
未登录,点击 登录专题目录
- 【Vue+DRF生鲜电商】01.课程结构介绍,开发环境搭建
- 【Vue+DRF生鲜电商】02.设置users、goods、trade、user_operation数据库并导入原始数据
- 【Vue+DRF生鲜电商】03.Restful API基础
- 【Vue+DRF生鲜电商】04.Vue项目结构介绍
- 【Vue+DRF生鲜电商】05.商品列表序列化普通方法
- 【Vue+DRF生鲜电商】06.DRF环境配置,使用Serializer类序列化商品列表
- 【Vue+DRF生鲜电商】07.序列化商品分页功能
- 【Vue+DRF生鲜电商】08.ViewSets & Routers显示商品列表
- 【Vue+DRF生鲜电商】09.使用DRF的filter过滤商品列表
- 【Vue+DRF生鲜电商】10.商品分类层级获取,Vue跨域请求商品分类
- 【Vue+DRF生鲜电商】11.Vue展示左侧分类、面包屑、排序、商品列表、分页
- 【Vue+DRF生鲜电商】12.用户登录之DRF Token认证登录原理和使用方法
- 【Vue+DRF生鲜电商】13.JWT用户认证原理配置,Vue登录接口调试
- 【Vue+DRF生鲜电商】14.用户注册发送短信验证码、登录字段验证
- 【Vue+DRF生鲜电商】15.用户注册使用信号量实现密码加密
- 【Vue+DRF生鲜电商】16.Vue中注册、退出功能交互
- 【Vue+DRF生鲜电商】17.DRF实现商品详情及热卖商品接口,Vue中显示商品详情和热卖
- 【Vue+DRF生鲜电商】18.用户收藏、取消收藏商品接口实现
- 【Vue+DRF生鲜电商】19.用户添加、删除收藏权限处理,根据商品id显示收藏,在Vue中实现收藏功能
- 【Vue+DRF生鲜电商】20.使用DRF自动生成文档的功能
- 【Vue+DRF生鲜电商】21.用户中心个人资料的展示,并在Vue中实现个人资料更新
- 【Vue+DRF生鲜电商】22.个人中心显示用户收藏功能,对收藏进行删除
- 【Vue+DRF生鲜电商】23.个人中心用户留言功能
- 【Vue+DRF生鲜电商】24.用户收货地址功能
- 【Vue+DRF生鲜电商】25.商品添加购物车接口功能,Vue和购物车联调
- 【Vue+DRF生鲜电商】26.使用Pycharm远程代码调试服务器Django代码
- 【Vue+DRF生鲜电商】26.订单接口功能,Vue和订单接口联调
- 【Vue+DRF生鲜电商】27.支付宝公钥,私钥,沙箱环境配置
- 【Vue+DRF生鲜电商】28.支付宝支付接口类解读,支付逻辑编辑
- 【Vue+DRF生鲜电商】29.线上服务支付宝接口和Vue联调,Django代理Vue运行
- 【Vue+DRF生鲜电商】30.首页轮播图、新品展示功能
- 【Vue+DRF生鲜电商】31.首页商品按分类显示推荐功能
- 【Vue+DRF生鲜电商】32.商品操作后计数更改,热搜榜关键字功能实现
- 【Vue+DRF生鲜电商】33.数据缓存、接口访问限速功能
- 【Vue+DRF生鲜电商】34.第三方登录(微博、qq和微信)之微博登录登录测试
- 【Vue+DRF生鲜电商】35.使用social-app-django集成第三方登录