房源详情页的视图和模板

本章我们将实现房源详情页的详细功能。当用户希望查看某个特定房源的更多图片和详细信息时，点击该房源即可进入此页面。

房源详情页 URL

我们在 listings/urls.py 文件的第 15 行添加了 房源详情页 的 URL 配置代码（该文件在本课末尾的代码编辑器中默认打开）。详情页的路径与 all_listings 相同，但增加了 detail_id 参数，该参数用于存储房源编号。例如，all_listings/1/ 对应 detail_id=1 的房源。

房源详情页视图

在本课末尾的代码编辑器中打开 房源详情页 视图文件（listings/views.py），并添加以下代码：

1def detail(request, detail_id):
2    detail = Listings.objects.get(id=detail_id)
3    context = {'detail': detail}
4    return render(request, 'listings/detail.html', context)

注意，我们在 detail 函数中添加了参数 detail_id（第 1 行）。这是因为我们需要通过 detail_id 的值来获取每个独立的房源数据。

我们创建了一个变量 detail（第 2 行），用于根据用户选择的房源存储对应的所有对象数据。如果用户选择查看编号为 1 的房源，则通过 detail = Listings.objects.get(id=1) 获取该房源的所有信息；其他房源也遵循相同的逻辑。

最后，我们将变量 detail 存入字典（第 3 行），并传递给模板（第 4 行），以便在模板中使用。

房源详情页模板

以下是将添加到模板文件夹中名为 detail.html 的模板代码：

1{% extends "listings/base.html" %}
2
3{% block content %}
4
5<div class="main">
6
7    <h2>房源信息：</h2>
8
9    <p><b>标题：</b>{{ detail.title }}</p>
10    <p><b>成色：</b>{{ detail.condition }}</p>
11    <p><b>商品类型：</b>{{ detail.product_type }}</p>
12    <p><b>交易类型：</b>{{ detail.sale_type }}</p>
13    <p><b>价格：</b>${{ detail.price }}</p>
14    <p><b>所在城市：</b>{{ detail.city }}, {{ detail.state }}</p>
15    <p><b>联系邮箱：</b>{{ detail.contact_email }}</p>
16    <p><b>发布日期：</b>{{ detail.list_date }}</p>
17    <p><b>图片：</b></p>
18
19</div>
20
21{% endblock content %}

由于我们已将 detail 变量传入模板，因此可以通过点语法访问其属性。在此模板中，我们展示了与每条房源关联的额外信息。目前尚未添加图片展示，这将在后续章节中完成。

商品类型 和 联系邮箱 是本页面新增的字段。你可以自由调整模板内容。例如，可以在 房源列表页 仅显示 标题 和 成色，而当用户点击某一条房源后，再展示大部分详细信息。无论你选择展示哪些字段，一旦用户点击具体房源，所有相关的信息都应完整呈现。

练习

1. 在下方代码编辑器中打开 listings/views.py。复制第一个代码块中的 房源详情页 视图代码，并粘贴到该文件中。
2. 复制第二个代码块中的 房源详情页 模板代码，并将其添加到 listings/templates/listings/detail.html 文件中。
3. 运行应用程序。