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

最新推荐文章于 2024-06-14 14:17:06 发布

allenxguo

最新推荐文章于 2024-06-14 14:17:06 发布

阅读量636

点赞数

分类专栏： Python django 文章标签： django python

本文链接：https://blog.csdn.net/gx864102252/article/details/72876600

版权

Python 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

django

8 篇文章 0 订阅

订阅专栏

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

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

下面分布进行讲解

博客主页面

博客主页面包括：

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

标题列表编写思路：

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

其中列出标题列表需要用到模板的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 编辑页面

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

allenxguo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Django开发博客-(5)完善主页开发_1

下面我们开始着手制作博客主页面的开发首先分析一下一个博客具有哪些必要的东西：页面包含：博客主页面博客文章页面博客书写(修改)页面下面分布进行讲解博客主页面博客主页面包括：文章标题列表，具有超链接功能可以发表新的博客标题列表编写思路：列出数据库的文章对象文章对象制作成列表，传递给前端显示前段页面把文章标题以超链接形式列出其中列出标题列表需要用到模板的for循环等等，这里介
复制链接

扫一扫