Python Web开发：产品中心

背景

首页”产品中心“子模块上显示4幅产品图片，

并按照浏览次数对产品进行排序。

实训步骤

编辑视图处理函数

homeApp/views.py:

from productsApp.models import Product

...

# 产品中心
    productList = Product.objects.all().order_by('-views')
    if(len(productList)>4):
        productList = productList[0:4]

编写前端代码

  <div class="row row-3">
    <!-- 产品中心 -->
    <div class="col-md-12 col-pro">

	      <span class="part1">
	        <a href="{% url 'productsApp:products' 'robot' %}">产品中心</a>
	      </span>
	      <span class="part1 en">
	          / Products
	      </span>
	      <a class="btn btn-default btn-xs more-btn" href="{% url 'productsApp:products' 'robot' %}">
	        + 更多
	      </a>
	      <div class="line1" style="margin-bottom:5px;">
	        <div class="line2 theme"></div>
	      </div>
	      <div class="col-md-12 col-pro">
	        <div id="Carousel" class="carousel slide" style="margin-bottom:30px">
	        <ol class="carousel-indicators" style="display:none;">
	            <li data-target="#Carousel" data-slide-to="0" class="active"></li>
	        </ol>
	        <div class="carousel-inner">
	          <div class="item active">
	            <div class="row">
	                {% for product in productList %}
	                <div class="col-md-3 pro-images">
	                  <a href="{% url 'productsApp:productDetail' product.id %}" class="thumbnail">
	                    {% for img in product.productImgs.all %}
	                    {% if forloop.first %}
	                    <img src="{{img.photo.url}}" alt="产品图片" class="img-responsive" onload="DrawImage(this)">
	                    {% endif %}
	                    {% endfor %}
	                  </a>
	                  <div class="carousel-caption nav-title">{{product.title}}</div>
	                </div>
	                {% endfor %}
	              </div>
	            </div>
	          </div>
	        </div>
	        
    </div>
  </div>

• 注意：一款产品可能包含多幅图像，为了快速获取图片只选取每款产品的第一张图像。

最后，在home.css中添加样式设置：

/* 产品中心 */
.pro-images{
	background-color:#f6f6f6; 
 }
 .thumbnail{
	 margin-bottom:0px;
 }
 .col-pro{
	 background-color:#F6F6F6;
	 padding-top:15px;
 }