查看“Python Web开发:新闻动态”的源代码
←
Python Web开发:新闻动态
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==背景== “新闻动态”分为左右两个部分, 左边是展报,右边是新闻列表 展报部分以图片形式吸引读者 列表部分 显示“新闻动态”模块的列表信息 ==实训步骤== ===修改数据模型=== 为了能够实现展报功能, 需要为“新闻”模型添加一个额外的图片字段用于存储海报。 newsApp/models.py: <nowiki> photo = models.ImageField(upload_to='news/', blank=True, null=True, verbose_name='展报') </nowiki> 同步数据库: python manage.py makemigrations python manage.py migrate ===修改视图函数=== homeApp/views.py: <nowiki> 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, }) </nowiki> *头部引用:引用了MyNew模型,引用了Q函数,该函数可以用于对对象的复杂查询,可以对关键字参数进行封装,同时可以组合使用&(and),|(or),~(not)等。 *数据过滤查询:用Q函数过滤掉最后一类“通知公告”即可获得另外两类的合集,然后将获取的数据按照时间排序。 *新闻展报:只需截取最近的3条包含展报图片的新闻, *新闻列表;对于获取的新闻列表,只选取其中的7条进行显示 ===编写前端页面=== 紧接着上一节[[Python Web开发:企业概况]] 定义好的框架结构,在新闻动态部分填入相应的代码。 <nowiki> <!-- 新闻动态 --> <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> </nowiki> *布局结构:新闻动态模块,在其内部进行二次栅格划分,左右两个子模块,分别对应“新闻展报”和“新闻列表”(占7格) *<nowiki>新闻展报:采用Bootstrap提供的轮播组件实现,其中data-slide-to属性,从零开始,用于区分每幅海报,这里采用了模板标签{{forloop.counter0}}来表示。用{{forloop.first来判断当前迭代是否是第一次。</nowiki> *新闻列表:将后台传递的newList变量逐个进行渲染, CSS页面: static/home.css:
返回至
Python Web开发:新闻动态
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息