博客页面设计
博客应用页面包括:
1)博客主页面;
2)博客文章内容页面;
3)博客撰写页面。
1. 博客主页面
主页面内容:
1)文章标题列表,超链接;
2)发表博客按钮(超链接)
列表编写思路:
1)取出数据库中所有文章对象;
2)将文章对象打包成列表,传递到前端;
3)前端页面把文章以标题超链接形式逐个列出。
模板使用for循环获取所有article对象:
def index(request):
articles = models.Article.objects.all() #获取所有文章对象,返回一个列表
return render(request, 'blog/index.html', {'articles': articles})
<h1>
<a href="">新文章</a>
</h1>
<h3>{% for article in articles %}</h3>
<a href="">{{article.title}}</a>
<br/>
<h3>{% endfor %}</h3>
2.博客文章页面
页面内容:
1)标题
2)文章内容
3)修改文章按钮(超链接)
在view.py中添加博客文章页面:
def article_page(request, article_id): #article_id 传递文章ID
article = models.Article.objects.get(pk=article_id)
return render(request, 'blog/article_page.html', {'article':article})
编写前端代码:
<h1>{{ article.title }}</h1>
<br/>
<h3>{{ article.content }}</h3>
<br/>
<a href="">修改文章</a>
URL传递参数。在urls.py中添加URL,path与article_page函数中的参数名保持一致:
path(r'article/<int:article_id>', views.article_page)
Django中的超链接
template中使用{%url 'app_name:url_name' param%}
,其中app_name
和url_name
都在url中配置。
重新配置URL。若使用了include函数引用外部url配置文件,需要进行两步配置:
1)根urls文件中,app_name
写在include()的第二个参数位置,namespace='blog'
:
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include(('blog.urls','blog'), namespace='blog')), #include函数第一个参数是一个元组,提供了url和app_name
]
2)应用urls文件中,url_name
下写在url()的第三个参数位置,name='article'
:
urlpatterns = [
path(r'index/', views.index),
path(r'article/<int:article_id>/', views.article_page, name='article_page'),
]
3)index.html文件中,添加:
<h3>{% for article in articles %}</h3>
<a href="{% url 'blog:article_page' article.id %}">{{article.title}}</a>
<br/>
<h3>{% endfor %}</h3>
注意
1)Django2.0中使用更加简洁的
path(r'article/<int:article_id>/', views.article_page, name='article_page')
代替了
url(r'^article/(?P<article_id>[0-9]+)$',views.article_page)
2)'article/<int:article_id>/'
最后的’/'不能漏掉,否则可能出现无法找到页面的错误。
3. 博客撰写页面
页面中的内容包括:标题编辑栏、文章内容编辑区域和提交按钮。
1)编辑前端页面:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit Page</title>
</head>
<body>
<form action="" method="post">
<label for="title">文章标题
<input type="text" name="title">
</label>
<br/>
<label for="content">文章内容
<input type="text" name="content">
</label>
<br/>
<label for="sub">
<input type="submit" name="sub">
</label>
</form>
</body>
</html>
2)编辑响应函数
使用request.POST[‘参数名’]获取表单数据
models.Article.objects.create(title,content)
view.py中添加:
def edit_action(request):
title = request.POST.get('title', 'TITLE')
content = request.POST.get('content', 'CONTENT')
models.Article.objects.create(title=title, content=content)
articles = models.Article.objects.all()
return render(request, 'blog/index.html', {'articles': articles})
应用目录urls.py文件中添加
urlpatterns = [
path('index/', views.index),
path('article/<int:article_id>/', views.article_page, name='article_page'),
path('edit/', views.edit_page, name='edit_page'),
path('/edit/action/', views.edit_action, name='edit_action')
]
编辑完成,提交表单时会有安全性问题:
需要在post表单中添加{% csrf_token %}
:
<form action="{% url 'blog:edit_action' %}" method="post">
{% csrf_token %}
</form>