在线云评测系统日志(五):讨论区页面及点赞功能

本文详细介绍了在线云评测系统中社区模块的开发,涵盖了发帖、回帖及点赞功能的实现。通过Django框架,文章讨论了view.py中的视图定义,url.py中的路径配置,以及对应的HTML页面设计,为读者展示了完整的社区交互功能构建过程。
摘要由CSDN通过智能技术生成

社区部分功能的开发


包括发帖,回帖,以及点赞功能的实现


以下代码是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>
主要是点赞功能的实现


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值