Django之路第六篇：完善博客

博客页面设计

博客页面概要

博客主页面
博客文章内容页面
博客撰写页面

博客主页面

主页面内容

文章标题列表，超链接
发表博客按钮（超链接）

列表编写思路

取出数据库中所有文章对象
将文章对象们打包成列表，传递到前端
前端页面把文章以标题超链接的形式逐个列出

For循环模板

{% for xx in xxs %}

　　HTML语句

{% endfor %}

修改后的博客主页views.py：

1 from django.shortcuts import render
2 from django.http import HttpResponse
3 from . import models
4 def index(request):
5     # 获取所有的条数
6     articles = models.Article.objects.all()
7     return render(request,'blog/index.html',{'articles':articles})

修改后的博客主页index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <h1><a href="">新文章</a></h1>
10     {% for article in articles %}
11         <a href="">{{ article.title }}</a>
12         <br/>
13     {% endfor %}
14 
15 </body>
16 </html>

博客文章页面

标题
文章内容
修改文章按钮（超链接）

1.在blog中的views.py添加响应函数article_page()：

1 # blog/views.py
2 
3 from django.shortcuts import render
4 from django.http import HttpResponse
5 from . import models
6 
7 def article_page(request,article_id):
8     article = models.Article.objects.get(pk=article_id)
9     return render(request,'blog/article_page.html',{'article':article})

2.在模板templates中添加文章详情页面article_page.html：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Article Page</title>
 6 </head>
 7 <body>
 8     <h1>{{ article.title }}</h1>
 9     <br/>
10     <h3>{{ article.content }}</h3>
11     <br/>
12     <a href="">修改文章</a>
13 </body>
14 </html>

3.在blog/urls.py添加文章详情路由:

1 # blog/urls.py
2 
3 from django.conf.urls import url
4 from . import views
5 
6 urlpatterns = [
7     url('^index/$',views.index),
8     url('^article/(?P<article_id>[0-9]+)$',views.article_page)
9 ]

URL传递参数

参数写在响应函数中request后，可以有默认值
URL正则表达式：r'^/article/(?P<article_id>[0-9]+)/$'
URL正则中的组名必须和参数名一致

Django中的超链接

超链接目标地址

href后面是目标地址
template中可以用"{% url 'app_name:url_name' param %}" （app_name:应用命名空间；url_name:链接名称）其中app_name和url_name都在url中配置

url函数的名称参数

根urls，写在include()的第二个参数位置，namespace = 'blog'
应用下则写在url()的第三个参数位置，name = 'article'

主要取决于是否使用include引用了另一个url配置文件

修改后的myblog/urls.py文件如下：

1 from django.contrib import admin
2 from django.urls import path,include
3 urlpatterns = [
4     path('admin/', admin.site.urls),
5     path('blog/', include('blog.urls',namespace='blog')),
6 ]

修改后的blog/urls.py文件如下：

1 from django.conf.urls import url
2 from . import views
3 app_name = 'blog'
4 urlpatterns = [
5     url('^index/$',views.index),
6     url('^article/(?P<article_id>[0-9]+)$',views.article_page,name='article_page')
7 ]

在这里请注意，一定要在应用下的urls.py文件中加上app_name = 'app_name'，不然会报错不通过。

最后就应该修改主页文章链接：

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4 </head>
 5 <body>
 6     <h1><a href="">新文章</a></h1>
 7     {% for article in articles %}
 8         <a href="{% url 'blog:article_page' article.id %}">{{ article.title }}</a>
 9         <br/>
10     {% endfor %}
11 
12 </body>
13 </html>

博客编辑撰写页面

页面内容

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

第一步：在blog应用下的模板中建立edit_page.html文件，并编辑页面得到如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Edit Page</title>
 6 </head>
 7 <body>
 8 <form action="" method="post">
 9     <label>
10         文章标题
11         <input type="text" name="title"/>
12     </label>
13     <br>
14     <label>
15         文章内容
16         <input type="text" name="content"/>
17     </label>
18     <br>
19     <input type="submit" value="提交">
20 </form>
21 </body>
22 </html>

第二步：在应用下的views.py文件中添加页面渲染函数edit_page()后如下：

 1 from django.shortcuts import render
 2 from . import models
 3 def index(request):
 4     # 获取所有的条数
 5     articles = models.Article.objects.all()
 6     return render(request,'blog/index.html',{'articles':articles})
 7 
 8 def article_page(request,article_id):
 9     article = models.Article.objects.get(pk=article_id)
10     return render(request,'blog/article_page.html',{'article':article})
11 
12 def edit_page(request):
13     return render(request,'blog/edit_page.html')

第三步：在应用下的urls.py文件中配置编辑页面的路由如下：

1 from django.conf.urls import url
2 from . import views
3 app_name = 'blog'
4 urlpatterns = [
5     url('^index/$',views.index),
6     url('^article/(?P<article_id>[0-9]+)$',views.article_page,name='article_page'),
7     url('^edit/$',views.edit_page)
8 ]

这个时候可以直接在浏览器输入url访问edit_page.html页面了

编辑响应函数

使用request.POST['参数名']获取表单数据
models.Article.object.create(title,content)创建对象

两个编辑页面

思路

新文章为空，而修改得文章是有内容的
修改文章页面有文章对象
文章的ID

为了去区分两个编辑页面，所以这里采用带id的方式，新建编辑页面的id=0，而修改编辑页面的id还是原来的id，则：

修改后的views.py的edit_page()函数：

1 def edit_page(request,article_id):
2     if str(article_id)=='0':
3         return render(request,'blog/edit_page.html')
4     article = models.Article.objects.get(pk=article_id)
5     return render(request,'blog/edit_page.html',{'article':article})

同时给路由添加参数：

1 url('^edit/(?P<article_id>[0-9]+)$',views.edit_page,name='edit_page'),

将编辑页面修改为：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Edit Page</title>
 6 </head>
 7 <body>
 8 <form action="{% url 'blog:edit_action' %}" method="post">
 9     {% csrf_token %}
10     {% if article %}
11     <label>
12         文章标题
13         <input type="text" name="title" value="{{ article.title }}"/>
14     </label>
15     <br>
16     <label>
17         文章内容
18         <input type="text" name="content" value="{{ article.content }}"/>
19     </label>
20     <br>
21     {% else %}
22     <label>
23         文章标题
24         <input type="text" name="title"/>
25     </label>
26     <br>
27     <label>
28         文章内容
29         <input type="text" name="content"/>
30     </label>
31     <br>
32     {% endif %}
33     <input type="submit" value="提交">
34 </form>
35 </body>
36 </html>

通过以上修改，就可以实现编辑页面的页面效果响应，但是最后的提交事件响应也得跟着改。

因此，可以再编辑页面添加如下input标签对后台传值：

1 <input type="hidden" name="article_id" value="{{ article.id }}">

此时就应该修改views.py文件中的edit_action()函数：

 1 def edit_action(request):
 2     title = request.POST.get('title','TITLE')
 3     content = request.POST.get('content','CONTENT')
 4     article_id = request.POST.get('article_id','0')
 5 
 6     if article_id == '0':
 7         articles = models.Article.objects.all()
 8         models.Article.objects.create(title = title,content = content)
 9         return render(request, 'blog/index.html', {'articles': articles})
10 
11     article = models.Article.object.get(pk=article_id)
12     article.title = title
13     article.content = content
14     article.save()
15     return render(request, 'blog/article_page.html', {'article': article})

当前的工程目录结构

myblog

　　|-----blog（应用目录）

　　　　|-----migrations（数据移植模块，内容自动生成）

　　　　　　|------__init__.py

　　　　|-----templates

　　　　　　|-----blog

　　　　　　　　|-----index.html（主页面）

　　　　　　　　|-----article_page.html（文章详情页面）

　　　　　　　　|-----edit_page.html（编辑文章页面）

　　　　|-----__init__.py

　　　　|-----admin.py（应用的后台管理系统配置）

　　　　|-----apps.py（应用的一些配置）

　　　　|-----models.py（数据模块，类似于MVC结构中的Models（模型））

　　　　|-----tests.py（自动化测试模块）

　　　　|-----views.py（执行响应的代码所在模块）

　　　　|-----urls.py(新增路由文件)

　　|-----myblog（项目目录）

　　　　|-----__init__.py

　　　　|-----settings.py（项目中的总配置文件）

　　　　|-----urls.py（URL配置文件）

　　　　|-----wsgi.py（Python应用与Web服务器之间的接口）

　　|-----db.sqlite3（数据库文件）

　　|-----manage.py（与项目进行交互的命令行工具集入口（项目管理器））

到这里博客的基本功能就已经完成了，接下来就需要根据自己的实际情况进行开发和优化了，有疑问和建议的可以底下留言哦！

我后面也会把开发完成的博客上线的，并且继续分享开发过程中的一些重要知识点，到时候欢迎各位继续访问！