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: