django项目开发之home页面

本文详细介绍了使用Django开发项目中home页面的实现过程,包括插入轮播图、导航、必买和商店模块。通过创建模型、视图和模板,实现了数据的展示。同时,对商店模块的特殊布局进行了说明,最后提到了商品分类专栏的创建方法。
摘要由CSDN通过智能技术生成

1.home页面

1.1 插入轮播图

models.py
首页的轮播图,导航,必买,便利店具有相同的字段,所以我们创建一个父类以供它们继承。abstract=True表明父类不会在数据库中创建表。

from django.db import models

from App.views_constant import ORDER_STATUS_NOT_PAY

class Main(models.Model):
    img = models.CharField(max_length=255)
    name=models.CharField(max_length=64)
    trackid = models.IntegerField(default=1)

    class Meta:
        abstract=True

class MainWheel(Main):
    class Meta:
        db_table = 'sxw_wheel'

然后去views文件中去导入这个模型,渲染到home.html页面上
views.py

from App.models import MainWheel

def home(request):
    main_wheels=MainWheel.objects.all()
	data={
   
        'title':'首页',
        'main_wheels':main_wheels,
        }
    return render(request,'home.html',context=data)

home.html

{
   % block ext_js %}
{
   {
    block.super }}
<script type="text/javascript" src="{% static 'js/swiper.js' %}"></script>
<script type="text/javascript" src="{% static 'main/js/home.js' %}"></script>
{
   % endblock %}

{
   % block content %}
<div id="home">
    {
   # 首页顶部轮播 #}
    <section class="swiper-container" id="topSwiper">
        <div class="swiper-wrapper">
            {
   % for main_wheel in main_wheels %}
            <div class="swiper-slide">
                <a href="#"><img src="{
   {main_wheel.img}}" alt="{
   { main_wheel.name }}"/></a>
            </div>
            {
   % endfor %}
        </div>
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
    </section>

执行数据迁移

python manage.py makemigrations
python manage.py migrate

查看一下数据库,可以看到数据库中创建了一些表,其中就有刚刚创建的sxw_wheel。去数据库中插入一些轮播图图片的数据。这里的数据我是从天猫生鲜频道上找到的,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值