ジャンゴ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、（自宅、ショップ、オーダー、I）選択された表示ページ

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;
}

ディレクトリ構造：

ルーティング：

ビュー：

アクセス：


残り3：カート、市場、鉱山や家庭共感

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（注パス）

訪問：