博客页面设计
博客页面概要
-
博客主页面
-
博客文章内容页面
-
博客撰写页面
博客主页面
主页面内容
-
文章标题列表，超链接
-
发表博客按钮（超链接）
列表编写思路
-
取出数据库中所有文章对象
-
将文章对象们打包成列表，传递到前端
-
前端页面把文章以标题超链接的形式逐个列出
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（与项目进行交互的命令行工具集入口（项目管理器））
到这里博客的基本功能就已经完成了，接下来就需要根据自己的实际情况进行开发和优化了，有疑问和建议的可以底下留言哦！
我后面也会把开发完成的博客上线的，并且继续分享开发过程中的一些重要知识点，到时候欢迎各位继续访问！