#1 js中 es6语法，反引号的用法
var content='sb'
`egon is ${content}`
前端
评论列表
<div>
评论列表
<ul class="list-group">
{% for comment in comment_list %}
<li class="list-group-item">
<div>
<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 id_replay" username="{{ comment.user.username }} "
parent="{{ comment.pk }}"><a>回复</a></span>
</div>
<hr>
<div>
{% if comment.commit_id_id %}
<p>@{{ comment.commit_id.user.username }}</p>
<p>{{ comment.content }}</p>
{% else %}
{{ comment.content }}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
评论框
{% if request.user.is_authenticated %}
<div>
<p class="glyphicon glyphicon-copyright-mark">发表评论</p>
<p><textarea name="" id="id_text" cols="180" rows="10"></textarea></p>
<p>
<button class="btn btn-success" id="id_comment">发表评论</button>
</p>
</div>
{% else %}
<div>
登录后才能发表评论，立即 <a href="/login/">登录</a> 或 <a href="/register/">注册</a>， 访问 网站首页
</div>
{% endif %}
js代码
$('#id_comment').click(function () {
let content = $('#id_text').val()
$.ajax({
url: '/comment/',
method: 'post',
data: {
article_id: '{{ article.id }}',
content: content,
parent: parent_id,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
if (data.code == 100) {
let username = data.username
let res_content = data.content
let ss = ``
ss = `<li class="list-group-item">
<div>
<span class="glyphicon glyphicon-comment">${username</span>
</div>
<div>
<p>@${parent_name}</p>
${res_content}
</div>
</li>`
//清空输入框
$('#id_text').val('')
//把ss追加到评论列表的后面
$('.list-group').append(ss)
}
}
})
})
后端
def comment(request):
res = {'code': 100, 'msg': ''}
if request.is_ajax():
article_id = request.POST.get('article_id')
content = request.POST.get('content')
parent = request.POST.get('parent')
if request.user.is_authenticated:
article = models.Commit.objects.create(user=request.user, article_id=article_id, content=content,
commit_id_id=parent)
models.Article.objects.filter(pk=article_id).update(commit_num=F('commit_num') + 1)
res['msg'] = '评论成功'
res['username'] = article.user.username
res['content'] = article.content
if parent:
res['parent_name'] = article.commit_id.user.username
else:
res['code'] = 109
res['msg'] = '请先登录'
return JsonResponse(res)
2 子评论功能
后端同上
前端js
$('#id_comment').click(function () {
let content = $('#id_text').val()
if (parent_id) {
//这表示子评论
//取到字符串第一个
的位置索引，是一个数字
let i = content.indexOf('
') + 1
//从
+1的位置开始截取，截取到最后
content = content.slice(i)
}
$.ajax({
url: '/comment/',
method: 'post',
data: {
article_id: '{{ article.id }}',
content: content,
parent: parent_id,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
console.log(data)
if (data.code == 100) {
let username = data.username
let res_content = data.content
let parent_name = data.parent_name
let ss = ``
if (parent_id) {
ss = `<li class="list-group-item">
<div>
<span class="glyphicon glyphicon-comment">${username}</span>
</div>
<div>
<p>@${parent_name}</p>
${res_content}
</div>
</li>`
} else {
ss = `<li class="list-group-item">
<div>
<span class="glyphicon glyphicon-comment">${username}</span>
</div>
<div>
${res_content}
</div>
</li>`
}
//清空输入框
$('#id_text').val('')
//把ss追加到评论列表的后面
$('.list-group').append(ss)
//把parent_id置空
parent_id = ''
}
}
})
})
$('.id_replay').click(function () {
let username = $(this).attr('username')
parent_id = $(this).attr('parent')
$('#id_text').val('@' + username + '
').focus()
})
3 后台管理页面搭建
backend/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
<script src="/static/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div>
<div class="header">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">后台管理</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/index/">首页 <span class="sr-only">(current)</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="left_content col-md-3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">