Django项目实战——用户投票系统(三)_django投票前端美化

Django项目实战——用户投票系统(三)

承接上文

官方文档链接附上：
编写你的第一个 Django 应用，第 3 部分 | Django 文档 | Django (djangoproject.com)

​ 在第二部分，我们完成了Django轻量级服务器的搭建及运用，完成了投票系统的基础架构，完成了投票问题的创建和修改，也完成了在用户和管理员的创建。

在接下来的第三部分，我们将继续index的搭建，完善投票系统的视图，本部分将着重放在公共接口”视图“的美化及扩展上。

开启前述

​ 在这一部分，我们会创建两个HTML文档，当然有前端（HEML/css）知识的铺垫，ctrl+C/V会不那么死板，但这不是重点，在内部polls文件的编辑中，我们继续调用了API接口，使得后续的网页端更加美化，下面就让我们继续开始吧。

视图概述

​ Django 中的视图的概念是「一类具有相同功能和模板的网页的集合」

而在我们的投票应用中，我们需要下列几个视图：

• 问题索引页——展示最近的几个投票问题。
• 问题详情页——展示某个投票的问题和不带结果的选项列表。
• 问题结果页——展示某个投票的结果。
• 投票处理器——用于响应用户为某个问题的特定选项投票的操作。

在 Django 中，网页和其他内容都是从视图派生而来。每一个视图表现为一个 Python 函数（或者说方法，如果是在基于类的视图里的话）。Django 将会根据用户请求的 URL 来选择使用哪个视图（更准确的说，是根据 URL 中域名之后的部分）

为了将 URL 和视图关联起来，Django 使用了 ‘URLconfs’ 来配置。URLconf 将 URL 模式映射到视图。

点击 URL调度器 以获取更多内容

丰富视图

现在让我们在polls/views.py里加入更多视图

• 特点：接收参数的视图

polls/views.py

def detail(request, question_id):
    return HttpResponse("You're looking at question %s." % question_id)

def results(request, question_id):
    response = "You're looking at the results of question %s."
    return HttpResponse(response % question_id)

def vote(request, question_id):
    return HttpResponse("You're voting on question %s." % question_id)
1
2
3
4
5
6
7
8
9

• 把这些新视图添加进 polls.urls 模块里，只要添加几个 url() 函数调用就行：

polls/urls.py

from django.urls import path

from . import views

urlpatterns = [
    # ex: /polls/
    path('', views.index, name='index'),
    # ex: /polls/5/
    path('<int:question_id>/', views.detail, name='detail'),
    # ex: /polls/5/results/
    path('<int:question_id>/results/', views.results, name='results'),
    # ex: /polls/5/vote/
    path('<int:question_id>/vote/', views.vote, name='vote'),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

问题未解

• 问题出现~~（还未解决）

  看看你的浏览器，如果你转到 “/polls/34/” ，Django 将会运行 detail() 方法并且展示你在 URL 里提供的问题 ID。再试试 “/polls/34/vote/” 和 “/polls/34/vote/” ——你将会看到暂时用于占位的结果和投票页。

  当某人请求你网站的某一页面时——比如说， “/polls/34/” ，Django 将会载入 mysite.urls 模块，因为这在配置项 ROOT_URLCONF 中设置了。然后 Django 寻找名为 urlpatterns 变量并且按序匹配正则表达式。在找到匹配项 'polls/'，它切掉了匹配的文本（"polls/"），将剩余文本——"34/"，发送至 ‘polls.urls’ URLconf 做进一步处理。在这里剩余文本匹配了 '<int:question_id>/'，

  使得我们 Django 以如下形式调用 detail():

  detail(request=<HttpRequest object>, question_id=34)
  1

  问题 question_id=34 来自 <int:question_id>。使用尖括号 “获得” 网址部分后发送给视图函数作为一个关键字参数。字符串的 question_id 部分定义了要使用的名字，用来识别相匹配的模式，而 int 部分是一种转换形式，用来确定应该匹配网址路径的什么模式。冒号 (:) 用来分隔转换形式和模式名。

  可是，在我继续操作时，不知道如何调用details，导致出现该界面：
  

一个真正有用的视图

每一个视图都有两个必要的关键——

• 返回一个包含被请求页面内容的 HttpResponse 对象

• 抛出一个异常，比如 Http404

• 其他想法：

  你的视图可以从数据库里读取记录，可以使用一个模板引擎（比如 Django 自带的，或者其他第三方的），可以生成一个 PDF 文件，可以输出一个 XML，创建一个 ZIP 文件，你可以做任何你想做的事，使用任何你想用的 Python 库

由于 Django 自带的数据库 API 很方便，尝试在视图里使用它。

在 index() 函数里插入了一些新内容，让它能展示数据库里以发布日期排序的最近 5 个投票问题，以空格分割

from django.http import HttpResponse

from .models import Question


def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    output = ', '.join([q.question_text for q in latest_question_list])
    return HttpResponse(output)

# Leave the rest of the views (detail, results, vote) unchanged
1
2
3
4
5
6
7
8
9
10
11

打开网站——出现如下效果

此外：为了将页面可以更加灵活的设计，我们需要如下操作

分离代码

1. 由于页面的设计写死在视图函数的代码里的。如果你想改变页面的样子，你需要编辑 Python 代码，但为了简便——

   使用 Django 的模板系统，只要创建一个视图，就可以将页面的设计从代码中分离出来。

2. 在你的 polls 目录里创建一个 templates 目录。Django 将会在这个目录里查找模板文件

   你项目的 TEMPLATES 配置项描述了 Django 如何载入和渲染模板。默认的设置文件设置了 DjangoTemplates 后端，并将 APP_DIRS 设置成了 True。这一选项将会让 DjangoTemplates 在每个 INSTALLED_APPS 文件夹中寻找 “templates” 子目录。这就是为什么尽管我们没有像在第二部分中那样修改 DIRS 设置，Django 也能正确找到 polls 的模板位置的原因

3. 在你刚刚创建的 templates 目录里，再创建一个目录 polls，然后在其中新建一个文件 index.html 。

   换句话说，你的模板文件的路径应该是 polls/templates/polls/index.html 。

   因为app_directories 模板加载器是通过上述描述的方法运行的，所以 Django 可以引用到 polls/index.html 这一模板了。

   注：在编辑index.html时，我们可以先打开记事本，在编辑后修改文件后缀为.html即可。

   将下面的代码输入到刚刚创建的模板文件中：

   polls/templates/polls/index.html

   {% if latest_question_list %}
       <ul>
       {% for question in latest_question_list %}
           <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
       {% endfor %}
       </ul>
   {% else %}
       <p>No polls are available.</p>
   {% endif %}
   1
   2
   3
   4
   5
   6
   7
   8
   9

   附：完整html官方文档介绍：

   HTML 入门 - 学习 Web 开发|断续器 (mozilla.org)

4. 更新一下 polls/views.py 里的 index 视图来使用模板：

   polls/views.py

   from django.http import HttpResponse
   from django.template import loader
   
   from .models import Question
   
   
   def index(request):
       latest_question_list = Question.objects.order_by('-pub_date')[:5]
       template = loader.get_template('polls/index.html')
       context = {
           'latest_question_list': latest_question_list,
       }
       return HttpResponse(template.render(context, request))
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   作用是：

   载入 polls/index.html 模板文件，并且向它传递一个上下文(context)。这个上下文是一个字典，它将模板内的变量映射为 Python 对象。

   用你的浏览器访问 “/polls/” ，你将会看见一个无序列表，列出添加的 “What’s up” 投票问题，链接指向这个投票的详情页。

5. 介绍引入快捷函数—— render()¶

   「载入模板，填充上下文，再返回由它生成的 HttpResponse 对象」是一个非常常用的操作流程。于是 Django 提供了一个快捷函数，我们用它来重写 index() 视图：

   polls/views.py

   from django.shortcuts import render
   
   from .models import Question
   
   
   def index(request):
       latest_question_list = Question.objects.order_by('-pub_date')[:5]
       context = {'latest_question_list': latest_question_list}
       return render(request, 'polls/index.html', context)
   1
   2
   3
   4
   5
   6
   7
   8
   9

   注：

   • 这时：不再需要导入 loader 和 HttpResponse 。不过如果还有其他函数（比如说 detail, results, 和 vote ）需要用到它的话，就需要保持 HttpResponse 的导入。
   • render() 函数将请求对象作为第一个参数，模板名称作为第二个参数，字典作为可选的第三个参数。 它返回使用给定上下文呈现的给定模板的 HttpResponse 对象。

抛出404错误

处理投票详情视图——它会显示指定投票的问题标题。下面是这个视图的代码：

polls/views.py

from django.http import Http404
from django.shortcuts import render

from .models import Question
# ...
def detail(request, question_id):
    try:
        question = Question.objects.get(pk=question_id)
    except Question.DoesNotExist:
        raise Http404("Question does not exist")
    return render(request, 'polls/detail.html', {'question': question})
1
2
3
4
5
6
7
8
9
10
11

如果指定问题 ID 所对应的问题不存在，这个视图就会抛出一个 Http404 异常。

• 快捷函数—— get_object_or_404()

  尝试用 get() 函数获取一个对象，如果不存在就抛出 Http404 错误也是一个普遍的流程。Django 也提供了一个快捷函数，下面是修改后的详情 detail() 视图代码：

  polls/views.py

  from django.shortcuts import get_object_or_404, render
  
  from .models import Question
  # ...
  def detail(request, question_id):
      question = get_object_or_404(Question, pk=question_id)
      return render(request, 'polls/detail.html', {'question': question})
  1
  2
  3
  4
  5
  6
  7

  get_object_or_404() 函数将 Django 模型作为其第一个参数和任意数量的关键字参数，并将其传递给模型管理器的 get() 函数。 如果对象不存在，它会引发 Http404。

使用模板系统

再次看detail（）视图

它向模板传递了上下文变量 question 。下面是 polls/detail.html 模板里正式的代码：

polls/templates/polls/detail.html

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>
1
2
3
4
5
6

模板系统统一使用点符号来访问变量的属性。在示例 {{ question.question_text }} 中，首先 Django 尝试对 question 对象使用字典查找（也就是使用 obj.get(str) 操作），如果失败了就尝试属性查找（也就是 obj.str 操作），结果是成功了。如果这一操作也失败的话，将会尝试列表查找（也就是 obj[int] 操作）。

在 [{% for %}] 循环中发生的函数调用：question.choice_set.all 被解释为 Python 代码 question.choice_set.all() ，将会返回一个可迭代的 Choice 对象，这一对象可以在 [{% for %}]标签内部使用。

查看 模板指南 可以了解关于模板的更多信息

去除模板中的硬编码URL

在 polls/index.html 里编写投票链接时，链接是硬编码的：

<li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
1

问题在于，硬编码和强耦合的链接，对于一个包含很多应用的项目来说，修改起来是十分困难的。然而，因为你在 polls.urls 的 url() 函数中通过 name 参数为 URL 定义了名字，你可以使用 {% url %} 标签代替它：

<li><a href="{% url 'detail' question.id %}">{{ question.question_text }}</a></li>
1

这个标签的工作方式是在 polls.urls 模块的 URL 定义中寻具有指定名字的条目。你可以回忆一下，具有名字 ‘detail’ 的 URL 是在如下语句中定义的：

...
# the 'name' value as called by the {% url %} template tag
path('<int:question_id>/', views.detail, name='detail'),
...
1
2
3
4

如果你想改变投票详情视图的 URL，比如想改成 polls/specifics/12/ ，你不用在模板里修改任何东西（包括其它模板），只要在 polls/urls.py 里稍微修改一下就行：

...
# added the word 'specifics'
path('specifics/<int:question_id>/', views.detail, name='detail'),
1
2
3

为URL名称添加命名空间

在根 URLconf 中添加命名空间。在 polls/urls.py 文件中稍作修改，加上 app_name 设置命名空间：

polls/urls.py

from django.urls import path

from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.index, name='index'),
    path('<int:question_id>/', views.detail, name='detail'),
    path('<int:question_id>/results/', views.results, name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]
1
2
3
4
5
6
7
8
9
10
11

现在，编辑 polls/index.html 文件，从：

polls/templates/polls/index.html

<li><a href="{% url 'detail' question.id %}">{{ question.question_text }}</a></li>
1

修改为指向具有命名空间的详细视图：

polls/templates/polls/index.html

<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
1

未完待续

在框架搭建好之后，我们还没有将它可视化结束，因此，在第四部分，我们将开始基础的表单处理和通用视图构造。并了解数据库的基础部分…………
ls/index.html

<li><a href="{% url 'detail' question.id %}">{{ question.question_text }}</a></li>
1

修改为指向具有命名空间的详细视图：

polls/templates/polls/index.html

<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
1

未完待续

在框架搭建好之后，我们还没有将它可视化结束，因此，在第四部分，我们将开始基础的表单处理和通用视图构造。并了解数据库的基础部分…………