在线云评测系统日志（五）：讨论区页面及点赞功能
2017-06-23 10:55
232 查看
社区部分功能的开发
包括发帖，回帖，以及点赞功能的实现
以下代码是django view.py 中的相关视图的定义
# 题目列表界面类
# 模板文件是‘discussions.html’
# 采用django自带的列表分页类
# 分页个数是 5
# 展示用户发的帖子
# 可以发布新的帖子
class DiscussionView(generic.ListView):
model = Discussion
template_name = 'judgeOL/discussions.html'
context_object_name = 'discussion_list'
paginate_by = 5
def get_queryset(self):
problem_id = self.kwargs['problem_id']
return Discussion.objects.filter(problem_id=problem_id)
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(DiscussionView, self).get_context_data(**kwargs)
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
context['problem_name'] = Problem.objects.get(pk=self.kwargs['problem_id']).name
return context
# 题目列表界面类
# 模板文件是‘responses.html’
# 采用django自带的列表分页类
# 分页个数是 5
# 展示用户的回复
# 可以编辑新的回复
class ResponseView(generic.ListView):
model = Response
template_name = 'judgeOL/responses.html'
context_object_name = 'response_list'
paginate_by = 5
def get_queryset(self):
return Response.objects.all().filter(discussion_id=self.kwargs['discussion_id'])
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(ResponseView, self).get_context_data(**kwargs)
discussion = Discussion.objects.get(pk=self.kwargs['discussion_id'])
# 往context中写入帖子信息
context['discussion'] = discussion
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
# 题目的访问量增加1
discussion.view_count += 1
discussion.save()
return context
# 新帖子编辑界面
# 模板文件是‘edit.html’
class EditView(generic.TemplateView):
template_name = 'judgeOL/edit.html'
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(EditView, self).get_context_data(**kwargs)
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
return context
再者是django url.py 中的相关路径的定义
# ex: /judgeOL/discussions
url(r'^(?P<problem_id>[0-9]+)/discussions/$',
views.DiscussionView.as_view(), name='discussions'),
# ex: /judgeOL/new_discussion
url(r'^(?P<problem_id>[0-9]+)/new_discussion/$',
views.new_discussion, name='new_discussion'),
# ex: /judgeOL/edit
url(r'^(?P<problem_id>[0-9]+)/edit/$',
views.EditView.as_view(), name='edit'),
# ex: /judgeOL/responses
url(r'^(?P<problem_id>[0-9]+)/(?P<discussion_id>[0-9]+)/responses/$',
views.ResponseView.as_view(), name='responses'),
# ex: /judgeOL/new_response
url(r'^(?P<problem_id>[0-9]+)/(?P<discussion_id>[0-9]+)/new_response/$',
views.new_response, name='new_response'),
# ex: /judgeOL/vote
url(r'^vote/$', views.vote, name='vote'),
然后是 Html 页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../static/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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">judgeOL</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">judgeOL</a>
<a class="navbar-brand" href="{% url 'judgeOL:problems' %}">Problems</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% if user_name %}
<span class="navbar-brand"> welcome: {{ user_name }}</span>
{% else %}
<a href="{% url 'judgeOL:login' %}">
<button class="btn btn-primary btn-lg" >Sign in</button>
</a>
<a href="{% url 'judgeOL:register' %}">
<button class="btn btn-default btn-lg">Sign up</button>
</a>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<br><br><br><br>
<div class="col-md-8 col-md-offset-2 main">
<h1>Discussions List : {{ problem_name }}</h1>
<hr/>
<a href="{% url 'judgeOL:edit' problem_id %}">
<button type="button" class="btn btn-info">New Discussion</button>
</a>
<hr/>
{% if discussion_list %}
{% for discussion in discussion_list %}
<a href="{% url 'judgeOL:responses' problem_id=problem_id discussion_id=discussion.id%}"
class="package list-group-item" style="margin-bottom: 10px">
<div class="row">
<div class="col-md-8">
<h3 class=package-name>{{ discussion.name }}</h3>
<hr>
<p class=package-description>{{ discussion.pub_text|linebreaks }}</p>
<div>
<span><i class="glyphicon glyphicon-star"></i> {{ discussion.vote_count }}</span>
<span><i class="glyphicon glyphicon-eye-open"></i> {{ discussion.view_count }}</span>
</div>
</div>
<div class="col-md-4">
<h4><span class="label-middle"><i class="glyphicon glyphicon-time"></i> {{ discussion.pub_date }}</span></h4>
<h4><span><i class="glyphicon glyphicon-user"></i> {{ discussion.user.name }}</span></h4>
<h4><span><i class="glyphicon glyphicon-globe"></i> {{ discussion.id }}</span></h4>
</div>
</div>
</a>
{% endfor %}
{% endif %}
<hr/>
<div class="panel-default">
<center>
<ul class="pagination">
<li><a href="{{ request.path }}?page=1">«</a></li>
{% if page_obj.has_previous %}
<li><a href="{{ request.path }}?&page={{ page_obj.previous_page_number }}">上一页</a></li>
{% else %}
<li class="previous disabled"><a>上一页</a></li>
{% endif %}
{% for i in page_obj.paginator.page_range %}
<li {% if page_obj.number == i %}class="active"{% endif %}><a href="{{ request.path }}?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% if page_obj.has_next %}
<li><a href="{{ request.path }}?page={{ page_obj.next_page_number }}">下一页</a></li>
{% else %}
<li class="previous disabled"><a>下一页</a></li>
{% endif %}
<li><a href="{{ request.path }}?page={{ page_obj.paginator.num_pages }}">»</a></li>
</ul>
</center>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
包括发帖，回帖，以及点赞功能的实现
以下代码是django view.py 中的相关视图的定义
# 题目列表界面类
# 模板文件是‘discussions.html’
# 采用django自带的列表分页类
# 分页个数是 5
# 展示用户发的帖子
# 可以发布新的帖子
class DiscussionView(generic.ListView):
model = Discussion
template_name = 'judgeOL/discussions.html'
context_object_name = 'discussion_list'
paginate_by = 5
def get_queryset(self):
problem_id = self.kwargs['problem_id']
return Discussion.objects.filter(problem_id=problem_id)
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(DiscussionView, self).get_context_data(**kwargs)
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
context['problem_name'] = Problem.objects.get(pk=self.kwargs['problem_id']).name
return context
# 题目列表界面类
# 模板文件是‘responses.html’
# 采用django自带的列表分页类
# 分页个数是 5
# 展示用户的回复
# 可以编辑新的回复
class ResponseView(generic.ListView):
model = Response
template_name = 'judgeOL/responses.html'
context_object_name = 'response_list'
paginate_by = 5
def get_queryset(self):
return Response.objects.all().filter(discussion_id=self.kwargs['discussion_id'])
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(ResponseView, self).get_context_data(**kwargs)
discussion = Discussion.objects.get(pk=self.kwargs['discussion_id'])
# 往context中写入帖子信息
context['discussion'] = discussion
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
# 题目的访问量增加1
discussion.view_count += 1
discussion.save()
return context
# 新帖子编辑界面
# 模板文件是‘edit.html’
class EditView(generic.TemplateView):
template_name = 'judgeOL/edit.html'
# 往context中写入额外信息
def get_context_data(self, **kwargs):
context = super(EditView, self).get_context_data(**kwargs)
# 往context中写入题目信息
context['problem_id'] = self.kwargs['problem_id']
return context
再者是django url.py 中的相关路径的定义
# ex: /judgeOL/discussions
url(r'^(?P<problem_id>[0-9]+)/discussions/$',
views.DiscussionView.as_view(), name='discussions'),
# ex: /judgeOL/new_discussion
url(r'^(?P<problem_id>[0-9]+)/new_discussion/$',
views.new_discussion, name='new_discussion'),
# ex: /judgeOL/edit
url(r'^(?P<problem_id>[0-9]+)/edit/$',
views.EditView.as_view(), name='edit'),
# ex: /judgeOL/responses
url(r'^(?P<problem_id>[0-9]+)/(?P<discussion_id>[0-9]+)/responses/$',
views.ResponseView.as_view(), name='responses'),
# ex: /judgeOL/new_response
url(r'^(?P<problem_id>[0-9]+)/(?P<discussion_id>[0-9]+)/new_response/$',
views.new_response, name='new_response'),
# ex: /judgeOL/vote
url(r'^vote/$', views.vote, name='vote'),
然后是 Html 页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../static/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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">judgeOL</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">judgeOL</a>
<a class="navbar-brand" href="{% url 'judgeOL:problems' %}">Problems</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% if user_name %}
<span class="navbar-brand"> welcome: {{ user_name }}</span>
{% else %}
<a href="{% url 'judgeOL:login' %}">
<button class="btn btn-primary btn-lg" >Sign in</button>
</a>
<a href="{% url 'judgeOL:register' %}">
<button class="btn btn-default btn-lg">Sign up</button>
</a>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<br><br><br><br>
<div class="col-md-8 col-md-offset-2 main">
<h1>Discussions List : {{ problem_name }}</h1>
<hr/>
<a href="{% url 'judgeOL:edit' problem_id %}">
<button type="button" class="btn btn-info">New Discussion</button>
</a>
<hr/>
{% if discussion_list %}
{% for discussion in discussion_list %}
<a href="{% url 'judgeOL:responses' problem_id=problem_id discussion_id=discussion.id%}"
class="package list-group-item" style="margin-bottom: 10px">
<div class="row">
<div class="col-md-8">
<h3 class=package-name>{{ discussion.name }}</h3>
<hr>
<p class=package-description>{{ discussion.pub_text|linebreaks }}</p>
<div>
<span><i class="glyphicon glyphicon-star"></i> {{ discussion.vote_count }}</span>
<span><i class="glyphicon glyphicon-eye-open"></i> {{ discussion.view_count }}</span>
</div>
</div>
<div class="col-md-4">
<h4><span class="label-middle"><i class="glyphicon glyphicon-time"></i> {{ discussion.pub_date }}</span></h4>
<h4><span><i class="glyphicon glyphicon-user"></i> {{ discussion.user.name }}</span></h4>
<h4><span><i class="glyphicon glyphicon-globe"></i> {{ discussion.id }}</span></h4>
</div>
</div>
</a>
{% endfor %}
{% endif %}
<hr/>
<div class="panel-default">
<center>
<ul class="pagination">
<li><a href="{{ request.path }}?page=1">«</a></li>
{% if page_obj.has_previous %}
<li><a href="{{ request.path }}?&page={{ page_obj.previous_page_number }}">上一页</a></li>
{% else %}
<li class="previous disabled"><a>上一页</a></li>
{% endif %}
{% for i in page_obj.paginator.page_range %}
<li {% if page_obj.number == i %}class="active"{% endif %}><a href="{{ request.path }}?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% if page_obj.has_next %}
<li><a href="{{ request.path }}?page={{ page_obj.next_page_number }}">下一页</a></li>
{% else %}
<li class="previous disabled"><a>下一页</a></li>
{% endif %}
<li><a href="{{ request.path }}?page={{ page_obj.paginator.num_pages }}">»</a></li>
</ul>
</center>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above
c68c
3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../static/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../../../../static/js/jquery.js"></script>
<script type="text/javascript">
function control_editor(){
var show = document.getElementById("editor").style.display;
if(show=="none"){
document.getElementById("editor").style.display="";
document.getElementById("show_editor").innerHTML = "hide_editor";
} else{
document.getElementById("editor").style.display="none";
document.getElementById("show_editor").innerHTML = "show_editor";
}
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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">judgeOL</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">judgeOL</a>
<a class="navbar-brand" href="{% url 'judgeOL:problems' %}">Problems</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<a href="{% url 'judgeOL:login' %}">
<button class="btn btn-primary btn-lg" >Sign in</button>
</a>
<a href="{% url 'judgeOL:register' %}">
<button class="btn btn-default btn-lg">Sign up</button>
</a>
</ul>
</div>
</div>
</nav>
<br><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{% if discussion %}
<h1>{{ discussion.name }}</h1>
<div class="table-bordered">
<blockquote>
<h2>
<span class="label label-warning">
<i class="glyphicon glyphicon-user"></i> {{ discussion.user.name }}
</span>
<button type="button" disabled="disabled" class="btn btn-default pull-right">
<span><i class="glyphicon glyphicon-eye-open"></i> {{ discussion.view_count }} </span>
</button>
<button type="button" class="btn btn-info pull-right" id="{{ discussion.id }}" onclick="check_dis(this)">{% csrf_token %}
<span><i class="glyphicon glyphicon-star"></i> {{ discussion.vote_count }} </span>
</button>
</h2>
<br>
<div class="well">
<p>{{ discussion.pub_text|linebreaks }}</p>
</div>
<div class="well">
<p><code>{{ discussion.pub_code|linebreaks }}</code></p>
</div>
<span class="label label-success">{{ discussion.pub_date}}</span>
</blockquote >
</div>
{% endif %}
<hr>
<div>
<button type="button" id="show_editor" onclick="control_editor()" class="btn btn-primary">show editor</button>
</div>
<div id="editor" style="display:none;" class="container-fluid">
<hr/>
<div class="table-bordered">
<form action="{% url 'judgeOL:new_response' problem_id=problem_id discussion_id=discussion.id%}" method="post">
{% csrf_token %}
<div>
<h2>TEXT:</h2>
<textarea rows="8" name="text" class="form-control col-md-12">text:123124123123</textarea>
</div>
<div>
<h2>CODE:</h2>
<textarea rows="8" name="code" class="form-control col-md-12">code:123124123123</textarea>
</div>
<button type="submit" id="response" class="btn btn-primary pull-right">response</button>
</form>
</div>
</div>
<hr>
<div class="table-bordered">
<blockquote>
<h3>
<span class="label label-success">
<i class="glyphicon glyphicon-user"></i> Rain
</span>
<button type="button" class="btn btn-info pull-right">
<span><i class="glyphicon glyphicon-star"></i> 100 </span>
</button>
</h3>
<p class="well">text</p>
<p class="well"><code>code</code></p>
<span class="label label-success">time</span>
</blockquote >
</div>
{% if response_list %}
{% for response in response_list %}
<div class="table-bordered">
<blockquote>
<h3>
<span class="label label-success">
<i class="glyphicon glyphicon-user"></i> {{ response.user.name }}
</span>
<button type="button" class="btn btn-info pull-right" id="{{ response.id }}" onclick="check(this)">{% csrf_token %}
<span><i class="glyphicon glyphicon-star"></i> {{ response.vote_count }} </span>
</button>
</h3>
<div class="well">
<p>{{ response.pub_text|linebreaks }}</p>
</div>
<div class="well">
<p><code>{{ response.pub_code|linebreaks }}</code></p>
</div>
<span class="label label-success">{{ response.pub_data }}</span>
</blockquote >
</div>
{% endfor %}
{% endif %}
<hr/>
<div class="panel-default">
<center>
<ul class="pagination">
<li><a href="{{ request.path }}?page=1">«</a></li>
{% if page_obj.has_previous %}
<li><a href="{{ request.path }}?&page={{ page_obj.previous_page_number }}">上一页</a></li>
{% else %}
<li class="previous disabled"><a>上一页</a></li>
{% endif %}
{% for i in page_obj.paginator.page_range %}
<li {% if page_obj.number == i %}class="active"{% endif %}><a href="{{ request.path }}?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% if page_obj.has_next %}
<li><a href="{{ request.path }}?page={{ page_obj.next_page_number }}">下一页</a></li>
{% else %}
<li class="previous disabled"><a>下一页</a></li>
{% endif %}
<li><a href="{{ request.path }}?page={{ page_obj.paginator.num_pages }}">»</a></li>
</ul>
</center>
</div>
<hr>
</div>
</div>
</div>
</body>
<script>
function check(obj){
var response_id = obj.id;
var v_type = "response";
if(checkcookie(response_id,v_type) == true){
$.get("{% url 'judgeOL:vote' %}",
{'response_id':response_id}, function(ret){
obj.innerHTML="<span><i class=\"glyphicon glyphicon-star\"></i> "+ ret + "</span>";
})
}else{
alert("你已经点过赞咯！")
}
}
function check_dis(obj){
var discussion_id = obj.id;
var v_type = "discussion";
if(checkcookie(discussion_id,v_type) == true){
$.get("{% url 'judgeOL:vote' %}",
{'discussion_id':discussion_id}, function(ret){
obj.innerHTML="<span><i class=\"glyphicon glyphicon-star\"></i> "+ ret + "</span>";
})
}else{
alert("你已经点过赞咯！")
}
}
//判断是否已经存在了cookie
function checkcookie(id,vtype){
var thiscookie = 'sdcity_judgeOL_voteplus_' + vtype + '_' + id;
var mapcookie = getCookie(thiscookie)
if (mapcookie!=null && mapcookie!=""){
return false;
}else {
setCookie(thiscookie,thiscookie,365);
return true;
}
}
//获取cookie
function getCookie(c_name){
//获取cookie，参数是名称。
if (document.cookie.length > 0){
//当cookie不为空的时候就开始查找名称
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1){
//如果开始的位置不为-1就是找到了、找到了之后就要确定结束的位置
c_start = c_start + c_name.length + 1 ;
//cookie的值存在名称和等号的后面，所以内容的开始位置应该是加上长度和1
c_end = document.cookie.indexOf(";" , c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start , c_end));//返回内容，解码。
}
}
return "";
}
//设置cookie
function setCookie(c_name,value,expiredays){
//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，
var exdate=new Date();
exdate.setDate( exdate.getDate() + expiredays )
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : "; expires=" + exdate.toGMTString())
}
</script>
</html>主要是点赞功能的实现
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
- 兄弟连HTML5——10.11.12.13.14.15canvas实例3——在线画图工具——功能介绍和页面布局
- 页面设计的一些在线编辑功能（css，文字加密等。。）
- Redis应用2-Redis实现开发者头条页面点赞功能
- .NET 实现页面点赞功能
- Redis应用2-Redis实现开发者头条页面点赞功能
- 功能：在线用户显示页面
- 博文详情页面点赞功能添加并完善
- 多附件、带有预览功能的HTML页面
- 一个可以在页面上随意画线、多边形、圆，填充等功能的js
- Google推出在线翻译网页的功能(my late?)
- 小议jsp页面中的下载功能
- 利用HttpSessionListener实现网站在线人数统计功能
- 一段实现DataGrid的“编辑”、“取消”功能脚本，目的是不产生页面刷新
- 一种简单方法实现页面导出(Excel)功能 选择自 xieyun1977 的 Blog
- 发现Google加了英文页面翻译功能(Beta)
- 一段实现DataGrid的“编辑”、“取消”功能脚本，目的是不产生页面刷新
- 一种简单方法实现页面导出(Excel)功能
- [新功能]在管理页面查看自己发表过的评论
- [新功能]新增分类浏览页面