路飞项目问题

路飞项目问题

轮播图表设计

# model.py
class Banner(BaseModel):
    name = models.CharField(max_length=32, verbose_name='图片名字')
    img = models.ImageField(upload_to='banner', verbose_name='图片', null=True)
    link = models.CharField(max_length=32, verbose_name='跳转链接')
    info = models.TextField(verbose_name='图片介绍')
    
    
 # ser.py
class BannerModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['name', 'img', 'link']

#views.py
from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from .models import Banner
from .ser import BannerModelSerializer
from django.conf import settings
from luffyapi.utils.logger import log

# Create your views here.


class BannerView(GenericViewSet, ListModelMixin):
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('display_order')[:settings.BANNER_COUNTER]
    serializer_class = BannerModelSerializer
"""
这里的图片展示个数我们要在settings配置，如果直接在views[0:3]在代码发布之后不好修改，所以直接给他设置一个值，在settings中设置，在view导入就可以了settings.BANNER_COUNTER



"""

前端缩略图问题和后端的缩略图问题

• 如果前端有缩略图的问题一般都是路径的问题，刚才出现了是我在删除多余的图片的时候，不小心把库里面的路径给删了，所以一般不要修改库，

• 同一的就是media接口没开放

  re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
  

流程：settings配置media --> urls开放接口 --> 浏览器测试能不能访问看到图片

media配置完一定要在浏览器里面测试一下能不能访问
127.0.0.1:8000/media/banner/banner1/

图片点击跳转

在后端就要设计好点击图片跳转的字段，前端用一个link包裹图片，就可以点击跳转

<el-carousel-item v-for="item in banner_list">
       
     <router-link :to="item.link">
         <img :src="item.img" :alt="item.name">
     </router-link>

</el-carousel-item>
//在后端就要设计好点击图片跳转的字段，前端用一个link包裹图片，就可以点击跳转   
    
    created() {
            //当banner组件一创建，就向后台发请求，拿回轮播图数据
            this.$axios.get(this.$settings.base_url + '/home/banner/').then(response => {
                console.log(response.data)
                this.banner_list=response.data
            }).catch(error => {
            })
        },
//发起get请求获取向后端获取图片