Django 04 shopping mall project (selected, click on the feed, set up a data table axf_wheel, Home picture scroll)

Currently html inheritance and reference structure

html	inherit
home.html	Inherited from base_main.html
cart.html	Inherited from base_main.html
market.html	Inherited from base_main.html
mine.html	Inherited from base_main.html
base_main.html	Inherited from base.html

html	The introduction of css
base_main.html	Introduced main.css
home.html	Introduced home.css
cart.html	Introduced cart.css
market.html	Introduced market.css
mine.html	Introduced mine.css

1, (home, shop, order, I) selected display page

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

The directory structure:

Routing:

View:

Access:


The remaining three: cart, market, mine and home empathy

2. Click Add Feed

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

3, began to build models.py

Modeling

# 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'

Generate and perform the migration file:

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

After the refresh will see this new table:

insert data and save:

View data:
views.py

4 Home picture scroll

home.html

new insert styles swiper in home.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%;
}

New home.js (Note path)

visit: