django开发流程3（轮播图）

1.在models中创建一个模板

class Ads(models.Model):
    title = models.CharField(verbose_name="标题", max_length=30)
    image = models.ImageField(verbose_name="广告图", upload_to="ads")
    url = models.URLField(verbose_name="链接网址", default="http://www.baidu.com")

    def __str__(self):
        return self.title

    class Meta:
        verbose_name = "轮播图"
        verbose_name_plural = "轮播图"

2.安装一个图片处理模块 pip install  Pillow

3.生成迁移文件并迁移

python .\manage.py makemigrations

python .\manage.py migrate

4.修改媒体路径

首先在models中 upload_to="ads"

然后在settings中

当你运行添加轮播图时，照片会自动放入

5.预览图片

6.配置后台

7.配置轮播图

1.views里面添加Ads

2.在index.html中引入轮播图样式

{% extends 'base/base.html'  %}


{% block title %}
<title>首页</title>
{% endblock %}


{% block body %}
    {{ cs }}
<div class="row">
<div class="col-md-8 col-md-offset-2">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                  {% for ads in adss %}
                    {% if forloop.first %}
                  <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
                    {% else %}
                  <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"></li>
                    {% endif %}
                  {% endfor %}



              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                   {% for ads in adss %}
                    {% if forloop.first %}
                        <div class="item active">
                    {% else %}
                        <div class="item">
                    {% endif %}
                            {{ ads.image }}
                        <img src="/media/{{ ads.image }}" alt="...">
                  <div class="carousel-caption">
                      {{ ads.title }}
                  </div>
                </div>
                  {% endfor %}


              </div>

              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
    </div>
</div>

<div class="row">
        <div class="col-md-8 col-md-offset-2">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                  {% for c in cs %}
                    {% if forloop.first %}
                <li role="presentation" class="active"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>

                    {% else %}
                <li role="presentation"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>

                    {% endif %}
                  {% endfor %}

              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                   {% for c in cs %}
                    {% if forloop.first %}<div role="tabpanel" class="tab-pane active" id="tab{{ c.id }}">
                    {% else %}
                <div role="tabpanel" class="tab-pane" id="tab{{ c.id }}">
                    {% endif %}
                    <ul class="list-group">
                        {% for b in c.book_set.all %}
                      <li class="list-group-item">
                          <a href="/detail/{{ b.id }}">{{ b.title }}</a>
                      </li>
                        {% endfor %}
                    </ul>

                </div>
                    {% endfor %}



                </div>
              </div>
        </div>
    </div>
{% endblock %}