1 左侧过滤,统一了路由
2 inclusion_tag的使用
3 点赞点踩功能
1 评论的render显示
1.1 后端
def article_detail(request, username, id):
article = models.Article.objects.filter(id=id).first()
comment_list=article.commit_set.all()
return render(request, 'article.html', {'article': article, 'username': username,'comment_list':comment_list})
1.2 前端
<div>
<h3>评论列表</h3>
<div>
<ul class="list-group">
{% for comment in comment_list %}
<li class="list-group-item">
<div style="margin-bottom: 5px">
<span>#{{ forloop.counter }}楼</span>
<span>{{ comment.create_time|date:'Y-m-d H:i:s' }}</span>
<span><a href="/{{ comment.user.username }}">{{ comment.user.username }}</a></span>
<span class="pull-right"><a href="">回复</a></span>
</div>
<div>
{% if comment.commit_id %}
<div class="well well-sm">
<p>@{{ comment.commit_id.user.username }}</p>
<p>{{ comment.commit_id.content }}</p>
</div>
{% endif %}
{{ comment.content }}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
2 根评论的ajax提交和显示
$('#id_btn_submit').click(function () {
$.ajax({
url: '/comment/',
method: 'post',
data: {article_id:'{{ article.id }}',content:$('#id_textarea').val(), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
success:function (data) {
console.log(data)
if(data.status==100){
let username=data.username
let res_content=data.res_content
let res=`
<li class="list-group-item">
<div class="glyphicon glyphicon-headphones"><span> ${username}</span></div>
<div>
${res_content}
</div>
</li>`
//把这个字符串追加到
$('.list-group').append(res)
//清空输入框
$('#id_textarea').val('')
}
}
})
})
3 评论后端
def comment(request):
if request.is_ajax():
article_id=request.POST.get('article_id')
content=request.POST.get('content')
res=models.Commit.objects.create(user=request.user,article_id=article_id,content=content)
return JsonResponse({'status':100,'msg':'评论成功','username':request.user.username,'res_content':res.content})
4 子评论ajax提交和显示
4.1 后端
def comment(request):
if request.is_ajax():
respone = {'status': 100, 'msg': '评论成功'}
article_id = request.POST.get('article_id')
content = request.POST.get('content')
parent_id = request.POST.get('parent_id')
res = models.Commit.objects.create(user=request.user, article_id=article_id, content=content,
commit_id_id=parent_id)
respone['username'] = request.user.username,
respone['res_content'] = res.content
if parent_id:
respone['parent_name'] = res.commit_id.user.username
respone['parent_content'] = res.commit_id.content
return JsonResponse(respone)
4.2 前端
var parent_id=''
$('#id_btn_submit').click(function () {
let content=$('#id_textarea').val()
if(parent_id){
//子评论
//找content这个文本中第一个
的位置
let count=content.indexOf('
')+1
//从这个位置往后截断
content=content.slice(count)
console.log(content)
}
$.ajax({
url: '/comment/',
method: 'post',
data: {
article_id: '{{ article.id }}',
content:content ,
'csrfmiddlewaretoken': '{{ csrf_token }}',
'parent_id':parent_id
},
success: function (data) {
console.log(data)
if (data.status == 100) {
let username = data.username
let res_content = data.res_content
let res=''
if(parent_id){
let parent_name=data.parent_name
let parent_content=data.parent_content
res = `
<li class="list-group-item">
<div class="glyphicon glyphicon-headphones"><span> ${username}</span></div>
<div>
<div class="well">
@${parent_name}--${parent_content}
</div>
${res_content}
</div>
</li>\`
`
}
else {
res = `
<li class="list-group-item">
<div class="glyphicon glyphicon-headphones"><span> ${username}</span></div>
<div>
${res_content}
</div>
</li>`
}
//把这个字符串追加到
$('.list-group').append(res)
//清空输入框
$('#id_textarea').val('')
//把parent_id置空
parent_id=''
}
}
})
})
$('.reply_span').click(function () {
let username=$(this).attr('username')
$('#id_textarea').val('@'+username+'
').focus()
parent_id=$(this).attr('parent_id')
})
5 后台管理首页文章显示
5.1 前端
{% extends 'backend/backend_base.html' %}
{% block article %}
<table class="table table-striped">
<thead>
<tr>
<th>文章id</th>
<th>文章标题</th>
<th>文章作者</th>
<th>点赞数</th>
<th>点踩数</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for article in article_list%}
<tr>
<th scope="row">{{ article.id }}</th>
<td><a href="/{{ article.blog.userinfo.username }}/articles/{{ article.id }}.html">{{ article.title }}</a></td>
<td>{{ article.blog.userinfo.username }}</td>
<td>{{ article.up_num }}</td>
<td>{{ article.down_num }}</td>
<td><a href="">删除</a></td>
<td><a href="">编辑</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
5.2 后端
@login_required(login_url='/login/')
def backend(request):
article_list = models.Article.objects.filter(blog=request.user.blog)
return render(request, 'backend/backend_index.html', locals())
6 新增文章(富文本编辑器,xss攻击)
@login_required(login_url='/login/')
def add_article(request):
if request.method == 'GET':
# ss='<a href="http://www.baicu.com">点我看美女</a>'
category_list = models.Category.objects.filter(blog=request.user.blog)
tag_list = models.Tag.objects.filter(blog=request.user.blog)
return render(request, 'backend/add_article.html', locals())
else:
title = request.POST.get('title')
content = request.POST.get('content')
# 第一个参数是要解析的html文档内容(str)
# 第二个参数是使用的解析器(html.parser和lxml)
soup = BeautifulSoup(content, 'html.parser')
# 去掉所有标签后的文本内容
desc = soup.text[:250]
# 找出文档中所有script标签()
script_list = soup.find_all('script')
for script in script_list:
print('删了一个')
script.decompose() # 把当前标签对象,从文档中删除
category_id = request.POST.get('category')
tag_ids = request.POST.getlist('tag')
article = models.Article.objects.create(title=title, desc=desc, content=str(soup), blog=request.user.blog,
category_id=category_id)
# 手写的第三张表,这个已经没有了
# article.tag.add()
# 手动操作
# for tag_id in tag_ids:
# models.TagToArticle(article_id=article.id,tag_id=tag_id)
# 批量插入
tag_list = []
for tag_id in tag_ids:
tag_list.append(models.TagToArticle(tag_id=tag_id, article_id=article.id))
models.TagToArticle.objects.bulk_create(tag_list)
return redirect('/backend/')
7 富文本编辑器上传图片
7.1 前端
KindEditor.ready(function (K) {
window.editor = K.create('#id_textarea', {
'100%',
height: '600px',
resizeType: 1,
uploadJson:'/upload_img/',
extraFileUploadParams : {
csrfmiddlewaretoken:'{{ csrf_token }}'
}
});
});
7.2 后端
# @csrf_exempt
def upload_img(request):
print(request.FILES)
try:
myfile = request.FILES.get('imgFile')
path = os.path.join(settings.MEDIA_ROOT, 'img')
with open('%s/%s' % (path, myfile.name), 'wb') as f:
for line in myfile:
f.write(line)
return JsonResponse({"error": 0, "url": '/media/img/'+myfile.name})
except Exception as e:
return JsonResponse({"error": 1,"message": str(e)})
8django发送邮件
https://www.cnblogs.com/liuqingzheng/articles/10072695.html
# 配置文件
EMAIL_HOST = 'smtp.qq.com' # 如果是 163 改成 smtp.163.com
EMAIL_PORT = 465
EMAIL_HOST_USER = '306334678@qq.com' # 帐号
EMAIL_HOST_PASSWORD = '' # 密码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
#这样收到的邮件,收件人处就会这样显示
# DEFAULT_FROM_EMAIL = '暗示法司法'
EMAIL_USE_SSL = True #使用ssl
#EMAIL_USE_TLS = False # 使用tls
# 视图函数
from django.core.mail import send_mail
send_mail("邮件标题" ,'邮件内容',settings.EMAIL_HOST_USER,["2277194535@qq.com"])