简易博客开发（4）---- blog 开发逻辑

最新推荐文章于 2022-07-16 17:00:35 发布

weixin_33727510

最新推荐文章于 2022-07-16 17:00:35 发布

阅读量172

点赞数

文章标签： python 前端数据库 ViewUI

原文链接：https://my.oschina.net/hding/blog/614616

版权

为什么80%的码农都做不了架构师？>>>

首先设计博客主页，前面根据Pure，制作了一个基本的博客框架，现在就要向这个框架里添加内容，毫无疑问仍然是url, template, views三部曲结合的结果，首先设计url使得url更加结构化，及引用方便

修改myblog/urls.py

#/myblog/myblog/urls.py                                             #全局入口 
 1 from django.conf.urls import include, url                                      
 2 from django.contrib import admin                                               
 3 from blog import views                                                         
 4                                                                                
 5 urlpatterns = [                                                                
 6     url(r'^blog/', include('blog.urls')),                        #http://serverIP:8000/blog  匹配blog里面的urls              
 7     url(r'^admin/', include(admin.site.urls)),                                 
 8 ]

这样每个应用都有自己的url，设计上进一步进行应用级别上的分离

新增blog/urls.py

#/myblog/blog/urls.py  
  1 from django.conf.urls import patterns, include, url                            
  2                                                                                
  3 from django.contrib import admin                                               
  4                                                                                
  5 from blog import views                                                         
  6                                                                                
  7 urlpatterns =[                                                                 
  8     url(r'^$', views.index, name='index'),                       #http://serverIP:8000/blog  调用views.index方法                                 
  9 ]

修改视图文件，传blogs, tags参数到index.html页面中

#/myblog/blog/views.py
  1 from django.shortcuts import render,render_to_response                         
  2                                                                                
  3 # Create your views here.                                                      
  4 from blog.models import Blog,Tag, Author                                       
  5 from django.http import HttpResponse, Http404, HttpResponse,HttpResponseRedirect
  6 
  7 def index(request):                                                            
  8     blogs = Blog.objects.all()                                                 
  9     tags = Tag.objects.all()
 10     return render_to_response('index.html',{'blogs':blogs,       #render_to_response通过字典传参                 
 11                                             'tags': tags,})

新增index.html，这个文件继承于base.html，这是django中template的继承特质，意味着继承了base的博客框架，并加上自己的特性（博客题目，博客标签，博客内容）

1 {% extends "base.html" %}                                                                              #继承base并进行扩展
  2 {% block content %}                                                                                    #下面的内容代替base.html中的{%block content%}{%endblock%}
  3 <div class = "posts">
  4     {% for blog in blogs %}                                                                            #template中的html仍然可以编程，如for,if这也是django的特质
  5     <section class="post">
  6         <header class="post-header">
  7  <h2 class= "post-title"><a href="#">{{blog.title}}</a><h2>  #{{var}}变量由双大括号括起来，由视图函数传过来
  8                 <p class = "post-meta">
  9                     Time: <a class="post-author" href="#">{{blog.date_time | date:'Y M d'}}</a>&nbsp
 10                     Tag:
 11                     {% for tag in tags %}
 12                     <a class="post-category" href="#">{{tag.tag_name}}</a>
 13                     {% endfor %}
 14                 </p>
 15         </header>
 16 
 17             <div class="post-description">
 18                 <p>
 19                     {{blog.content}}
 20                 </p>
 21             </div>
 22     </section>
 23     {% endfor %}
 24 {% endblock %}

修改后的前端显示如下：

可见用到的url是blog/urls.py，博客显示在右3/4处，包含标题，时间，标签，内容，这是一个主页，如何才能单篇博客详细查看呢

三部曲之一: 增加url

#/myblog/blog/urls.py  
  1 from django.conf.urls import patterns, include, url                            
  2                                                                                
  3 from django.contrib import admin                                               
  4                                                                                
  5 from blog import views                                                         
  6                                                                                
  7 urlpatterns =[                                                                 
  8     url(r'^$', views.index, name='index'),                       #http://serverIP:8000/blog  调用views.index方法      
  9     url(r'^(?P<id>(\d+))/$', views.detail, name='detail'),       #传参数id给视图函数detail进行处理                           
  10 ]

三部曲之二：修改views.py

#/myblog/blog/views.py  
  1 from django.shortcuts import render,render_to_response                         
  2                                                                                
  3 # Create your views here.                                                      
  4 from blog.models import Blog,Tag, Author                                       
  5 from django.http import HttpResponse, Http404, HttpResponse,HttpResponseRedirect
  6 
  7 def index(request):                                                            
  8     blogs = Blog.objects.all()                                                 
  9     tags = Tag.objects.all()
 10     return render_to_response('index.html',{'blogs':blogs,                     
 11                                             'tags': tags,})                    
 12 def detail(request,id):                                             #参数由url传过来                     
 13     try:
 14         blog = Blog.objects.get(id=id)                              #检查该博客是否存在           
 15     except Blog.DoesNotExist:
 16         raise Http404
 17     return render_to_response('detail.html',{'blog':blog})          #返回一个单独博客页面

三部曲之三： templates，需要做两步

step 1: 单独博客页面的入口是在主页中点击该博客的标题进入的，所以要修改链接

#/myblog/blog/templates/index.html
<h2 class= "post-title"><a href="#">{{blog.title}}</a><h2>    =>
<h2 class= "post-title"><a href="{% url 'detail' id=blog.id %}">{{blog.title}}</a><h2>       #超链接到 http://serverIP:8000/blog/blog.id

step 2: 新增一个单独博客的页面，原本是显示所有博客，只需要显示一个博客，因此只要在主页基础上去掉循环即可

#/myblog/blog/templates/detail.html                                              相对于index.html只是把循环去掉，题目不再有超链接
  1 {% extends "base.html" %}
  2 {% block content %}
  3 <div class = "posts">
  4     <section class="post">
  5         <header class="post-header">
  6             <h2 class= "post-title">{{blog.title}}<h2>
  7                 <p class = "post-meta">
  8                     Time: <a class="post-author" href="#">{{blog.date_time | date:'Y M d'}}</a>&nbsp
  9                     Tag:
 10                     {% for tag in blog.tags.all %}
 11                     <a class="post-category" href="#">{{tag.tag_name}}</a>
 12                     {% endfor %}
 13                 </p>
 14         </header>
 15 
 16             <div class="post-description">
 17                 <p>
 18                     {{blog.content}}
 19                 </p>
 20             </div>
 21     </section>
 22 {% endblock %}

点击标题后的单个博客显示效果

单个博客显示成功，那么如果要发表文章的话则需要一个新的post.html专门用于写博客，这边分两步走：

step 1 提供一个写博客的页面 post.html

#/myblog/blog/templates/post.html  
  1 {% extends "base.html" %}
  2 {% block content %}
  3 <style type="text/css">                                                                         #content输入框的大小
  4     textarea {
  5         resize: none;
  6         width: 600px;
  7         height: 200px;
  8     }
  9 </style>
 10 <div class = "posts">
 11     <section class="post">
 12         <form action={% url 'blog_add' %} class="pure-form pure-form-stacked" method="post">       #form的动作是http://serverIP:8000/blog_add  数据传输方式为POST
 13         <label>title</label>
 14         <input name="title" type="text">                                       #django通过input name属性来取值
 15         <label>tags</label>
 16         <input class="pure-input-1-4" name="tags" type="text">
 17         <label>content</label>
 18         <textarea width:400px height:600px name='content'>content</textarea>
 19         <button class="pure-button" type="submit">Submit</button>
 20         </form>
 21     </section>
 22 {% endblock %}

post.html提供了三个输入框，分别是title, tags, textarea

step 2 在post.html写博客并把写的数据存入数据库，在视图中的方法是blog_add

#/myblog/blog/urls.py
  1 from django.conf.urls import patterns, include, url                            
  2                                                                                
  3 from django.contrib import admin                                               
  4                                                                                
  5 from blog import views                                                         
  6                                                                                
  7 urlpatterns =[                                                                 
  8     url(r'^$', views.index, name='index'),                                     
  9     url(r'^(?P<id>(\d+))/$', views.detail, name='detail'),                     
 10     url(r'^post/$', views.post, name='post'),                        #在主页中点击post按钮，跳转到post.html                     
 11     url(r'^blog_add/$', views.blog_add, name='blog_add'),            #把post.html输入的内容存到数据库中          
 12 ]

增加视图函数

#/myblog/blog/views.py
 21 def post(request):                                                    #跳转到post.html，这一步可以直接在前端实现
 22     return render_to_response('post.html')                                        
 23                                                                                
 24 def blog_add(request):
 25     content = request.POST.get('content')                             #在前端通过POST发送content数据给后台
 26     author = Author.objects.get(name='terry')                         #作者暂定为terry,以后可以根据实际登录人作为作者         
 27     title = request.POST.get('title')                                 #在前端通过POST发送title数据给后台
 28     tag_name = request.POST.get('tags')                               #在前端通过POST发送tags数据给后台         
 28     tag_name_string= request.POST.get('tags')                         #tag_name字符串是我们输入的一串tags以逗号隔开
 29     tag_name_list = tag_name_string.split(',')                        #通过split函数据所有的tag分装在列表中
 30     tags = Tag.objects.all()                                          #原先就有的tags
 31     for tag_name in tag_name_list:                                    #双重循环做的是如果输入的一串标签中原先没有的，就新建一个标签
 32         for tag in tags:
 33             if tag_name==tag.tag_name:
 34                 break
 35         else:   
 36             Tag.objects.create(tag_name=tag_name)                                           
 37     blog=Blog.objects.create(title=title,                             #新建博客写入数据库中
 38                         author=author,
 39                         content=content,                                                    
 40                         )
 41     for tag_name in tag_name_list:
 42         blog.tags.add(Tag.objects.get(tag_name=tag_name))             #给博客加入标签
                                      
 44     id= Blog.objects.order_by('-date_time')[0].id                     #查找最新文章的id                      
 45     return HttpResponseRedirect('/blog/%s' %id)                       #数据输入到数据库这是后台做的事，前端显示该博客的单篇博客详细内容比较合适

测试在post.html中输入数据

After Submit:

可见新建的数据已经显示出来了，但问题也随之出现，在输入的时候是有回车的，但是显示却没有分行，这个功能需要优化

注：如果数据是POST方式传到后台需要注释掉settings.py中的csrf，这不是好的方式，以后再进行研究django的中间件，否则由于django的保护，post传不到后台

#/myblog/myblog/settings.py
 43 MIDDLEWARE_CLASSES = (                                                                      
 44     'django.contrib.sessions.middleware.SessionMiddleware',                                 
 45     'django.middleware.common.CommonMiddleware',                                            
 46 #    'django.middleware.csrf.CsrfViewMiddleware',                                           
 47     'django.contrib.auth.middleware.AuthenticationMiddleware',                              
 48     'django.contrib.auth.middleware.SessionAuthenticationMiddleware',                       
 49     'django.contrib.messages.middleware.MessageMiddleware',                                 
 50     'django.middleware.clickjacking.XFrameOptionsMiddleware',                               
 51     'django.middleware.security.SecurityMiddleware',                                        
 52 )

转载于:https://my.oschina.net/hding/blog/614616