闲的蛋疼,索性写个东西玩,于是,写个类似于BBS的念头就开始了。

  我们考虑到需要实现的功能:

    1 只有登陆的用户才可以点赞,如果没有登陆,那么不可以点赞,点赞次数只可以为1。

    2 只有登陆的用户可以评论文章,其他用户也可通过回复其他人的评论。

    3 评论之间有多级嵌套关系,不是单独存在的,比我评论文章A,别人在我的评论基础上再评论我的评论,那么我的评论和别人评论我的评论之间存在一层关系。

    4 用户可以增删改查自己的文章,可以搜索自己的文章。文章包含三种状态,发布,草稿,隐藏。

    5 每篇文章需要显示发布日期,发布人,点赞次数,评论次数,在首页展示的时候能够图文并茂展示,通过文章优先级来让部分文章置顶显示。

    6 文章要有归属模块,页面展示出板块

    7 and so on ...

  我个人觉得只要实现上述功能,BBS的雏形就出来了。那么开工吧。

  所需要的知识:

      1 django+python

      2 js

      3 jinja

  =================================================================================================

  首先这个毫无疑问使用的Django 作为我的web frame。

  第一要解决的是数据库关系,此时我拿Django默认的sqilite作为我的数据库,数据库关系我的想法是:

    文章表:用户名(外键关联用户表), 发布时间,修改时间,状态,文章内容,文章归属模块,内容简介,优先级,文章头像

    评论表:评论时间,是点赞还是评论,评论内容,归属哪篇文章(关键文章表),父籍评论ID

    版块表:名字,简介,置顶文章,版块位置。

    用户表: 关联Django系统自带的用户,用户名。

  数据库建表关系解决 后,那就初始化,数据库。。。。。。。。

 

  代码我在此我就简单说说几点:

    1 点赞次数限制:

      说到点赞,我们采用三个值来确定这个用户是否点赞过一次了,文章ID+用户ID+当前点赞次数

      我们在评论表存储这个用户点赞次数的时候,连同用户ID一块存储进去,所以我们单单过滤这个表就可以了。

      前端代码:

 <script src="/static/bootstrap/js/jquery-2.1.4.js"></script>
    <script>
        //获取点赞数的函数
        function Get_Praise(article_id,ele){
            $.get("{% url "post_comment" %}",
                    {'id':article_id,'choice':2}, //紧跟的是参数
                    function (data) {
                        $(ele).html('&nbsp;'+data)
                    }
            )
        }
        //提交点赞请求
        function click_praise(ele){
            var article_id = $(ele).siblings().first().attr('article_id');
            var GetCsrf = $("input[name='csrfmiddlewaretoken']").val();
            // begin post
            $.post("{% url 'post_comment' %}",
                    {
                        'comment_type':2,
                        'article':article_id,
                        'user':'{{ request.user.userprofile.id }}',
                        'csrfmiddlewaretoken': GetCsrf,
                    }, //end post
                    function(callback){
               // 如果返回来的参数是limit说明这个用户被限制点赞了,因为点赞次数超过1次了
if(callback=='error'){ alert('点赞失败,可能是网络问题导致的') }else if(callback=='limit'){ alert('您已经点赞过一次了,请勿重复点赞!!') } else{ Get_Praise(article_id,ele) } } ) }

 

      后端代码,   

praise_obj = models.Article.objects.filter(id=article_id)
for pb in praise_obj:
        # 通过反向查询,来获取comment表里面的内容,表后面必须紧接着 _set !
        pb_obj = pb.comment_set.select_related()
        # get the praise's number,and count that!
        praise = pb_obj.filter(comment_type=comment_type).count()
return HttpResponse(praise)

 

  

     2 只有可以登陆才可以评论,并且在评论框中点击登陆,登陆成功后自动跳转到刚才的页面,跳转的关键点在于?next,通过这个我们后端可以让用户重定向到next指定的页面:

      前端代码展示:

        <div class="comment-box">
            {% if request.user.is_authenticated %}
                 <textarea class="form-control" rows="3"></textarea>
                    {% csrf_token %}
                 <button type="button" style="margin-top: 10px" class="btn btn-success pull-right">评论</button>
            {% else %}
                <div class="jumbotron">
<h4 class="text-center"><a class="btn-link" href="{% url 'login' %}?next={{ request.path }}">登录</a>后评论</h4> </div> {% endif %} </div>

 

      后端代码展示:

 if request.method == 'POST':
        user = authenticate(username=request.POST.get('username'),
                            password=request.POST.get('password'))
        if user is not None:
            #pass authentication
            login(request,user)
            return HttpResponseRedirect(request.GET.get('next') or '/bbs')

 

     3 评论多级嵌套关系:

      公司事今天有点多,今晚再弄,

 

    4 用户新建一篇自己的文章,通过form来创建表单

      前端代码如下:

 <form  class="form-horizontal"  method="post"  enctype="multipart/form-data">{% csrf_token %}
            <div class="form-group">
          // 遍历form的值。
                {% for info in article %}
                    {% if info.field.required %}
                        <label style="font-size: larger">{{ info.label }}*</label></br>
                    {% else %}
                        {{ info.label }}</br>
                    {% endif %}
                        {{info}}</br>
                {% endfor %}
            <input name="author" style="display: none;" value="{{ request.user.userprofile.id }}">
            </div>
            <div class="col-sm-11">
                <input type="submit"  class="btn btn-primary " value="Save">
               <a href="/person_zone/{{ request.user.userprofile.id }}"  class="btn btn-danger">Cancel</a>
            </div>
            </form>
{% block bottom-js %}
    <script src="/static/bootstrap/js/jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function () {
            window.resizeTo(10,70)
        })
    </script>
    <script src="/static/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
    // 调用的第三方编辑器,会自动把在id_content里面替换成编辑器,而这个id_content是form里面在渲染html页面的时候自动带出来的

            CKEDITOR.replace('id_content')
    </script>
{% endblock %}
View Code

相关文章:

  • 2021-09-10
  • 2022-02-10
  • 2022-12-23
  • 2022-12-23
  • 2021-05-27
  • 2021-10-20
  • 2021-11-21
  • 2022-02-24
猜你喜欢
  • 2022-01-06
  • 2022-12-23
  • 2021-08-05
  • 2022-01-07
  • 2022-12-23
  • 2021-12-24
  • 2021-05-06
相关资源
相似解决方案