Python Web开发：新闻动态

背景

“新闻动态”分为左右两个部分，

左边是展报，右边是新闻列表

展报部分以图片形式吸引读者

列表部分 显示“新闻动态”模块的列表信息

实训步骤

修改数据模型

为了能够实现展报功能，

需要为“新闻”模型添加一个额外的图片字段用于存储海报。

newsApp/models.py:

photo = models.ImageField(upload_to='news/',
                              blank=True,
                              null=True,
                              verbose_name='展报')

同步数据库：

python manage.py makemigrations

python manage.py migrate

修改视图函数

homeApp/views.py:

def home(request):
    # 新闻展报
    newList = MyNew.objects.all().filter(~Q(
        newType='通知公告')).order_by('-publishDate')
    postList = set()
    postNum = 0
    for s in newList:
        if s.photo:
            postList.add(s)
            postNum += 1
        if postNum == 3:  # 只截取最近的3个展报
            break

    # 新闻列表
    if (len(newList) > 7):
        newList = newList[0:7]

    # 返回结果
    return render(request, 'home.html', {
        'active_menu': 'home',
        'postList': postList,
        'newList': newList,
    })

• 头部引用：引用了MyNew模型，引用了Q函数，该函数可以用于对对象的复杂查询，可以对关键字参数进行封装，同时可以组合使用&（and),|(or),~(not)等。
• 数据过滤查询：用Q函数过滤掉最后一类“通知公告”即可获得另外两类的合集，然后将获取的数据按照时间排序。
• 新闻展报：只需截取最近的3条包含展报图片的新闻，
• 新闻列表；对于获取的新闻列表，只选取其中的7条进行显示

编写前端页面

紧接着上一节Python Web开发：企业概况 定义好的框架结构，在新闻动态部分填入相应的代码。

<!-- 新闻动态 -->
      <span class="part1">
        <a href="#">新闻动态</a>
      </span>
      <span class="part1 en">
          / News
      </span>
      <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'company' %}">
        + 更多
      </a>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div class="col-md-5">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators nav-point">
            {% for post in postList %}
            <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" {% if forloop.first %} class="active"
              {% endif %}>
            </li>
            {% endfor %}
          </ol>
          <!-- 轮播（Carousel）项目 -->
          <div class="carousel-inner" style="margin-top:15px;">
            {% for post in postList %}
            <div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}
              style="background-size:cover;">
              <a href="{% url 'newsApp:newDetail' post.id %}">
                <img src="{{post.photo.url}}" ></a>
              <div class="carousel-caption nav-title">{{post.title}}</div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <ul class="list-unstyled list-new">
          {% for mynew in newList %}
          <li>
            <a href="{% url 'newsApp:newDetail' mynew.id %}">
              {{mynew.title|truncatechars:"15"}}</a>
            <span>【{{mynew.publishDate|date:"Y-m-d"}}】</span>
          </li>
          {% endfor %}
        </ul>
      </div>

• 布局结构：新闻动态模块，在其内部进行二次栅格划分，左右两个子模块，分别对应“新闻展报”和“新闻列表”（占7格）
• 新闻展报：采用Bootstrap提供的轮播组件实现，其中data-slide-to属性，从零开始，用于区分每幅海报，这里采用了模板标签{{forloop.counter0}}来表示。用{{forloop.first来判断当前迭代是否是第一次。
• 新闻列表：将后台传递的newList变量逐个进行渲染，

CSS页面：

static/home.css:

/*新闻中心*/
.carousel {
	margin-bottom: 40px;
}
.carousel .item {
	background-color: #000;
}
.carousel .nav-point{
	bottom:-14px;
}	
.carousel .nav-title{
	font-size:12px;
	bottom:-14px;
}
.carousel .item img {
    width: 100%;    
}
.carousel-caption {
	z-index: 10;
}
.carousel-caption p {
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 1.8;
}
.more-btn{
	float:right;
	margin-top:7px;
	color:#828282;
	font-size:11px;
}
.list-new li{
	border-bottom:1px dashed #eae7e7;
	line-height:40px;
}
.list-new a{
	text-decoration:none;
	color:#666;
	font-size:13px;
}
.list-new a:hover{
	color:#d30a1c;
}
.list-new span{
	float:right;
	font-size:12px;
}
.list-new .public-detail{
	float:right;
	color:#d30a1c;
}

图片自动剪裁

新闻图片，当上传的展报图片尺寸不一致时怎么办？

轮播时就会出现错位现象。

一种解决办法是将图片按比例裁剪成固定像素宽高的图片再进行输出，本节将采用jQThumb.js插件实现该功能。

下载地址为：https://github.com/pakcheong/jqthumb

只需添加几行代码 即可解决缩略图对齐显示问题。

步骤：

• 将jqthumb.min.js文件复制到根目录/static/js文件夹中，然后在home.html中{% block content %}引入该插件。

<script src="{% static 'js/jqthumb.min.js' %}"></script>

• 然后添加额外的裁剪代码：

<script>
  //处理缩略图
  function DrawImage(hotimg) {
    $(hotimg).jqthumb({
      width: '100%', // 宽度
      height: '220px', // 高度
      zoom: '1', // 缩放比例
      method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
    });
  }
</script>

• 最后将轮播项目的<img>标签代码修改如下：

<img src="{{post.photo.url}}" class="img-responsive" onload="DrawImage(this)">

效果

.