加载一类商品及单个商品详情，轮播图：

配置项：

INSTALLED_APPS = [
    'rest_framework',
    'goods',
]

MIDDLEWARE = [
    # 'django.middleware.csrf.CsrfViewMiddleware',

    'corsheaders.middleware.CorsMiddleware'
]
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'pro724',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': 'localhost',
        'PORT': 3306
    }
}
STATIC_URL = '/static/'
STATICFILES_DIRS = ('static',)

CORS_ORIGIN_WHITELIST = [
    'http://localhost:8080',
    'http://127.0.0.1:8080'
]

模型类：

from django.db import models


# Create your models here.

# 商品类别 例如：水果
class Category(models.Model):
    cat_name = models.CharField('类别名称', max_length=20)
    img = models.CharField('图片', max_length=200, default="")

    class Meta:
        verbose_name_plural = '类别名称'
        db_table = 'Category'

    def __str__(self):
        return self.cat_name

# 类别名下的各类水果
class GoodsImage(models.Model):
    name = models.CharField('商品名称', max_length=20)
    img = models.CharField('图片', max_length=200)
    price = models.DecimalField('价格', decimal_places=2, max_digits=8)
    cat = models.ForeignKey(Category, on_delete=models.CASCADE, verbose_name='商品类别')

    class Meta:
        verbose_name_plural = '商品名称'

        db_table = 'GoodsImage'

    def __str__(self):
        return self.name

# 某种水果的详情信息
class GoodData(models.Model):
    sku_name = models.CharField('商品名', max_length=50)
    price = models.DecimalField('商品价格', max_digits=9, decimal_places=2)
    selling_price = models.DecimalField('商品销售价格', max_digits=9, decimal_places=2)
    img = models.CharField('商品默认图片', max_length=200)
    title = models.CharField('商品标题', max_length=30, null=True)
    instruction = models.TextField('商品描述')
    count = models.IntegerField('商品销售数量', default=0)
    stock = models.IntegerField('商品库存数量', default=0)
    goodsimage = models.ForeignKey(GoodsImage, on_delete=models.CASCADE, verbose_name='水果名称')
    online = models.BooleanField('是否在售', default=True)

    class Meta:
        db_table = 'GoodData'
        verbose_name_plural = '商品信息'

    def __str__(self):
        return self.sku_name

# 详情页轮播图
class GoodsLbt(models.Model):
    img = models.CharField('图片', max_length=200)
    describe = models.CharField('描述', max_length=200)
    gooddata = models.ForeignKey(GoodData, on_delete=models.CASCADE, verbose_name='商品信息表')

    class Meta:
        db_table = 'GoodsLbt'
        verbose_name_plural = '轮播图'

    def __str__(self):
        return self.describe

序列化器：

from rest_framework import serializers

from goods.models import Category, GoodsImage, GoodData, GoodsLbt


class SerCategory(serializers.ModelSerializer):
    class Meta:
        model = Category
        fields = '__all__'


class SerGoodsImage(serializers.ModelSerializer):
    class Meta:
        model = GoodsImage
        fields = '__all__'


class SerGoodsData(serializers.ModelSerializer):
    name = serializers.SerializerMethodField(read_only=True)

    def get_name(self, obj):
        return obj.goodsimage.name

    class Meta:
        model = GoodData
        fields = '__all__'


class SerGoodsLbt(serializers.ModelSerializer):
    class Meta:
        model = GoodsLbt
        fields = '__all__'

视图功能：

from django.shortcuts import render

# Create your views here.
from rest_framework.response import Response
from rest_framework.views import APIView

from goods.models import Category, GoodData, GoodsImage
from goods.serializers import SerCategory, SerGoodsImage, SerGoodsData, SerGoodsLbt

# 获取类别名
class GetCategory(APIView):
    def get(self, request):
        catimg = Category.objects.filter(id=1)
        ser_img = SerCategory(catimg, many=True)
        return Response({
            'code': 200,
            'msg': '种类信息获取成功',
            'data': ser_img.data
        })

# 获取类别名下的水果
class GetGoodsImage(APIView):
    def get(self, request):
        cat_name = request.query_params.get('catName')
        try:
            # cat_data = Category.objects.filter(cat_name=cat_name).first()
            cat_data = Category.objects.get(cat_name=cat_name)
        except:
            return Response({
                'msg': '此类商品不存在',
                'code': 204
            })

        goods_data = cat_data.goodsimage_set.all()

        ser = SerGoodsImage(goods_data, many=True)

        return Response({
            'code': 200,
            'msg': '成功获取商品信息',
            'res': ser.data
        })

# 获取某种水果的详情信息
class GoodXq(APIView):
    def get(self, request):
        good_id = request.query_params.get('NameId')
        # try:
        good_cl = GoodsImage.objects.get(id=good_id)
        good_data = good_cl.gooddata_set.all()

        # 此方法功用的是GoodData表中的id 虽然效果一样，不过是添加数据库时的顺序巧合
        # good_data = GoodData.objects.filter(id=good_id).all()

        # except:
        #     return Response({
        #         'code': 204,
        #         'msg:': '商品不存在1'
        #     })
        ser = SerGoodsData(good_data, many=True)
        return Response(ser.data)

# 详情页轮播图
class GoodLbt(APIView):
    def get(self, request):
        good_id = request.query_params.get('NameId')
        good_cl = GoodData.objects.get(id=good_id)
        lbt = good_cl.goodslbt_set.all()
        ser_lbt = SerGoodsLbt(lbt, many=True)
        return Response({
            'code': 200,
            'msg': '轮播图加载成功',
            'goodlbt': ser_lbt.data
        })

路由：

from django.urls import path
from goods import views

urlpatterns = [
    path('images/', views.GetGoodsImage.as_view()),
    path('cimages/', views.GetCategory.as_view()),
    path('goodxq/', views.GoodXq.as_view()),
    path('goodlbt/', views.GoodLbt.as_view()),
]

前端vue：#############

水果分类页面：

# 跳转水果详情页