部落格網站(8)-部落格的撰寫頁面
新增新文章:
在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中加入
使用 request.POST[' 引數名 '] 獲取表單資料 (通過HTTP請求,傳遞的資料就放在request裡,HTTP請求分為post,get等方法,request對不同方法建立了字典,用於儲存資料,request.POST裡面的鍵值對就是前端的資料)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
新增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)-部落格的撰寫頁面
新增新文章: 在template中新增edit.html頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
部落格網站(7)-部落格的主頁面及文章內容頁面
部落格頁面概要: 部落格主頁面 ├───文章標題列表(超連結) |___發表部落格按鈕(超連結) 部落格文章內容頁面 ├───標題 ├───文章內容 |___修改文章按鈕(超連結) 部落
Django搭建部落格網站(2)
10、頁面側邊欄:使用自定義模板標籤 我們的部落格側邊欄有四項內容:最新文章、歸檔、分類和標籤雲。這些內容相對比較固定,且在各個頁面都會顯示,如果像文章列表或者文章詳情一樣,從檢視函式中獲取然後傳遞給模板,則每個頁面對應的檢視函式裡都要寫一段獲取這些內容的程式碼,這會導致很多重複程式碼。更
Django搭建部落格網站(1)
一、前言 1.1.環境 python版本:3.6 Django版本:1.11.6 1.2.預覽效果 最終搭建的blog的樣子,基本上滿足需求了。框架搭好了,至於CSS,可以根據自己喜好隨意搭配。 二、建立部落格應用 2.
github+hexo搭建自己的部落格網站(五)進階配置(暢言實現部落格的評論)
如何對如何搭建hexo+github可以檢視我第一篇入門文章:http://www.cnblogs.com/chengxs/p/7402174.html 詳細的可以檢視hexo部落格的演示:https://saucxs.github.io/ 同時綁定了域名:http://w
利用Word和Github製作個人部落格網站(二)
前言 在前面第一篇已經介紹了怎樣建立一個用Word製作的部落格首頁。連結 這篇進一步完善我們的部落格體系,閱讀完此篇基本就可以了。更多奇淫技巧,不定期分享。 一、建立部落格目錄網頁 1,在資料夾中建立一個word命名為directory.docx,然後開啟,製作目
簡易部落格開發(8)----django1.9 部落格部署到pythonanywhere上
準備工作 首先需要註冊一下,pythonanywhere的免費賬戶有一定的限制,只能建立一個web app,不能繫結獨立域名,不能通過ssh連線,不過只是搭一個project也是夠用了。 註冊成功之後直接轉到dashboard頁面 幾個tab,Console是新建一個控制檯,用於操作伺服
Django 開發學習筆記(8)- 開發表單頁面,讓使用者新增內容
這一節,我們新增表單項,讓使用者可以選擇自己輸入資料。這一節的程式碼幾乎都是模板程式碼,如果一開始不理解的話,照著抄就可以了。 1、在應用路徑下新建 forms.py 檔案,輸入以下程式碼 from django import forms from blo
用flask開發個人部落格(8)—— flask中的模板
一般而言,檢視函式中存在兩種邏輯,業務邏輯和表現邏輯。業務邏輯諸如我們在登入頁面時輸入使用者名稱和密碼後,點選確定按鈕時,在資料庫驗證該使用者名稱和密碼是否正確. 表現邏輯就是返回正確
SpringBoot之從零搭建部落格網站(可提供原始碼)
文字不夠,圖片來湊。 前言 為什麼想要搭建這個部落格? 我還記得,在大二寒假的某天,同往常一樣的在家解決這某個bug,不停地問度娘,很巧的碰到了一個同行在他的部落格中完美的記錄了我的bug的解決方案,隨後我又看了看他寫的其他部落格文章,覺得都非常的不錯,並
搭建自己的技術部落格系列(五)hexo部落格接入busuanzi外掛,展示訪問量和網站執行時間
busuanzi計數指令碼 busuanzi官方指引 一、安裝指令碼(必選) 要使用不蒜子必須在頁面中引入busuanzi.js,目前最新版如下。 不蒜子可以給任何型別的個人站點使用,如果你是用的hexo,開啟themes/你的主題/layout/_partial/footer.ejs新增上述指令碼即可
從零到一快速搭建個人部落格網站(域名備案 + https免費證書)(一)
## 前言 為什麼選擇搭建個人部落格?一方面是各個平臺經常下架原創文章,另一個方面是為了熟悉整個建站流程。 通過搭建個人部落格,我們可以自由的
NodeJS簡易部落格系統(九)後臺管理實現及專案總結
功能描述及流程在上一篇已經說明,現在來寫具體實現過程。 一、頁面實現 (1)模板 首頁模板main_template.html <!DOCTYPE html> <html lang="en"> <head> <
NodeJS簡易部落格系統(八)功能需求描述及使用者模組實現
一、功能需求描述 用一張導圖來說明: 二、頁面設計 頁面設計如下: 三、梳理下整個系統的業務流程 對這個小專案進行業務流程的梳理,流程圖大致如下: 四、使用者模組實現 1、資料庫設計及程式碼 (1)使用者表(users) (2)博文分類表(
NodeJS簡易部落格系統(七)express框架入門學習
一、安裝及demo 如果已經裝好webstorm,直接新建專案如下: 否則cd到專案目錄下,使用npm install express --save即可完成安裝。 demo: var expr
NodeJS簡易部落格系統(六)NodeJS入門學習(下)
一、網路程式設計 1、小試牛刀 NodeJS本來的用途是編寫高效能Web伺服器。首先在這裡重複一下官方文件裡的例子,使用NodeJS內建的http模組簡單實現一個HTTP伺服器。 var http = require('http'); http.createSe
NodeJS簡易部落格系統(五)NodeJS入門學習(上)
一、模組 在NodeJS中,一般將程式碼合理拆分到不同的JS檔案中,每一個檔案就是一個模組,而檔案路徑就是模組名。在編寫每個模組時,都有require、exports、module三個預先定義好的變數可供使用。 1、require require函式用於在當前模組中載入和使用別的模組,傳
NodeJS簡易部落格系統(四)Mongoose入門學習
一、模式(schemas) 1、定義schema Mongoose的一切都始於一個Schema。每個schema對映到MongoDB的集合 (collection)和定義該集合(collection)中的文件的形式。 var mongoose = r
NodeJS簡易部落格系統(三)MongoDB入門學習
安裝好mongodb並設定開機自啟動服務,然後安裝視覺化軟體NoSQL Manager for MongoDB Professional。 一、CRUD操作 1、建立/使用資料庫 use DATABASE_NAME
NodeJS簡易部落格系統(二)Swig模板引擎入門
移動終端總決賽終於在昨天在西安電子科技大學結束了,很遺憾我們沒能取得一個好的成績。說多都是淚,還是接著學習NodeJs吧,下面是我學習Swing模板引擎的總結。 一、常用 1、變數 {{ foo.bar }} {{ foo['bar'] }}