去病率兵十万深入敌后痛击匈奴，经此一役，胡虏元气甚伤，单于伊治斜弃河西平原而迁王庭至漠北。汉乃设酒泉、张掖、敦煌、武威河西四郡。众将凯旋回师，帝召大将军卫青、骠骑将军霍去病、飞将军李广、苏建、公孙敖、公孙贺等将议于宣室殿。众将皆以需涉荒漠为困而欲弃之。然武帝废胡之心愈坚，怒曰:汝皆以为不可，而胡虏亦曰寡人不可为之，然朕必举全国之力誓击之，永绝胡虏之患!
遂点精骑十万，以大将军五万兵出定襄，骠骑将军五万出代郡，辎重步卒五十万，挥师远征漠北!
一、兵马未动，辎重先行。——表结构的设计
(参照抽屉新热榜)
在论坛中文章包含的属性(数据库中的字段)有标题、简介、板块、内容、作者、发布时间、最后一次修改时间、优先级(数字权重)。
model里的字段类型
auto_now和auto_now_add区别:
auto_now:记录字段每次被修改的时间
auto_now_add:记录字段被创建时的时间
若字段被设置为这两种类型的一种，则字段不可再更改。
models.py
#! _*_ coding:utf-8 _*_
from __future__ import unicode_literals from django.db import models from django.contrib.auth.models import User #倒入django-admin自带的User表 from django.core.exceptions import ValidationError #页面提示错误信息 import datetime # Create your models here. #文章 class Article(models.Model): title = models.CharField(max_length=255) #标题 brief = models.CharField(blank=True,null=True,max_length=255)#文章简介,可以为空 category = models.ForeignKey('Category')#板块,需要关联Cotegory类(若要关联尚未定义的model,需要使用引号) content = models.TextField(u'文章内容')#文章内容 author = models.ForeignKey('UserInfo')#作者 pub_date = models.DateTimeField(blank=True,null=True)#发布日期,若是草稿,则没有发布时间 last_modify = models.DateTimeField(auto_now=True)#最后一此修改时间 priority = models.IntegerField(u'优先级',default=1000)#优先级,默认1000
head_img = models.ImageField('文章标题图片',upload_to='uploads')#存储标题图片,图片上传到uploads目录下,该目录在app下会自动创建
status_choices = ( ('draft','草稿'), ('published','已发布'), ('hidden','隐藏'), ) status = models.CharField(choices=status_choices,default='published',max_length=32)#文章状态 #发布时间的判断 def clean(self): if self.status == 'draft' and self.pub_date is not None: raise ValidationError('草稿没有发布时间') #如果已经发布,则发布时间设为当前时间 if self.status == 'published' and self.pub_date is None: self.pub_date = datetime.date.today() def __unicode__(self): return self.title class Meta: verbose_name_plural = '文章' #评论 class Comment(models.Model): article = models.ForeignKey(Article,verbose_name='所属文章')#评论所属文章 parent_comment = models.ForeignKey('self',related_name='my_children',blank=True,null=True)#存储父评论,与自己关联,relate_name获取自己的子评论 comment_choices = ( (1,'评论'), (2,'点赞'), ) comment_type = models.IntegerField(choices=comment_choices,default=1)#选择评论还是点赞,默认是评论 user = models.ForeignKey('UserInfo')#发表评论或点赞的用户 date = models.DateTimeField(auto_now_add=True)#评论时间 comment = models.TextField(blank=True,null=True)#评论内容 #判断评论是否为空 def clean(self): if self.comment_type == 1 and len(self.comment) == 0: raise ValidationError('评论不能为空') def __unicode__(self): return '%s,P:%s,%s' %(self.article,self.parent_comment,self.comment) class Meta: verbose_name_plural = '评论' #板块 class Category(models.Model): name = models.CharField(max_length=64) brief = models.CharField(blank=True,null=True,max_length=255)#板块简介 set_as_top_menu = models.BooleanField(default=False)#是否将该模块添加到顶部菜单栏 position = models.SmallIntegerField()#若在顶部菜单栏显示,则需要设置显示的顺序 admin = models.ManyToManyField('UserInfo',blank=True)#板块管理员 def __unicode__(self): return self.name class Meta: verbose_name_plural = '板块' #用户 class UserInfo(models.Model): user = models.OneToOneField(User)#关联到django-admin自带的user表 name = models.CharField(max_length=32) signature = models.CharField(max_length=255,blank=True,null=True)#个性签名 head_img = models.ImageField(height_field=150,width_field=150,blank=True,null=True)#头像 def __unicode__(self): return self.name class Meta: verbose_name_plural = '用户'
设置settings.py
＃注册app INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog', ] #设置数据库 DATABASES = { 'default': { #'ENGINE': 'django.db.backends.sqlite3', #'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 'ENGINE': 'django.db.backends.mysql', 'NAME':'blog', 'HOST':'', 'PORT':'', 'USER':'root', 'PASSWORD':'0711' } } ＃模版路径 'DIRS': [ os.path.join(BASE_DIR,'templates'), ], ＃静态文件 STATICFILES_DIRS=( os.path.join(BASE_DIR,'statics'), #该定义要求statics目录在project目录下 )
一切前期准备就绪，在数据库中创建blog库(注意字符编码):
mysql> create database blog character set utf8;
同步数据库，创建表:
python manage.py makemigrations
python manage.py migrate
注册admin后台
admin.py
from django.contrib import admin from blog import models # Register your models here. class ArticleAdmin(admin.ModelAdmin): list_display = ('title','category','author','pub_date','last_modify','status') #每个表在页面上展示的字段 class CommentAdmin(admin.ModelAdmin): list_display = ('article','parent_comment','comment_type','comment','user','date') class CategoryAdmin(admin.ModelAdmin): list_display = ('name','set_as_top_menu','position') admin.site.register(models.Article,ArticleAdmin) admin.site.register(models.Category,CategoryAdmin) admin.site.register(models.Comment,CommentAdmin) admin.site.register(models.UserInfo)
二、华丽铠甲，折戟断箭。——前端展示模版的选择
Bootstrap中挑选合适的页面模版，全部下载到本地。
设置模版和静态文件:
在project目录下创建templates和statics目录分别存放模版文件和静态文件
settings.py
＃templates 'DIRS': [ os.path.join(BASE_DIR,'templates'), ],
＃statics STATIC_URL = '/static/' ＃该设置对static目录在app目录下有效 STATICFILES_DIRS =( os.path.join(BASE_DIR,'statics'), ＃该设置对statics目录在project目录下有效 )
在statics目录中添加静态文件:
在templates目录中添加模版文件:
将下载的html文件修改为base.html作为父模版，和下载的目录一起放在templates下创建的blog目录下，然后创建index.html作为项目首页。
index.html:
{% extends 'blog/base.html' %} ＃继承父模版base.html
将base.html中js和css部分的url修改为本地的文件资源，如:
<!-- Bootstrap core CSS --> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/static/bootstrap/css/navbar-fixed-top.css" rel="stylesheet">
urls.py
url采用根据不同项目做分发的规则，project目录下的urls.py:
from django.conf.urls import url,include from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^blog/$',include('blog.urls')), ]
在app中新创建urls.py，然后设置如下:
from blog import views urlpatterns = [ url(r'^$',views.index), ]
url设置完毕，创建试图函数index,views.py:
def index(request): return render(request,'blog/index.html')
一个简单的页面套用完毕。
三、临阵布局，指挥若定。——动态导航栏及登录
对页面进行改造，将导航栏设为动态，并添加登陆与退出功能。
1、动态导航
根据表结构的设计，在category表中，若set_as_top_menu字段为True，则该板块名称即可显示在导航栏中。即每个现实在导航栏中的category，其set_as_top_menu字段必须为Ture。并且，每个category都有一个position标示，这样就可以根据前端请求的url中的id来现实对应的目录名称。
blog/urls.py:
from blog import views urlpatterns = [ url(r'category/(d+)',views.category), ]
views中，根据url中的id，查询category表，并将查询到的category名字返回给前端。
views.py:
category_list = models.Category.objects.filter(set_as_top_menu=True).order_by('position') #将其定义为全局变量，便于多个函数引用 def index(request): return render(request,'blog/index.html',{'category_list':category_list}) def category(request,id): category_obj = models.Category.objects.get(id = id) return render(request,'blog/index.html',{'category_list':category_list,'category_obj':category_obj})
前端页面base.html中，循环所有在导航栏中显示的category，并和当前请求的category比较(根据id值)，若两者相等，则跳转url并加底色。
base.html:
{% for category in category_list %}
{% if category.id == category_obj.id %} #当前请求id等于导航栏中某一个category的id值
<li class="active"><a href="/blog/category/{{ category.id }}">{{ category.name }}</a></li>
{% else %}
<li class=""><a href="/blog/category/{{ category.id }}">{{ category.name }}</a></li>
{% endif %}
{% endfor %}
这样，若点击导航栏中id为3的category，则url跳转至 http://localhost:8000/blog/category/3
2、登录及退出
若未登录，主页面右上角显示登录/注册按钮，可跳转至登录或注册页面；若已登录，则在该处显示用户名。
全局urls.py的设置:
from blog import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^blog/',include('blog.urls')), url(r'^login/$',views.user_login,name='login'), url(r'^logout/$',views.user_logout,name='logout'), ]
分别对登录和退出添加别名，方便前端页面中调用。
views.py中，引用django框架中的用户登录验证及退出功能。
from django.shortcuts import render,HttpResponseRedirect # Create your views here. from blog import models from django.contrib.auth import login,logout,authenticate from django.contrib.auth.decorators import login_required category_list = models.Category.objects.filter(set_as_top_menu=True).order_by('position') def index(request): return render(request,'blog/index.html',{'category_list':category_list}) def category(request,id): category_obj = models.Category.objects.get(id = id) return render(request,'blog/index.html',{'category_list':category_list,'category_obj':category_obj}) def user_login(request): if request.method == 'POST': user = authenticate(username = request.POST.get('username'),password = request.POST.get('password')) if user is not None: ＃登录成功 login(request,user) return HttpResponseRedirect('/blog') else: login_error = 'wrong username or password!' return render(request,'blog/login.html',{'login_error':login_error}) return render(request,'blog/login.html') def user_logout(request): logout(request) return HttpResponseRedirect('/blog')
登录页面login.html:
{% extends 'blog/base.html' %} {% block page-container %} <form action="" method="post"> {% csrf_token %} <div> <input type="text" name="username"> </div> <div> <input type="password" name="password"> </div> <div> <input type="submit" value="login"> </div> </form> <div> {% if login_error %} <p style="color: red">{{ login_error }}</p> {% endif %} </div> {% endblock %}
继承base.html 父模版，自定内容主题。
base.html中，在右上角添加登陆/注册按钮
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li class="active"><a href="#">{{ request.user.userinfo.name }}</a></li> ＃反向查询，查询 UserInfo表中的name字段，这里需要将表名小写
<li class="active"><a href="{% url 'logout' %}">注销</a></li>
{% else %}
<li class=""><a href="{% url 'login' %}">登陆/注册</a></li>
{% endif %}
</ul>
效果:
三、左迂回，右包抄，稳坐中军帐。——内容排版展示
显示文章及图片
主页及各板块下显示相应文章及图片
views.py
category_list = models.Category.objects.filter(set_as_top_menu=True).order_by('position') def index(request): #获取position为1的category,category_obj.id即position为1的categoryid值 category_obj = models.Category.objects.get(position = 1) ''' 返回position为1的category 前端请求主页时,首先从position=1开始循环所有category列表,此时'全部'板块的position为1,将该category加底色 ''' article_list = models.Article.objects.all() #所有文章 return render(request,'blog/index.html',{'category_list':category_list,'article_list':article_list,'category_obj':category_obj}) def category(request,id): category_obj = models.Category.objects.get(id = id) if category_obj.position == 1: #如果是全部,则显示全部文章 article_list = models.Article.objects.all() else: article_list = models.Article.objects.filter(category_id=category_obj.id) #article表中category_id字段 return render(request,'blog/index.html',{'category_list':category_list,'category_obj':category_obj,'article_list':article_list})
前端页面展示设置中关于图片展示的问题:
''' 图片上传到uploads目录,前端请求的url为'/static/uploads/3_DDWq8O3.jpg', uploads目录不在django静态文件的配置中,前端不能访问,因此要在setting中添加该目录, 这样实际图片位置为'/static/3_DDWq8O3.jpg', 自定义模版,将'/static/uploads/3_DDWq8O3.jpg'变为/static/3_DDWq8O3.jpg' 前端中图片src为'<img src="/static/{{ article.head_img }}">', 这样,只需要将'uploads/3_DDWq8O3.jpg'变为'3_DDWq8O3.jpg'即可 '''
settings.py:
STATICFILES_DIRS =( os.path.join(BASE_DIR,'statics'), os.path.join(BASE_DIR,'uploads'), )
自定义django模版:
blog目录下创建templatetags/custom.py文件,并在该目录下创建__init__.py文件。
customer.py：
#! _*_coding:utf-8 _*_ from django import template register = template.Library() @register.filter def truncate_url(img_obj): return img_obj.name.split('/',1)[-1]
#return img_obj.name.split('/')[1]
#截取结果:['uploads','xxx.jpg']
＃即将uploads/xxx.jpg 截为xxx.jpg，传给前端之后，就是static/xx.jpg ＃split('/',1)表示只截取一次，如'1/2/3'截取后为['1','2/3']
index.html页面:
{% extends 'blog/base.html' %} {% load custom %} {% block page-container %} {% for article in article_list %} <div class="article-box"> <div class="article-head-img"> <img src="/static/{{ article.head_img | truncate_url}}"> #自定义模版，将articel.head_img交给truncate_url函数处理
</div> <div class="article-bruff"> {{ article.title }} </div> </div> {% endfor %} {% endblock %}
显示评论及点赞数
(样式参考虎嗅)
statics/bootstrap/css/目录下创建custom.css，用来定义图片及标题显示样式
custom.css
.page-container{ border: 1px dashed darkcyan; padding-right: 150px; padding-left: 150px; } /*去除漂浮*/ .clear-both{ clear: both; } /*左漂浮*/ .wrap-left{ width: 75%; float: left; } /*右漂浮*/ .wrap-right{ width: 25%; float: right; background-color: #9d9d9d; } .footer{ height: 300px; background-color: #ac2925; } /*压缩图片*/ .article-head-img img{ height: 150px; width: 200px; } /*每条新闻间距*/ .article-box{ padding-bottom: 10px; } /*图片和标题之间距离*/ .article-brief{ margin-left: -10px; } /*文章标题*/ .article-title{ font-size: 20px; } /*a标签去掉下划线*/ a:hover{ text-decoration: none; } /*字体样式*/ .body{ color: rgb(51, 51, 51); font-family: Arial, 微软雅黑, "Microsoft yahei", "Hiragino Sans GB", "冬青黑体简体中文 w3", "Microsoft Yahei", "Hiragino Sans GB", "冬青黑体简体中文 w3", STXihei, 华文细黑, SimSun, 宋体, Heiti, 黑体, sans-serif; } /*简介样式*/ .article-brief-text{ margin-top: 8px; color: #999; }
修改base.html主题内容，引用custom.css中定义的样式
base.html
<!DOCTYPE html> <!-- saved from url=(0048)http://v3.bootcss.com/examples/navbar-fixed-top/ --> <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> <title>文艺社区</title> <!-- Bootstrap core CSS --> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/static/bootstrap/css/navbar-fixed-top.css" rel="stylesheet"> <link href="/static/bootstrap/css/custom.css" rel="stylesheet"> <!--引用自定义的css样式文件--> </head> <body> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://v3.bootcss.com/examples/navbar-fixed-top/#">文艺社区</a> </div> <div id="navbar" class="navbar-collapse collapse"> {% block page-menu %} <ul class="nav navbar-nav"> {% for category in category_list %} <!--循环所有category--> {% if category.id == category_obj.id %} <!--前端点击的一个category与所有category列表中某一个相等--> <li class="active"><a href="/blog/category/{{ category.id }}">{{ category.name }}</a></li> {% else %} <li class=""><a href="/blog/category/{{ category.id }}">{{ category.name }}</a></li> {% endif %} {% endfor %} </ul> {% endblock %} <ul class="nav navbar-nav navbar-right"> {% if request.user.is_authenticated %} <li class="active"><a href="#">{{ request.user.userinfo.name }}</a></li> <li class="active"><a href="{% url 'logout' %}">注销</a></li> {% else %} <li class=""><a href="{% url 'login' %}">登陆/注册</a></li> {% endif %} </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="page-container"> <!--内容部分--> {% block page-container %} <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> <h1>Welcome</h1> <p> <a class="btn btn-lg btn-primary" href="http://v3.bootcss.com/components/#navbar" role="button">View navbar docs »</a> </p> </div> {% endblock %} </div> <!-- /container --> <footer class="footer"></footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="/static/bootstrap/js/jquery-2.2.3.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> </body></html>
index.html
{% extends 'blog/base.html' %} {% load custom %} {% block page-container %} <div class="wrap-left"> {% for article in article_list %} <div class="article-box row"> <div class="article-head-img col-lg-4"> <!--图片在左--> <img src="/static/{{ article.head_img | truncate_url}}"> <!--图片展示地址--> </div> <div class="article-brief col-lg-8"> <!--标题在右--> <a class="article-title" href="#">{{ article.title }}</a> <!--文章标题--> <div class="article-title-info"> <span>{{ article.author.name }}</span> <span>{{ article.pub_date }}</span> <span>{% filter_comment article as comments %}</span> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <!--评论图表--> <span>{{ comments.comment_count }}</span> <!--评论数--> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> <!--点赞图标--> <span>{{ comments.thumb_count }}</span> <!--点赞数--> <div class="article-brief-text"> {{ article.brief }} </div> </div> </div> </div> <hr> {% endfor %} </div> <div class="wrap-right"> rightfd </div> <div class="clear-both"></div> {% endblock %}
点赞及评论的显示:
由于点赞和评论存在同一张表中，需分开统计。自定义标签:
custom.py
@register.simple_tag def filter_comment(article_obj): #传递一个模型名字作为参数 query_set = article_obj.comment_set.select_related() #反向查询:comment关联了article,通过article查询comment,字段名_set.select_related()优化查询性能 comments = { 'comment_count':query_set.filter(comment_type=1).count(),#统计type为1的数量 'thumb_count':query_set.filter(comment_type=2).count(),#统计type为2的数量 } return comments
单个页面显示文章详细信息:
新建页面article_detail.html来展示文章详细信息(包括标题，作者，发布时间，评论数量，图片等)
配置blog/urls.py:传入文章id
urlpatterns = [ url(r'^$',views.index), url(r'category/(d+)',views.category), url(r'article_detail/(d+)',views.article_detail,name='article_detail'), ]
views.py:
def article_detail(request,article_id): article_obj = models.Article.objects.get(id=article_id) return render(request,'blog/article_detail.html',{'article_obj':article_obj,'category_list':category_list}) #category_list导航栏
article_detail.html页面依然继承base.html，并加载custom自定义的标签，
article_detail.html:
{% extends 'blog/base.html' %} {% load custom %} {% block page-container %} <div class="wrap-left"> <div class="article-title-bg"> {{ article_obj.title }} </div> <div class="article-title-brief"> <span>作者:{{ article_obj.author.name }}</span> <span>{{ article_obj.pub_date }}</span> {% filter_comment article_obj as comments %} <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span>{{ comments.comment_count }}</span> </div> <div class="article-content"> <img class="article-detail-head-img" src="/static/{{ article_obj.head_img | truncate_url }}"> {{ article_obj.content }} </div> </div> <div class="wrap-right"> rightfd </div> <div class="clear-both"></div> {% endblock %}
在custom.css中添加文章页面中标题，图片及文章正文等样式:
custome.css
/*文章标题样式*/ .article-title-bg{ font-size: 28px; margin: 0; position: inherit; line-height: 1.5; color: #333; } /*文章内容样式*/ .article-content{ font-size: 16px; line-height: 30px; } /*文章标题下的简介样式*/ .article-title-brief{ margin: 0 15px 0 10px; color: #999; } /*文章中图片样式*/ .article-detail-head-img{ width: 100%; margin-top: 20px; }
如何避免csrf攻击?
关于csrf攻击，请见<关于CSRF的攻击>
1、页面中加入token:
base.html：
<body> {% csrf_token %} ,,, </body>
这时，浏览器请求该页面后，在<body>标签中会收到如下信息:
<input type="hidden" name="csrfmiddlewaretoken" value="Ire076FEoI50ntbU9qJHQZe0xEV1Et37">
该信息即服务端发给浏览器的token，浏览器再次请求服务端时，需将该token一并发送给服务端，以便服务端来验证浏览器身份:
article_detail.html:
<script> {#获取token#} function getCsrf(){ return $("input[name='csrfmiddlewaretoken']").val(); } $(document).ready(function(){ $('.comment-box button').click(function(){ var comment_text = $('.comment-box textarea').val(); if (comment_text.trim().length<5){ alert('评论内容不能少于5个字'); }else { $.post('{% url 'post_comment' %}', {# 提交的url #} { 'comment_type':1, article_id:'{{ article_obj.id }}', parent_comment_id:null, 'comment':comment_text.trim(), 'csrfmiddlewaretoken':getCsrf() {# 提交到服务端 #} }, function(callback){ console.log(callback); } ) } }); }); </script>
关于登陆后方可评论的逻辑:
1)默认用户在不登陆的情况下不能对文章进行评论，评论框提示'登陆后评论'，并将'评论'连接到login_url。
2)用户登陆成功后需跳转到评论页面。
如何实现？
在'登陆'超链接中，拼接url，加入'next'，其参数为当前request.path。
这样跳转到登陆页面时，url中会带有上篇文章的path。
在login视图函数的'HttpResponseRedirect' 方法加入该path参数，使其实现:若从评论登陆而来，则登陆成功后跳转回评论页面；若直接请求的主页，则跳转至'blog'主页面。
article_detail.html:
<div class="comment-box"> {% if request.user.is_authenticated %} <!--如果已登陆--> <textarea class="comment-box" rows="3"></textarea> <!--评论文本框,3行的高度--> <button type="button" style="margin-top: 10px" class="btn btn-success pull-right">评论</button> {% else %} <div class="jumbotron"> <h4 class="text-center"><a class="btn-link" href="{% url 'login' %}?next={{ request.path }}">登陆</a>后评论</h4> </div> {% endif %} </div>
views.py中login函数的修改:
def user_login(request): if request.method == 'POST': user = authenticate(username = request.POST.get('username'),password = request.POST.get('password')) if user is not None: login(request,user) return HttpResponseRedirect(request.GET.get('next') or '/blog') else: login_error = 'wrong username or password!' return render(request,'blog/login.html',{'login_error':login_error}) return render(request,'blog/login.html')
提交评论到后端数据库:
1、在视图函数add_comment中，初始化一个models.Comment对象，用来存放前端提交过来的数据(按照comment表的格式定义)，然后调用.save()方法写入数据库。
2、成功写入数据库后，向前端返回字符串表示提交评论成功，前端提示用户。
以上过程，在前端和后端函数交互过程(通过ajax提交(post)或者获取(get))中传递的信息存放在callback()函数中。
views.py:
def add_comment(request): if request.method=='POST': new_comment_obj = models.Comment( article_id = request.POST.get('article_id'), parent_comment_id = request.POST.get('parent_comment_id') or None, #父评论可以为空 comment_type = request.POST.get('comment_type'), user_id = request.user.userinfo.id, comment = request.POST.get('comment') ) new_comment_obj.save() return HttpResponse('add comment success')
前端页面article_detail.html:
<script> {#获取token#} function getCsrf(){ return $("input[name='csrfmiddlewaretoken']").val(); } $(document).ready(function(){ $('.comment-box button').click(function(){ var comment_text = $('.comment-box textarea').val(); if (comment_text.trim().length<5){ alert('评论内容不能少于5个字'); }else { $.post('{% url 'post_comment' %}', {# 提交的url #} { 'comment_type':1, article_id:'{{ article_obj.id }}', parent_comment_id:null, 'comment':comment_text.trim(), 'csrfmiddlewaretoken':getCsrf() {# 提交到服务端 #} }, function(callback){ console.log(callback); if (callback == 'add comment success'){ #后端返回的数据 alert('添加评论成功!') } } ) } }); }); </script>
前端页面展示评论的主要逻辑流程:
1、当页面加载时，在页面底部展示该文章所有的评论信息。
2、对文章提交评论后，ajax重新从后台查询最新的评论在前端页面展示。
3、对评论进行评论，点击评论图标时，会将comment-box(包含评论框和提交按钮)复制一份放在被评论的下方，同时原comment-box将被删除。
4、提交对评论的评论时，前端页面重新获取comment-list，并将原来的comment-box放回原来位置。
在展示父评论与子评论时，需要拼接字符串，父子评论之间使用margin-left拼接，以显示对应关系。
设置提交评论和获取评论url:
urlpatterns = [ url(r'comment/$',views.add_comment,name='post_comment'), url(r'comment_list/(d+)/$',views.get_comments,name='get_comments'), ]
视图函数views.py:
def add_comment(request): if request.method=='POST': new_comment_obj = models.Comment( article_id = request.POST.get('article_id'), parent_comment_id = request.POST.get('parent_comment_id') or None, comment_type = request.POST.get('comment_type'), user_id = request.user.id, comment = request.POST.get('comment') ) new_comment_obj.save() return HttpResponse('add comment success') #返回给前端之前,首先生成评论树,然后拼接成字符串 def get_comments(request,article_id): article_obj = models.Article.objects.get(id=article_id) comment_tree = comment_hander.build_tree(article_obj.comment_set.select_related())#生成树 tree_html = comment_hander.render_comment_tree(comment_tree) #拼接字符串 return HttpResponse(tree_html)
拼接字符串在后端函数中处理:
新建comment_hander.py，用于处理评论字符串的拼接:
#! _*_ coding:utf-8 _*_ ''' 生成评论树 ''' def add_node(tree_dic,comment): if comment.parent_comment is None: #如果该评论没有父评论,则将自己放在顶层(父评论)位置 tree_dic[comment]={} else: #如果有父评论,则循环该字典,找到父评论,将自己放父评论后面 for k,v in tree_dic.items(): if k == comment.parent_comment: #找到父评论 tree_dic[comment.parent_comment][comment]={} else: add_node(v,comment) #继续递归查找 def build_tree(comment_set): tree_dic = {} for comment in comment_set: add_node(tree_dic,comment) return tree_dic #用于递归字典 #遍历字典,取完第一层递归取第二层,<div>父</div>与<div>子</div>之间使用margin-left连接 def render_tree_node(tree_dic,margin_val): html = '' for k,v in tree_dic.items(): ele = "<div class='comment-node' style='margin-left:%spx'>" % margin_val + k.comment + "<span style='margin-left:10px'>%s</span>" % k.user.name + "<span comment-id= '%s'" % k.id + "style='margin-left:10px' class='glyphicon glyphicon-comment add-comment' aria-hidden='true'></span>" +"</div>" #子评论 html += ele html += render_tree_node(v,margin_val+10) return html #拼接字符串 def render_comment_tree(tree_dic): html='' for k,v in tree_dic.items(): ele = "<div class='root-comment'>" + k.comment + '<span style="margin-left:10px">'+ k.user.name +'</span>' +'<span comment-id= "%s"' % k.id + 'style="margin-left:10px" class="glyphicon glyphicon-comment add-comment" aria-hidden="true"></span>' + "</div>" #只对父评论生效 html += ele html += render_tree_node(v,10) return html