现在我们要添加一个四个小框框的图片展示。

首页的图片展示

建立数据

下面我们添加一个model:

class MainShop(Main):
    """
        insert into axf_shop(img,name,trackid)
    """
    class Meta:
        db_table = 'peiqi1_shop'


class MainShow(Main):
    """
        insert into axf_mainshow(trackid,name,img,
        categoryid,brandname,img1,childcid1,productid1,
        longname1,price1,marketprice1,img2,childcid2,
        productid2,longname2,price2,marketprice2,img3,
        childcid3,productid3,longname3,price3,marketprice3)
    """
    categoryid = models.IntegerField(default=1) # 商品分类
    brandname = models.CharField(max_length=64)  # 展示名字
    img1 = models.CharField(max_length=255)  # 图片1
    childcid1 = models.IntegerField(default=1)  # 子分类
    productid1 = models.IntegerField(default=1)  # 商品编码
    longname1 = models.CharField(max_length=255)
    price1 = models.FloatField(default=1)  # 价格
    marketprice1 = models.FloatField(default=0)  # 市场价
    img2 = models.CharField(max_length=255)  # 图片2
    childcid2 = models.IntegerField(default=1)  # 子分类
    productid2 = models.IntegerField(default=1)  # 商品编码
    longname2 = models.CharField(max_length=255)
    price2 = models.FloatField(default=1)  # 价格
    marketprice2 = models.FloatField(default=0)  # 市场价
    img3 = models.CharField(max_length=255)  # 图片3
    childcid3 = models.IntegerField(default=1)  # 子分类
    productid3 = models.IntegerField(default=1)  # 商品编码
    longname3 = models.CharField(max_length=255)
    price3 = models.FloatField(default=1)  # 价格
    marketprice3 = models.FloatField(default=0)  # 市场价

    class Meta:
        db_table = 'peiqi1_mainshow'

这里我们要注意，之前不管是轮播，还是导航的图片，在实际场景中这些应该都存储在同一张表中，并且通过一个属性来区分对应的图片所属的位置，比如1就是导航图片，2就是轮播图片，以此类推。

然后使用python manage.py migrate进行迁移。

测试前端注意事项

写前端时候改样式不会直接生效，都会有缓存，所以当测试时发现样式错误：
第一，清理缓存并刷新
第二，切换端口尝试
第三，最后才检查是不是自己的样式代码写错了。

插入数据一

views:

def home(request):
    main_wheels = MainWheel.objects.all()

    main_navs = MainNav.objects.all()

    main_mustbuys = MainMustBuy.objects.all()

    main_shops = MainShop.objects.all()

    main_shop0_1 = main_shops[0:1]
    # 将main_shops的数据切割开来，虽然也可以在模板中去切割数据，
    # 但是不推荐，我们尽量将逻辑处理放在这里，而渲染那部分只负责单纯的做循环显示即可。
    data = {
        'title': '首页',
        'main_wheels': main_wheels,
        'main_navs': main_navs,
        'main_must_buys': main_mustbuys,
        'main_shop0_1': main_shop0_1,
    }

home.css商店部分样式如下：

/*
    商店
 */
.shop_container {
    background: white;
}

.shop_container h2 img {
    width: 100%;
}

.shop_container fieldset {
    border: none;
    padding: 0;
}

.shop_container fieldset > a {
    display: inline-block;
    width: 49%;
}

.shop_container fieldset img {
    width: 100%;
}

.shop_container ul {
    display: flex;
}

.shop_container ul li {
    width: 2.5rem;
    text-align: center;
    font-size: 0.35rem;
}

.shop_container ul li img {
    width: 2.5rem;
}

.shop_container ol {
    display: flex;
    flex-wrap: wrap;
}

.shop_container ol li {
    list-style: none;
    width: 5rem;
}

.shop_container > ol a {
    display: block;
}

.shop_container ol a img {
    width: 100%;
}

home.html：

    {#  首页商店 #}
<div class="shop_container">
    <h2>
        <img src="{{ main_shop0_1.0.img }}" alt="{{ main_shop0_1.0.name }}">
        {# 这里我们用到了点语法，因为在从views中处理出来的结果是queryset需要取出其中的元素 #}
    </h2>
</div>

测试图如下：

我们可以看到正常显示。

插入数据二，三

接下来添加可以跳转网页的图片
views:

def home(request):
    main_wheels = MainWheel.objects.all()

    main_navs = MainNav.objects.all()

    main_mustbuys = MainMustBuy.objects.all()

    main_shops = MainShop.objects.all()

    # 将main_shops的数据切割开来，虽然也可以在模板中去切割数据，但是不推荐，我们尽量将逻辑处理放在这里，而渲染那部分只负责单纯的做循环显示即可。
    main_shop0_1 = main_shops[0:1]

    main_shop1_3 = main_shops[1:3]
    data = {
        'title': '首页',
        'main_wheels': main_wheels,
        'main_navs': main_navs,
        'main_must_buys': main_mustbuys,
        'main_shop0_1': main_shop0_1,
        'main_shop1_3': main_shop1_3,
    }
    return render(request, 'main/home.html', context=data)

插入数据四

views:

def home(request):
    main_wheels = MainWheel.objects.all()

    main_navs = MainNav.objects.all()

    main_mustbuys = MainMustBuy.objects.all()

    main_shops = MainShop.objects.all()

    # 将main_shops的数据切割开来，虽然也可以在模板中去切割数据，但是不推荐，我们尽量将逻辑处理放在这里，而渲染那部分只负责单纯的做循环显示即可。
    main_shop0_1 = main_shops[0:1]

    main_shop1_3 = main_shops[1:3]

    main_shop3_7 = main_shops[3:7]

    main_shop7_11 = main_shops[7:11]

    main_shows = MainShow.objects.all()
    data = {
        'title': '首页',
        'main_wheels': main_wheels,
        'main_navs': main_navs,
        'main_must_buys': main_mustbuys,
        'main_shop0_1': main_shop0_1,
        'main_shop1_3': main_shop1_3,
        'main_shop3_7': main_shop3_7,
        'main_shop7_11': main_shop7_11,
        'main_shows': main_shows,
    }
    return render(request, 'main/home.html', context=data)

home.html

        <ul>
            {% for main_shop in main_shop3_7 %}
                <li>
                    <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}"><br>
                    <span>{{ main_shop.name }}</span>
                </li>

            {% endfor %}

        </ul>

        {#  首页主显示  #}
        <ul>
            {% for main_show in main_shows %}
                <li class="mainInfo">
                    <section>
                        <h3>{{ main_show.name }}
                            <a href="#">更多&gt;</a>
                            <span></span>
                        </h3>

                        <div>
                            <a href="#">
                                <img src="{{ main_show.img }}" alt="main_show.name">
                            </a>
                        </div>

                        <ul>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img1 }}" alt="{{ main_show.longname1 }}">
                                    <p class="description">{{ main_show.longname1 }}</p>
                                    <span>{{ main_show.price1 }}</span>
                                    <s>{{ main_show.marketprice1 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img2 }}" alt="{{ main_show.longname2 }}">
                                    <p class="description">{{ main_show.longname2 }}</p>
                                    <span>{{ main_show.price2 }}</span>
                                    <s>{{ main_show.marketprice3 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img3 }}" alt="{{ main_show.longname3 }}">
                                    <p class="description">{{ main_show.longname3 }}</p>
                                    <span>{{ main_show.price3 }}</span>
                                    <s>{{ main_show.marketprice3 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                        </ul>
                    </section>
                </li>
            {% endfor %}

        </ul>

效果图如下：