抱歉,你查看的文章不存在

12- vue django restful framework 打造生鲜超市 -商品详情页,商品收藏

Vue+Django REST framework实战

搭建一个前后端分离的生鲜超市网站

商品详情页,商品收藏

viewsets实现商品详情页接口

左侧商品轮播图 & 商品详情 描述,运费,库存量。

热门商品放在另外一个url

只需要在继承的里面添加这个mixins.RetrieveModelMixin就可以了。

实现代码:

class GoodsListViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin,viewsets.GenericViewSet):

查看Serializer,将其中的外键指向的Goodsimage

如何执行外键型的字段Serializer呢?答案: 进行嵌套的使用。

实现代码:

class GoodsImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = GoodsImage
        fields = ("image", )

如上面代码新建一个Serializer。然后下面进行字段的嵌套

实现代码:

GoodsSerializer中

    images = GoodsImageSerializer(many=True)

这里的值叫什么名称与我们在models中自定义的related_name有关。 一个goods对应的GoodsImage是有多条的。一定要添加many=true

将商品详情页完成后就可以来分析我们vue的源码。组件是productDetail productDetail.vue

    created () {
        this.productId = this.$route.params.productId;
        var productId = this.productId
        if(cookie.getCookie('token')){
          getFav(productId).then((response)=> {
            this.hasFav = true
          }).catch(function (error) {
            console.log(error);
          });
        }
        this.getDetails();
    },

列表页跳转到某一个详情页的时候,vue router里面有一个productId 会通过router里面的productdetail传递进来

src/router/index.js实现代码:

 {
            path: 'productDetail/:productId',
            name: 'productDetail',
            component: productDetail,
            meta: {
              title: '商品详情',
              need_log: false
            }

src/api/api.js中商品详情接口配置,改为本地的api接口localhost

//商品详情
export const getGoodsDetail = goodId => { return axios.get(`${host}/goods/${goodId}`+'/') }

热卖商品接口实现

商品goods中有一个字段是是否热销。获取热销产品,filter中加一个ishot

goods/filters.py:

实现代码:

        fields = ['pricemin', 'pricemax', 'name', 'is_hot']

在后台管理系统之中添加三条热卖数据为true

mark

可以看到这其中的HotSales

src/views/productDetail/hotSales.vue:

它在create的时候调用了getHotSales

            getHotSales() { //请求热卖商品
              getGoods({
                is_hot:true
              })
                .then((response)=> {
                    console.log(response.data)
                    this.hotProduct = response.data.results;

                }).catch(function (error) {
                    console.log(error);
                });
            }

实际上还是调用了getGoods接口,只是设置了参数is_hot为true而已 返回的json值会被放入response的data里面,而我们的数据放在result里面

返回的json格式:

{
    "count": 3,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 102,
            "category": {
                "id": 55,
                "name": "方便速食",
                "code": "方便速食",
                "desc": "",
                "category_type": 2,
                "is_tab": false,
                "add_time": "2018-02-14T03:45:05.659267",
                "parent_category": 40
            },
        }
    }

mark

将数据进行过滤之后,vue进行v-for的遍历,遍历之后使用router-link做一个跳转

然后将值进行填充。

用户收藏接口实现

这属于用户操作的功能,所以我们将操作写在user_operation中

收藏的接口既要继承viewset,添加收藏create,删除收藏destroy

实现代码:

class UserFavViewset(viewsets.GenericViewSet, mixins.CreateModelMixin, mixins.DestroyModelMixin):

新建一个配套的Serializers.py

实现代码:

# encoding: utf-8
__author__ = 'mtianyan'
__date__ = '2018/3/10 0010 09:54'
from rest_framework import serializers
from user_operation.models import UserFav


class UserFavSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserFav
        fields = ("user", "goods")

此时在views中继续进行配置queryset等

class UserFavViewset(viewsets.GenericViewSet, mixins.CreateModelMixin, mixins.DestroyModelMixin):
    """
    用户收藏功能
    """
    queryset = UserFav.objects.all()
    serializer_class = UserFavSerializer

配置相应的url等在urls.py中

# 配置用户收藏的url
router.register(r'userfavs', UserFavViewset, base_name="userfavs")

mark

当前的实现是我们可以选择用户,选择商品进行post,但是实际的逻辑应该是获取到当前的用户,我们只需要post商品过去就可以了。

我们希望我们的UserFavSerializer获取的是当前登录用户的user。

如何让Serializer自动帮我们填充当前的user?

http://www.django-rest-framework.org/api-guide/validators/#currentuserdefault

官方文档中

REST框架包含一些在这种情况下可能有用的默认值。

CurrentUserDefault 可用于表示当前用户的默认类。为了使用它,在实例化序列化程序时,'request'必须作为上下文字典的一部分提供。

owner = serializers.HiddenField(
    default=serializers.CurrentUserDefault()
)

为我们的UserFavSerializer添加代码:

    user = serializers.HiddenField(
        default=serializers.CurrentUserDefault()
    )

如果对于一个Serializer我们想为它添加删除的功能,就要将该条记录的id也返回回来 取消收藏就会变得容易。

添加商品收藏列表功能

实现代码:

class UserFavViewset(viewsets.GenericViewSet, mixins.ListModelMixin, mixins.CreateModelMixin, mixins.DestroyModelMixin):

目前这样的配置只会返回我们商品的id以及这条收藏关系记录的id

删除功能实现

restful api 删除时要用到的http里面的delete方法。

url格式为

userfavs/id

删除哪一个收藏记录。id为收藏关系对应的id。

mark

204代表删除成功,2开头的一般都是操作成功的。

用户反复的对一件商品进行收藏,理论上不应该生成两条收藏关系的记录。

这时候需要django model中的设置参数。

        # 多个字段作为一个联合唯一索引
        unique_together = ("user", "goods")

如果我们重复了,数据库会给我们抛出异常来

清空原有的表数据,进行makemigration 和 migrate

mark

可以通过navicat查看到我们的唯一索引

{
    "non_field_errors": [
        "字段 user, goods 必须能构成唯一集合。"
    ]
}

实际上validator中也为我们提供了UniqueTogetherValidator

在Serializer的meta信息中你那个自己定义

        # 使用validate方式实现唯一联合
        validators = [
            UniqueTogetherValidator(
                queryset=UserFav.objects.all(),
                fields=('user', 'goods'),
                message="已经收藏"
            )
        ]

我们的modelSerializer和modelform一样与model紧密联系,所以model中的设置它会读取并配置。

这个validate是写在meta信息中的,是因为它不是作用于某一个字段之上了。

400错误,返回的错误消息存放在non_field_errors中。而具体的某一个字段出错,会指明字段的名称。

整体错误信息。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

有趣的Python

0 篇文章106 人订阅

相关文章

来自专栏芋道源码1024

短链接原理分析

顾名思义,短链接即是长度较短的网址。通过短链接技术,我们可以将长度较长的链接压缩成较短的链接。并通过跳转的方式,将用户请求由短链接重定向到长链接上去。短链接主要...

1603
来自专栏谭广健的专栏

【小程序-云开发】手把手教你使用云开发(数据库开发)

继上一次程序员哥哥简单开发了一个照片储存小程序后,感觉还是有些小小缺陷,就是没办法对上传照片进行文字描述。因为主要都是文字,如果将文字描述再保...

4.8K1
来自专栏Web项目聚集地

Javascript中的异步

822
来自专栏计算机编程

win环境下 Bazel 离线安装教程

在这里要说明一下,博主辛辛苦苦寻找解决途径,发现网上大多数博客根本没有顾及到这类离线下载配置和相关条件,反复倒腾过后总结里以下步骤:

6182
来自专栏前端开发

小程序的全栈开发新时代

小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发(Tencen...

1954
来自专栏北京马哥教育

高可用集群基本概念与heartbeat文本配置接口

一、高可用集群基本概念: 什么是高可用集群: 所谓高可用集群,就是在出现故障时,可以把业务自动转移到其他主机上并让服务正常运行的集群构架 > 高...

3677
来自专栏智能大石头

NewLife.Net——构建可靠的网络服务

1593
来自专栏微信公众号:Java团长

Java多线程的应用场景和应用目的举例

多线程用于堆积处理,就像一个大土堆,一个推土机很慢,那么10个推土机一起来处理,当然速度就快了,不过由于位置的限制,如果20个推土机,那么推土机之间会产生相互的...

1711
来自专栏Web 开发

PushPlugin-为iOS的Hybird App提供APNS服务

APNS是iOS生态下面的推送机制。其原理是APP启动的时候,向苹果注册,并获得一个唯一token,然后不论app是否继续在运行,都可以通过调用苹果的APNS服...

1090
来自专栏Linyb极客之路

杂谈Java高并发

对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题,但话又说回来了,既然逃避不掉,那...

5235

扫码关注云+社区

领取腾讯云代金券