目錄
原視頻教程鏈接
博客頁面設計
- 博客主頁面
- 博客文章內容頁面
- 博客撰寫頁面
博客主頁面開發
頁面內容
- 文章標題列表，超鏈接
- 發表博客按鈕（超鏈接）
代碼編寫
1、修改blog/views.py中的index函數：
def index(request):
articles = models.Article.objects.all() # 獲取所有文章對象列表
return render(request, 'blog/index.html', {'articles': articles}) # 傳遞所有文章，作爲參數
2、修改templates/blog下的index.html：
添加：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>
<a href="{#這裏先空着#}">新文章</a>
</h1>
{#遍歷articles中的所有文章，生成對應鏈接#}
{% for article in articles %}
<a href="{#這裏先空着#}">{{ article.title }}</a>
<br>
{% endfor %}
</body>
</html>博客文章頁面開發
頁面內容
- 標題
- 文章內容
- 修改文章（超鏈接）
代碼編寫
1、在blog/views.py中添加article_page函數：
def article_page(request, article_id): # 傳入文章id
article = models.Article.objects.get(pk=article_id) # 根據文章id獲取文章對象
return render(request, 'blog/article_page.html', {'article': article}) # 傳遞文章對象
2、在blog/urls.py中添加:
url(r'^article/(?P<article_id>[0-9]+)$', views.article_page),
# 獲取article_id值，並傳遞給article_page函數
3、在templates/blog中添加模板article_page.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article Page</title>
</head>
<body>
<h1>{{ article.title }}</h1>
<br>
<h3>{{ article.content }}</h3>
<br><br>
<a href="{#這裏先空着#}">修改文章</a>
</body>
</html>Django模板中的超鏈接配置
超鏈接配置使用Django的命名空間
命名空間-xiong的博客
超鏈接目標地址
href後面是目標地址- 模板中可以用
"{% url 'app_name:url_name' param%}"作爲地址 - 其中
app_name和url_name都可以在url函數中設置
配置app_name
在myblog/myblog/urls.py下修改：
url(r'^blog/', include('blog.urls', namespace='blog')),
配置url_name
在blog/urls.py下修改：
url(r'^article/(?P<article_id>[0-9]+)$', views.article_page, name='article_page'),在模板中使用
修改index.html
<a href="{% url 'blog:article_page' article.id %}">{{ article.title }}</a>
博客文章撰寫頁面
頁面內容
- 標題編輯欄
- 文章內容編寫區域
- 提交按鈕
小技巧
背景
- html表單具有隱藏屬性
- 文章
id從1開始
使用隱藏的input記錄article_id
<input type="hidden" name="article_id" value="{{ article.id }}">根據前端傳來的article_id決定edit頁面的顯示方式
{% if article %}{# 有article傳入，顯示出原文章內容 #}
<input type="hidden" name="article_id" value="{{ article.id }}">{# 隱藏表單存放article.id #}
<lable>文章標題
<input type="text" name="title" value="{{ article.title }}">
</lable>
<br>
<lable>文章內容
<input type="text" name="content" value="{{ article.content }}">
</lable>
<br>
<input type="submit" value="提交">
</form>
{% else %}{# 沒有article傳入 #}
<input type="hidden" name="article_id" value="0">{# 隱藏表單存放article.id，新建文章設置id爲0#}
<lable>文章標題
<input type="text" name="title">
</lable>
<br>
<lable>文章內容
<input type="text" name="content">
</lable>
<br>
<input type="submit" value="提交">
</form>
{% endif %}根據article_id決定文章是新建還是修改
def edit_action(request):
# 獲取表單數據
title = request.POST.get('title', 'TITLE')
content = request.POST.get('content', 'CONTENT')
article_id = request.POST.get('article_id', '0')
if article_id == '0': # 創建新文章
models.Article.objects.create(title=title, content=content)
return HttpResponseRedirect('/blog/index')
# 修改文章
article = models.Article.objects.get(pk=article_id)
article.title = title
article.content = content
article.save()
return HttpResponseRedirect('/blog/index')代碼編寫
1、創建edit_page
<!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 %}
{% if article %}{# 有article傳入，顯示出原文章內容 #}
<input type="hidden" name="article_id" value="{{ article.id }}">{# 隱藏表單存放article.id #}
<lable>文章標題
<input type="text" name="title" value="{{ article.title }}">
</lable>
<br>
<lable>文章內容
<input type="text" name="content" value="{{ article.content }}">
</lable>
<br>
<input type="submit" value="提交">
</form>
{% else %}{# 沒有article傳入 #}
<input type="hidden" name="article_id" value="0">{# 隱藏表單存放article.id，新建文章設置id爲0#}
<lable>文章標題
<input type="text" name="title">
</lable>
<br>
<lable>文章內容
<input type="text" name="content">
</lable>
<br>
<input type="submit" value="提交">
</form>
{% endif %}
</body>
</html>2、在blog/views.py中添加：
def edit_page(request, article_id):
if str(article_id) == '0': # 如果article_id爲0，即新建文章，不傳參數
return render(request, 'blog/edit_page.html')
article = models.Article.objects.get(pk=article_id) # 否則查找文章對象並傳遞
return render(request, 'blog/edit_page.html', {'article': article})
def edit_action(request):
# 獲取表單數據
title = request.POST.get('title', 'TITLE')
content = request.POST.get('content', 'CONTENT')
article_id = request.POST.get('article_id', '0')
if article_id == '0': # 創建新文章
models.Article.objects.create(title=title, content=content)
return HttpResponseRedirect('/blog/index')
# 修改文章
article = models.Article.objects.get(pk=article_id)
article.title = title
article.content = content
article.save()
return HttpResponseRedirect('/blog/index')3、在blog/urls.py添加：
url(r'^edit/(?P<article_id>[0-9]+)$', views.edit_page, name='edit_page'),
url(r'^edit/action$', views.edit_action, name='edit_action'),4、將之前空着的html中href屬性填寫好