Python Web开发：动态页面渲染

来自CloudWiki
跳转至： 导航， 搜索

背景

Django提供了方便的ORM操作来对数据库模型进行管理。

当用户在访问荣誉资质页面时，请求通过路由URL分发至views.py文件中的honor()函数进行处理

该函数收到请求后首先从数据库中取出Awars模型的所有数据，然后将数据嵌入到honor.html模板文件中。

实训步骤

视图函数

重新编辑views.py中的honor()函数如下： 

from django.shortcuts import render
from django.shortcuts import HttpResponse
from .models import Award

# Create your views here.
def survey(request):
    '''html = '<html><body>企业概况</body></html>'
    return HttpResponse(html)'''

    return render(request,'survey.html',{
        'active_menu':'about',
        'sub_menu':'survey',
        })


def honor(request):
    '''html = '<html><body>荣誉资质</body></html>'
    return HttpResponse(html)'''
    awards = Award.objects.all()
    return render(request,'honor.html',{
        'active_menu':'about',
        'sub_menu':'honor',
        'awards':awards,
        })

objects.all()函数：得到一个查询集。

  • objects.all()函数：得到一个查询集。
  • objects.filter()函数：返回符合条件的数据
  • objects.exclude()函数，返回不符合条件的数据
  • objects.order_by(),对查询结果集进行排序
  • objects.values(),返回一个列表，每个元素为一个字典
  • objects.reverse(),对排序的结果反转
  • objects.get() 返回一个满足条件的对象，如果没有找到或找到多个，会引发异常
  • objects.count() 返回查询集中对象的数目
  • objects.first() 返回第一条数据
  • objects.last() 返回最后一条数据
  • objects.exists() 判断查询的数据是否存在

编辑网页模板

传统静态网页

honor.html ： 

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
荣誉资质
{% endblock %}

{% block content %}
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/about.jpg' %}">
    </div>
</div>
<!-- 主体内容 -->
<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-title">
                公司简介
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="survey">
                        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
                    </li>
                    <li class="list-group-item" id="honor">
                        <a href="{% url 'aboutApp:honor' %}">荣誉资质</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                荣誉资质
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="{% static 'img/honor1.jpg' %}">
                        <div class="caption">
                            <p>2011年加入互联网协会</p>
                        </div>
                    </div>
                </div>
                 <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="{% static 'img/honor1.jpg' %}">
                        <div class="caption">
                            <p>2011年加入互联网协会</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

动态网页

静态网页是写死的，

动态网页是从数据库调出的动态数据，

因此，为了使网页内容更加灵活，我们更建议使用动态网页。

honor.html: 

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
荣誉资质
{% endblock %}

{% block content %}
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/about.jpg' %}">
    </div>
</div>
<!-- 主体内容 -->
<!-- 主体内容 -->
<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-title">
                公司简介
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="survey">
                        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
                    </li>
                    <li class="list-group-item" id="honor">
                        <a href="{% url 'aboutApp:honor' %}">荣誉资质</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                荣誉资质
            </div>
            <div class="row">
                {% for award in awards %}
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="{{award.photo.url}}">
                        <div class="caption">
                            <p>{{award.description}}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

上述代码通过{% for award in awards %}语句逐个地读取awards中的每一条数据并赋值到新的临时变量awardz中，每个award都包含一项photo和description 数据。在缩略图中分别使用模板变量{{award.photo.url}}和{{award.description}}对<img>的src属性和段落<p>赋予动态内容。

Python21050301.png

如何正确地显示图片

上述代码中文字已正常显示，但是图片没有。

原因使debug模式下没有将动态资源路径MEDIA_URL添加到静态路由static下。

编辑配置文件夹hengDaProject下的urls.py文件，添加代码如下： 

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

Python21050302.png

取自“http://www.openbrains.net/mediawiki/index.php?title=Python_Web开发：动态页面渲染&oldid=26017”