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

时间：2021-07-12 13:51:17

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

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

下面分布进行讲解

博客主页面

博客主页面包括：

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

标题列表编写思路：

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

其中列出标题列表需要用到模板的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是预留的超链接。
刷新页面就会出现以下页面
Django开发博客-(5)完善主页开发_1
图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作为参数传入
然后就实现了点击对应的标题进入。
Django开发博客-(5)完善主页开发_1
图2 实现超链接

博客书写(编辑)页面

页面内容包括：

  1. 标题栏编辑
  2. 文章内容编辑
  3. 提交按钮

同理可知还需要增加一个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>

使用的表单类型，下面是得到的页面
Django开发博客-(5)完善主页开发_1
图3 编辑页面

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

相关文章