Django 05购物商城项目（建立数据表axf_nav、轮播条、建立数据表axf_mustbuy、程序调试技巧）

最新推荐文章于 2025-07-30 09:16:55 发布

原创最新推荐文章于 2025-07-30 09:16:55 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

@BeanInJ

python系列专栏收录该内容

103 篇文章

订阅专栏

本文详细介绍如何在Django项目中创建数据模型、执行数据库迁移、前端CSS样式设置及使用Swiper进行轮播图展示的方法。同时，介绍了如何安装和配置Django调试工具，以及利用thefuck插件提升Python开发效率。

1、建立数据表axf_nav

App/models.py

from django.db import models


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 = 'axf_wheel'


class MainNav(Main):
    class Meta:
        db_table = 'axf_nav'

迁移:

#生成迁移文件：
python manage.py makemigrations
#执行迁移文件：
python manage.py migrate

插入数据:
在这里插入图片描述

展示:

在这里插入图片描述
css

/*底部图标和文字样式*/
footer .home span {
    background: url(/static/img/home_selected.png) no-repeat;
    background-size: 0.513889rem;
}

footer .home dd {
    color: orange;
}

/*顶部轮播*/
#home {
    padding: 1.5rem 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    padding-bottom: 3rem;
    position: fixed;
}

#topSwiper {
    height: 3.95rem;
    width: 10rem;
    overflow: hidden;
}

#topSwiper div a {
    display: inline-block;
    height: 3.95rem;
    width: 10rem;
}

#topSwiper img {
    height: 100%;
    width: 100%;
}

/*顶部导航*/
.topMenu {
    padding-bottom: 0.26rem;

}

.topMenu nav {
    margin: 0.35rem 0 0.26rem;
    background: white;
}

.topMenu nav ul {
    display: flex;
}

.topMenu nav li {
    width: 2.5rem;
    text-align: center;
    font-size: 0.35rem;

}

.topMenu nav li img {
    width: 2.5rem;
}

#swiperMenu {
    width: 100%;
}

视图:
在这里插入图片描述
访问:

2、建立数据表axf_mustbuy

模板:
在这里插入图片描述
迁移:

#生成迁移文件：
python manage.py makemigrations
#执行迁移文件：
python manage.py migrate

插入数据:
在这里插入图片描述
视图:

前端显示,home.html:

home.css添加这一段


/*首页必购*/
#swiperMenu {
    width: 100%;
}

#swiperMenu li img {
    width: 100%;
}

home.js(有添加有改动,下面是完整代码):

$(function () {
    ISpr();
ISprMenu();
})

function ISpr() {
    var swiper = new Swiper("#topSwiper", {
            loop: true,
            autoplay: 3000,
            pagination: '.swiper-pagination'
        }
    );
}
function ISprMenu() {
    var swiper = new Swiper("#swiperMenu", {
           slidesPerView: 3,
        }
    );
}

访问:
在这里插入图片描述

3、程序调试技巧

在这里插入图片描述
安装django调试工具

pip install django-debug-toolbar

安装完成之后

在setting里注册
在这里插入图片描述

'debug_toolbar',

'debug_toolbar.middleware.DebugToolbarMiddleware'

INTERNAL_IPS = ('127.0.0.1','localhost')

urls.py 在这里插入图片描述

from AXF01 import settings
if settings.DEBUG:
    import debug_toolbar

    urlpatterns = [
                      path('__debug__/', include(debug_toolbar.urls)),
                  ] + urlpatterns

访问:
在这里插入图片描述

python里一个有趣的插件:thefuck

参考视频:https://www.bilibili.com/video/av69060979?p=271
23分20秒开始