Django开发博客-(5)完善主页开发

xiaoxiao2021-02-27  299

下面我们开始着手制作博客主页面的开发 首先分析一下一个博客具有哪些必要的东西: 页面包含:

博客主页面博客文章页面博客书写(修改)页面

下面分布进行讲解

博客主页面

博客主页面包括:

文章标题列表,具有超链接功能可以发表新的博客

标题列表编写思路:

列出数据库的文章对象文章对象制作成列表,传递给前端显示前段页面把文章标题以超链接形式列出

其中列出标题列表需要用到模板的for循环等等,这里介绍一下。 格式:{% for xxx in xxxs %} HTML语句 {% endfor %} 还有一个模板过滤器的东西 格式:{{ value | filter }} 例如:{{string | length }} 这样之后就不会显示这个字符串,就会显示这个字符串长度,并且可以叠加多个过滤器{{value | filter1 | filter2 |… }}

了解完毕之后开始代码书写: 首先让views响应主页之后返回所有的列表对象。

def myblog(request): articles = models.Article.objects.all() return render(request, 'myblog/myblog.html', {'articles':articles})

然后修改前端的html文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客</title> </head> <body> {% for article in articles %} <a href="">{{ article.title }}</a> <br/> {% endfor %} <h3> <a href="">增加新文章</a> </h3> </body> </html>

其中href是预留的超链接。 刷新页面就会出现以下页面 图1 完善主页 同时如果在数据库中添加新文章也可以显示出来。

博客文章页面

下面实现点击超链接显示博客具体文章 可想而知一个不同类型的html页面,肯定是要对应一个不同的html文件格式的,所以我们现在需要实现第二种页面肯定要增加一个html文件。 创建一个article_page代表了每一个博客的页面。 点击超链接肯定需要有一个响应,所以我们需要再次添加一个函数响应在views中:

def article_page(request, article_id): article = models.Article.objects.get(pk=article_id) return render(request, 'myblog/article_page.html', {'article':article})

这个函数多了一个参数article_id他是为了获取点击的博客文章列表的第几个,它和数据空的id相对应。获取到这个页面返回给前端。

接下来就需要修改前端代码了 修改html文件:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客</title> </head> <body> <h2>{{ article.title }}</h2> <br/> <h3>{{ article.content }}</h3> <br/> <br/> <a href="">编辑文章</a> </body> </html>

顺便添加了一个编辑文章的超链接

然后在urls中添加响应的链接

urlpatterns = [ url(r'^blog/$', views.myblog), url(r'^article/(?P<article_id>[0-9]+)$', views.article_page), ]

特别注意:Url正则中的组名必须和参数一致(传入article_page的参数)

接下里输入 127.0.0.1:8000/blog/article/1 就可查看相对应的文章了。但是此时还没有实现超链接。

实现超链接

超链接目标地址是在href后面,模板中可以使用: {% url ‘app_namespace : url_name’ param %} 来配置,其中app_namespace 为应用名称空间。

配置根目录的urls中,可以写在include()的第二个参数位置:

url(r'^blog/', include('myblog.urls', namespace='myblog'))

假如跟目录没有使用include引用另一个url配置文件,则可以使用在应用下url()的第三个参数位置,name=’article’ 这里使用第一种方式: 根目录urls和应用urls分别改动如下:

urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^blog/', include('myblog.urls', namespace='myblog')) ] urlpatterns = [ url(r'^blog/$', views.myblog), url(r'^article/(?P<article_id>[0-9]+)$', views.article_page, name='article_page'), ]

然后修改html文件

{% for article in articles %} <a href="{% url 'myblog:article_page' article.id %}">{{ article.title }}</a> <br/> {% endfor %}

article.id作为参数传入 然后就实现了点击对应的标题进入。 图2 实现超链接

博客书写(编辑)页面

页面内容包括:

标题栏编辑文章内容编辑提交按钮

同理可知还需要增加一个html文件实现这个页面。edit_page.html 首先修改views增加一个响应

def edit_page(request): return render(request, 'myblog/edit_page.html')

随后将响应添加到urls

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

最后修改前端代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编辑</title> </head> <body> <form action="" method="post"> <label>博客标题 <input type="text" name="title" style="width:300px;"/> </label> <br/> <label>博客内容 <input type="text" name="content" style="width:300px;height:200px"/> </label> <br/> <input type="submit"> </form> </body> </html>

使用的表单类型,下面是得到的页面 图3 编辑页面

接下来就需要编辑响应的函数了 本章紧接着下一章内容(篇幅原因…)

转载请注明原文地址: https://www.6miu.com/read-6161.html

最新回复(0)