Django 04购物商城项目（选中状态、点击换页、建立数据表axf_wheel、首页图片滚动）

目前html继承与引用结构

html	继承
home.html	继承自base_main.html
cart.html	继承自base_main.html
market.html	继承自base_main.html
mine.html	继承自base_main.html
base_main.html	继承自base.html

html	引入css
base_main.html	引入main.css
home.html	引入home.css
cart.html	引入cart.css
market.html	引入market.css
mine.html	引入mine.css

1、（首页、商城、订单、我）页面选中状态显示

home.html

{% extends 'base_main.html' %}
{%  load static %}

{% block ext_css %}
    {{ block.super }}
     <link rel="stylesheet" href="{% static 'axf/main/css/home.css'%}">
{% endblock %}

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

home.css

footer .home span{
  background: url(/static/img/home_selected.png) no-repeat;
  background-size: 0.513889rem;
}
footer .home dd{
  color: orange;
}

目录结构：

路由：

视图：

访问：


其余三个：cart、market、mine与home同理

2、添加点击换页

<a href="{% url 'axf:home' %}" class="home">
#其余三个：cart、market、mine与home同理，在对应位置添加上{% url 'axf:名称' %}即可

3、开始建立models.py

建立模型

# App/models.py
from django.db import models

class MainWheel(models.Mdel):
    img = models.CharField(max_length=255)
    name = models.CharField(max_length=64)
    trackid = models.IntegerField(default=1)
    class Meta:
        db_table = 'axf_wheel'

生成并执行迁移文件：

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

刷新后会看见这张新建的表：

插入数据并保存：

查看数据：
views.py

4、首页滚动图片

home.html

在home.css新插入对swiper的样式:

/*底部图标和文字样式*/
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%;
}

新建home.js(注意路径)

访问：