本文详细介绍了在线云评测系统中社区模块的开发，涵盖了发帖、回帖及点赞功能的实现。通过Django框架，文章讨论了view.py中的视图定义，url.py中的路径配置，以及对应的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 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 }}" οnclick="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" οnclick="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 }}" οnclick="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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
