Django Web应用程序(三)

18.3 创建网页: 学习笔记主页

使用Django创建网页的过程通常分为三个阶段: 定义URL、编写视图和编写模板。
URL模式描述了URL是如何设计的,让Django知道如何将浏览器请求与网站URL匹配,以确定返回哪个网页。
每个URL都被映射到特定的视图——视图函数获取并处理网页所需的数据。视图函数通常调用一个模板,后者生成浏览器能够理解的网页。

18.3.1 映射URL

用户通过在浏览器中输入URL以及单击链接来请求网页,因此我们需要确定项目需要哪些URL。主页URL最重要,它是用户用来访问项目的基础URL。当前,基础URL(http://localhost:8000/)返回默认Django网页
修改文件夹learning_log中的文件urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import include,url

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'', include('learning_logs.urls', namespace='learning_logs')),
]

这是一个针对整个项目的urls.py文件,变量urlpatterns 包含项目中的应用程序的URL。添加一行代码来包含模块learning_logs.urls,这行代码包含实参namespace, 可以让我们将learning_logs的URL同项目中的其他URL区分开

创建learning_logs的urls.py文件

"""定义learning_logs的URL模式"""
from django.conf.urls import url

from . import views

app_name = 'learning_logs'

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

url的第二个实参指定了要调用的视图函数。请求的URL于前述正则表达式匹配时,Django将调用views.index。第三个实参name='index' 将这个URL模式的名称指定为index,让我们能够在代码的其他地方引用它。每当需要提供到这个主页的链接时,我们都将使用这个名称,而不编写URL

18.3.2 编写视图

from django.shortcuts import render

# Create your views here.
"""学习笔记的主页"""
def index(request):
    return render(request, 'learning_logs/index.html')

由于我们需要处理任何数据,因此这个函数只包含调用render()的代码。这里向函数render()提供了两个实参:原始请求对象以及一个可用于创建网页的模板。

18.3.3 编写模板

在learning_logs中新建文件夹templates,再创建名为learning_logs的文件夹,新建一个index.html的文件
index.html 内容

<p>Learning Log</p>
<p>Learning Log helps you keep track of your learning, for any topic you're
learning about.</p>

放置目录

(ll_env) c5220056@GMPTIC:~/myworkplace/learning_logs/templates/learning_logs$ ls
index.html

再请求项目的基础URL——http://localhost:8000/,将看到刚才创建的网页,而不是默认的Django网页。

学习笔记的主页

注: 创建网页的过程看起来可能复杂,但将URL、视图和模板分离的效果实际上很好。这让我们能够分别考虑项目的不同方面,且在项目很大时,让各个参与者可专注于其最擅长的方面。例如:数据库专家可专注于模型,程序员可专注于视图代码,而Web设计人员可专注于模板。

18.4 创建其他网页

18.4.1 模板继承

1. 父模板
创建一个名为base.html的模板,这个文件包含所有页面都有的元素;其他模板都继承base.html

# base.html
<p>
  <a href="{% url 'learning_logs:index' %}">Learning Log</a>
</p>

{% block content %}{% endblock content %}

模板标签是用大括号和百分号({% %})表示的。在实例中,模板标签 {% url 'learning_logs:index' %} 生成一个URL,该URL与learning_logs/urls.py中定义的名为index的URL模式匹配。在这个例子中,learning_logs是一个命名空间,而index是该命名空间中一个名称独特的URL模式。
{% block content %}{% endblock content %} 是一对块标签。这个块名为content, 是一个占位符,其中包含的信息将由子模板指定。

2. 子模块
重新编写index.html

{% extends "learning_logs/base.html" %}

{% block content %}
<p>Learning Log helps you keep track of your learning, for any topic you're
learning about.</p>
{% endblock content %}

18.4.2 显示所有主题的页面

1. URL模式
首先,我们定义显示所有主题Topic的页面的URL,我们将使用URL http://localhost:8000/topics/返回所有主题的页面
修改learning_logs/urls.py

from django.conf.urls import url

from . import views

app_name = 'learning_logs'

urlpatterns = [
    # index
    url(r'^$', views.index, name='index'),
    
    # show all topics
    url(r'^topics/$', views.topics, name='topics'),
]

2. 视图
函数topics()需要从数据库中获取一些数据,并将其发送给模板,我们需要在views.py中添加代码如下:

from django.shortcuts import render

from .models import Topic

# Create your views here.

def index(request):
    return render(request, 'learning_logs/index.html')
    
def topics(request):
    """show all topics"""
    topics = Topic.objects.order_by('date_added')
    context = {'topics': topics}
    return render(request, 'learning_logs/topics.html', context)

这里content是我们定义的一个将要发送给模板的上下文。上下文是一个字典,其中的键是我们将在模板中用来访问数据的名称, 而值是我们要发送给模板的数据。

3. 模板
显示所有主题的页面的模板接受字典context,以便能够使用topics()提供的数据。
创建topics.html

{% extends "learning_logs/base.html" %}

{% block content %}

<p>Topics</p>

<ul>
  {% for topic in topics %}
    <li>{{ topic }}</li>
  {% empty %}
    <li>No topics have been added yet.</li>
  {% endfor %}    
</ul>

{% endblock content %}

模板中使用的代码与Python代码存在一些重要差别:Python使用缩进来指出哪些代码行是for循环的组成部分,而在模板中,每个for循环都必须使用{% endfor %}标签来显式地指出其结束为止。因此在模板中,循环类似于下面这样:

{% for item in list %}
  do something with each item
{% endfor %}

修改父模板,使其包含到显式所有主题的页面链接:

# base.html
<p>
  <a href="{% url 'learning_logs:index' %}">Learning Log</a>
  <a href="{% url 'learning_logs:topics' %}">Topics</a>
</p>

{% block content %}{% endblock content %}

点击topics,将看到类似如下图所示的网页


Topics页面.png

18.4.3 显示特定主题的页面

接下来,我们想要创建一个专注于特定主题的页面——显示该主题的名称及该主题的所有条目。同样,我们将定义一个新的URL 模式,编写一个视图并创建一个模板。我们还将修改显示所有主题的网页,让每个项目列表项都是一个连接,单击它将显示相应主题的所有条目。

1. URL模式
显示特定主题的页面的URL模式与前面的所有URL模式都稍有不同,因为它将使用主题的id 属性来指出请求的是哪个主题。例如,如果用户要查看主题Chess(其id 为1)的详细页面,URL将为http://localhost:8000/topics/1/。下面是与这个URL匹配的模式,它包含在learning_logs/urls.py中:

# urls.py

from django.conf.urls import url

from . import views

app_name = 'learning_logs'

urlpatterns = [
    # index
    url(r'^$', views.index, name='index'),
    
    # show all topics
    url(r'^topics/$', views.topics, name='topics'),
    
    # show detail info for specific topic
    url(r'^topics/(?P<topic_id>\d+)/$', views.topic, name='topic'),
]

2. 视图
views.py

from django.shortcuts import render

from .models import Topic

# Create your views here.

def index(request):
    return render(request, 'learning_logs/index.html')
    
def topics(request):
    """show all topics"""
    topics = Topic.objects.order_by('date_added')
    context = {'topics': topics}
    return render(request, 'learning_logs/topics.html', context)
    
def topic(request, topic_id):
    """显示单个主题及其所有的条目"""
    topic = Topic.objects.get(id=topic_id)
    entries = topic.entry_set.order_by('date_added')
    context = {'topic': topic, 'entries': entries}
    return render(request, 'learning_logs/topic.html', context)

3. 模板
topic.html

{% extends 'learning_logs/base.html' %}

{% block content %}

<p>Topic: {{ topic }}</p>

<p>Entries:</p>
<ul>
  {% for entry in entries %}
  <li>
    <p>{{ entry.date_added|date:'M d, Y H:i' }}</p>
    <p>{{ entry.text|linebreaks }}</p>
  </li>
  
  {% empty %}
  <li>
    There are no entries for this topic yet.
  </li>
  {% endfor %}
</ul>

{% endblock content %}

4. 将显示所有主题的页面中的每个主题都设置为链接

{% extends "learning_logs/base.html" %}

{% block content %}

<p>Topics</p>

<ul>
  {% for topic in topics %}
    <li>
        <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
    </li>
  {% empty %}
    <li>No topics have been added yet.</li>
  {% endfor %}    
</ul>

{% endblock content %}

我们使用模板标签url根据learning_logs中名为topic的URL模式来生成合适的链接。这个URL模式要求我们提供实参topic_id,因此我们在模板标签url中添加了属性topic.id。
如果你刷新显示所有主题的页面,再单击其中的一个主题,将看到类似于下图的页面:

详细主题页面.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容