Django简单应用之7 完善博客

←转到第六章
✈回到首页


个人博客可以初步区分为:博客主页面,博客文章正文页面,博客撰写页面

7.1主页面内容

文章标题列表,超链接,发表文章按钮(超链接)
列表创建思路:
取出数据库中的所有文章对象→将文章对象们打包成列表,传递到前端
→前端页面以标题超链接的形式逐个列出
模板for循环:
{%for xx in xxs%}
html语句
{%endfor%}
在blog下属的view.py文件中修改,articles = models.Article.objects.all()
Django简单应用之7 完善博客
修改前端:index.html:
Django简单应用之7 完善博客
运行结果如下:
Django简单应用之7 完善博客

7.2博客的文章页面

标题,文章内容,修改文章的按钮(超链接)
步骤:
在view.py中添加
Django简单应用之7 完善博客
在主页单击不同的文章名称,会向后台传递数据,一般是主键,所以在这里添加新的article.id属性用来对照不同的界面。
新建博客页面html文件:
Django简单应用之7 完善博客
修改urls:
Django简单应用之7 完善博客
ps:1为了区分主页与博客界面,将主页的url修改为index/$
2注意article的正则表达式,是将正则表达式识别到的数字以article_id作为组名去匹配的
这时访问

localhost:8000/blog/article/1

即可:
Django简单应用之7 完善博客
url传递参数:
参数写在响应函数中request后,可以有默认值→URL正则表达式:r’^/article/(?P<article_id>[0-9]+)/$与URL正则中的组名必须和参数一致

7.3超链接目标地址

href后面是目标地址
template中可以用“{%url ‘app_name:url_name’ param %}”
其中app_name和url_name都在url中配置
再配URL
根urls,写在include()的第二个参数位置,namespace=’blog’
Django简单应用之7 完善博客
应用下则写在url()的第三个参数的位置,name=’article’
Django简单应用之7 完善博客
主要取决于是否使用include引用了另一个url文件,最后修改一下index.html文件
Django简单应用之7 完善博客

7.4博客撰写页面

页面内容:
标题编辑栏
文章内容编辑区域
提价按钮
前端代码:edit_page.html:
Django简单应用之7 完善博客
urls.py:
Django简单应用之7 完善博客
编辑响应函数:
使用request.POST[‘参数名’]获得表单数据
models.Article.object.create(title,content)创建对象
Django简单应用之7 完善博客
修改urls数据:
Django简单应用之7 完善博客
修改前端action:
Django简单应用之7 完善博客
这时就可以到

http://localhost:8000/blog/edit/

进行提交编辑了:
Django简单应用之7 完善博客
但是,这时如果提交会出现:
Django简单应用之7 完善博客
原因:
为了防范CSRF跨站点请求伪造(Cross—Site Request Forgery),在django中的post操作必须经过csrf验证。
在模板中,{% csrf_token %}每个POST表单内都有一个模板标记,该标记以内部URL为目标。
Django简单应用之7 完善博客
这样就可以正常提交了。
这时补全index.html中“新文章的”的href=”{% url ‘blog:edit_page’%}”即可实现新文章编辑

7.5 博客文章修改实现

我们所有的空href只剩下了“修改文章”
相较于添加新文章,修改文章必须获取到待修改文章的标题以及内容信息→修改文章页面有article对象→决定文章内容的就是文章的ID
不妨每次修改都获取一下article_id,原始文章即用原始id进行修改,而新文章在录入时id=0,提交之后被赋予新id,修改如下:
Django简单应用之7 完善博客
在urls中为edit补充article.id后缀:
Django简单应用之7 完善博客
为“新文章”补充href:
Django简单应用之7 完善博客
为“修改文章”补充href:
Django简单应用之7 完善博客
返回浏览器即可。
获取原文中的title与content:
Django简单应用之7 完善博客
但是此时edit_action如果正常运行,那么原文会以新id的形式加入到博客列表中,因此我们可以添加一个隐藏标签来存储原文id:
Django简单应用之7 完善博客
修改view.py,通过id的不同来进行不同的操作:
Django简单应用之7 完善博客


✈回到首页                                                                                                                                      转到第八章→