部落格網站（8）-部落格的撰寫頁面

阿新 • • 發佈：2019-01-16

新增新文章：

在template中新增edit.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>edit page</title>
</head>
<body>
    <form action="{% url 'blog:edit_action' %}" method="post">    <!--提交表單資料-->
        {% csrf_token %}      <!--安全性問題,用post提交表單時，要在form中加入 {% csrf_token %} 用於防範csrf（跨站請求偽造）-->
    <label>文章標題：<br/>
        <textarea name="title" cols="80" rows="2" >title</textarea>   <!--注意name，後臺獲取資料的標識-->
    </label>
    <p></p>
    <label>文章內容：<br/>
        <textarea name="content" cols="80" rows="50" >content</textarea>
    </label>
    <p></p>
    <input type="submit" value="提交">  <!--提交按鈕-->
</form>
</body>
</html>

這個頁面涉及到了兩個響應函式

（1）顯示頁面的響應函式

views.py中加入

def edit_page(request):   #顯示頁面的響應函式
    return render(request,'edit_page.html')

（2）表單提交的響應函式

views.py中加入

def edit_action(request):   #提交表單的響應函式
    title=request.POST.get('title', 'TITLE')   #獲取提交的title，失敗則獲取到'TITLE'
    content = request.POST.get('content', 'CONTENT')
    models.Article.objects.create(title=title, content=content)  #建立一個新物件（取得的資料，通過models類的操作放入資料庫中）
    return HttpResponseRedirect("/nic/index/")   #提交完成後重定向到index

使用 request.POST[' 引數名 '] 獲取表單資料（通過HTTP請求，傳遞的資料就放在request裡，HTTP請求分為post，get等方法，request對不同方法建立了字典，用於儲存資料，request.POST裡面的鍵值對就是前端的資料）

新增edit.html中表單form

<form action="{% url 'blog:edit_action' %}" method="post">

配置URL

index.html中新文章超連結加上url

<a href="{% url 'blog:article_page' article.id %}">{{article.title}}</a>

該app的urls.py中加入

    url(r'^edit/$', views.edit_page, name='edit_page'),
    url(r'^edit/action/$', views.edit_action, name='edit_action'),

修改文章：

從主頁點選不同文章的超連結進入文章頁面，就是傳遞了一個id作為引數，然後後臺程式碼根據這個引數從資料庫中取出來對應的文章，並把它傳遞到前端頁面。修改文章和新增新文章，都要進入編輯頁面，但編輯頁面一個內容為空，一個有內容。根據上述思路，可通過id 來區分不同的編輯頁面（將新增新文章的編輯頁面id設為0）。

修改edit_page

views.py中修改edit_page()函式

def edit_page(request,article_id):   #顯示頁面的響應函式
    if str(article_id) == '0':  #新增文章時article_id為0,則直接跳轉到edit頁面
        return render(request,'edit_page.html')
    article=models.Article.objects.get(pk=article_id) #獲取文章傳到編輯頁面
    return render(request, 'edit_page.html', {'article': article})

urls.py中對應url加上article_id

url(r'^edit/(?P<article_id>[0-9]+)$', views.edit_page, name='edit_page'),

article_page.html 新增修改文章的url

<a href="{% url'blog:edit_page'article_id %}">修改文章</a>

index.html 新增新文章url中加設為0

<a href="{% url 'blog:edit_page' 0 %}">新增新文章</a>

文章編輯頁面edit_page.html頁面加入條件判斷，不存在的文章傳入value，顯示文章內容

{% if article %}    <!--若檔案存在則將文章內容顯示在textarea-->
    <label>文章標題：<br/>
        <textarea name="title" cols="80" rows="2" >{{ article.title }}</textarea>   <!--注意name，後臺獲取資料的標識-->
    </label>
    <p></p>
    <label>文章內容：<br/>
        <textarea name="content" cols="80" rows="50" >{{ article.content}}</textarea>
    </label>
    {% else %}  <!--如果article不存在，顯示空白編輯區域-->
    <label>文章標題：<br/>
        <textarea name="title" cols="80" rows="2" >title</textarea>   <!--注意name，後臺獲取資料的標識-->
    </label>
    <p></p>
    <label>文章內容：<br/>
        <textarea name="content" cols="80" rows="50" >content</textarea>
    </label>
    {% endif %}

修改edit_action

在edit_page.html中新增提交article_id 表單的語句

修改文章時傳遞article_id

<input type="hidden" name="article_id" value="{{ article.id }}"  <!--修改文章時，將article_id設為該文章的ID-->

新建文章時傳遞0

<input type="hidden" name="article_id" value="0"  <!--新建文章時，將article_id設為0-->

修改views.py中的響應函式

def edit_action(request):  #提交表單的響應函式
    title=request.POST.get('title', 'TITLE')   #獲取提交的title，失敗則獲取到'TITLE'
    content = request.POST.get('content', 'CONTENT')
    article_id=request.POST.get('article_id','0')
    if str(article_id) == '0':  #建立新文章物件
        models.Article.objects.create(title=title, content=content) #建立一個新物件（取得的資料，通過models類的操作放入資料庫中）
        return HttpResponseRedirect("/nic/index/")  #提交完成後重定向到index
    article=models.Article.objects.get(pk=article_id)  #獲取到該id對應的文章物件
    article.title=title
    article.content=content
    article.save()    #修改物件後的儲存
    return HttpResponseRedirect("/nic/index/")  # 提交完成後重定向到index

部落格網站（8）-部落格的撰寫頁面

部落格網站（8）-部落格的撰寫頁面

部落格網站（7）-部落格的主頁面及文章內容頁面

Django搭建部落格網站（2）

Django搭建部落格網站（1）

github+hexo搭建自己的部落格網站（五）進階配置(暢言實現部落格的評論)

利用Word和Github製作個人部落格網站（二）

簡易部落格開發（8）----django1.9 部落格部署到pythonanywhere上

Django 開發學習筆記（8）- 開發表單頁面，讓使用者新增內容

用flask開發個人部落格（8）—— flask中的模板

SpringBoot之從零搭建部落格網站（可提供原始碼）

搭建自己的技術部落格系列（五）hexo部落格接入busuanzi外掛，展示訪問量和網站執行時間

從零到一快速搭建個人部落格網站（域名備案 + https免費證書）（一）

NodeJS簡易部落格系統（九）後臺管理實現及專案總結

NodeJS簡易部落格系統（八）功能需求描述及使用者模組實現

NodeJS簡易部落格系統（七）express框架入門學習

NodeJS簡易部落格系統（六）NodeJS入門學習（下）

NodeJS簡易部落格系統（五）NodeJS入門學習（上）

NodeJS簡易部落格系統（四）Mongoose入門學習

NodeJS簡易部落格系統（三）MongoDB入門學習

NodeJS簡易部落格系統（二）Swig模板引擎入門

部落格網站（8）-部落格的撰寫頁面

相關推薦