1. 程式人生 > >Django 開發學習筆記(8)- 開發表單頁面,讓使用者新增內容

Django 開發學習筆記(8)- 開發表單頁面,讓使用者新增內容

這一節,我們新增表單項,讓使用者可以選擇自己輸入資料。這一節的程式碼幾乎都是模板程式碼,如果一開始不理解的話,照著抄就可以了。

1、在應用路徑下新建 forms.py 檔案,輸入以下程式碼

from django import forms

from blog.models import Topic

class TopicForm(forms.ModelForm):
    class Meta:
        model = Topic
        fields = ['text']
        labels = {'text':'請輸入話題內容'}

知識點:
(1)最簡單的 ModelForm 類只包含了一個內嵌的 Meta 類,它的作用是告訴 Django 使用哪個模型建立表單,以及在表單中包含哪些欄位;
(2)

model = Topic

表示,我們根據模型 Topic 建立表單;
(3)

fields = ['text']

表示,該表單只包含欄位“text”

2、配置 urls

# 用於新增新主題的網頁
url(r'^new_topic/$', views.new_topic, name='new_topic')

3、配置 views

def new_topic(request):
    """新增新主題"""
    if request.method != 'POST':
        # 未提交資料,建立一個新表單
        form = TopicForm()
    else
: # POST 提交的資料,對資料進行處理 form = TopicForm(request.POST) if form.is_valid(): form.save() return HttpResponseRedirect(reverse('learning_logs:topics')) context = {'form': form} return render(request, 'blog/new_topic.html', context)

知識點:
(1)HttpResponseRedirect

:使用者提交了主題以後,我們將使用這個類將使用者重定向到網頁 ‘learning_logs:topics’;
(2)不要忘記掉寫 reverse('learning_logs:topics') 中的 reverse。
函式 reverse() 根據指定的 URL 模型確定 URL,這意味著 Django 將在頁面被請求時生成 URL。

4、配置模板 new_topic.html

{% extends "blog/base.html" %}{% block content %}

    <form action="{% url 'blog:new_topic' %}" method="post">
        {% csrf_token %}{{ form.as_p }}
        <button type="submit">提交</button>
    </form>
{% endblock content %}

知識點:
(1)模板標籤 {% csrf_token %}:來防止攻擊者利用表單來獲得對伺服器未經授權的訪問,這種攻擊被稱為“跨站請求偽造”;

(2)模板變數 {{ form.as_p }}:我們顯示錶單,從中可以知道 Django 使得完成顯示錶單的任務有多簡單:我們只需要包含模板變數 {{ form.as_p }},就可以讓 Django 自動建立顯示錶單所需的全部欄位。
修飾符 as_p 讓 Django 以段落的格式渲染所有的表單元素,這是一種整潔地顯示錶單的簡單方式;

(3)記住模板標籤和模板變數長什麼樣。

在話題列表頁面,新增新話題的連結。

{% extends 'blog/base.html' %}{% block content %}

    <ul>
        {% for topic in topics %}
            <li>
                <a href="{% url 'blog:topic' topic.id %}">{{ topic }}</a>
            </li>

        {% empty %}
            <li>話題沒有被建立。</li>

        {% endfor %}
    </ul>

    <a href="{% url 'blog:new_topic' %}">新增新的話題</a>

{% endblock content %}