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,将看到类似如下图所示的网页
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。
如果你刷新显示所有主题的页面,再单击其中的一个主题,将看到类似于下图的页面: