zoukankan      html  css  js  c++  java
  • 抽屉模型

    一,请求头获取用户的设备

      request.environ.get('HTTP_USER_AGENT')

    二,点赞效果

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .zan{
                    background: bisque;
                    cursor: pointer;
                }
            </style>
            <script src="/js/jqurey.js"></script>
            <script>
                $(function(){
                    $('.zan').click(function(){
                        var fs=12;//font-size=12px
                        var tp=5;//top
                        var lf=5;//left;
                        var op=1;
                        var tag=document.createElement('span');
                        tag.innerHTML="+1";
                        tag.style.color='green';
                        tag.style.fontSize=fs+'px';
                        tag.style.top=tp+'px';
                        tag.style.left=lp+'px';
                        tag.style.opacity=op;
                        $(this).append(tag);
                        var obj=setInterval(function(){
                            fs+=5;//font-size=12px
                         tp-=5;//top
                         lf+=5;//left;
                         op-=0.1;
                         tag.style.color='green';
                        tag.style.fontSize=fs+'px';
                        tag.style.top=tp+'px';
                        tag.style.left=lp+'px';
                        tag.style.opacity=op;
                        if(op<0){
                            clearInterval(obj);
                            $tag.remove();
                        }
                        },100)
                    })
                    
                })
            </script>
        </head>
        <body>
            <div>
                <div class="zan"></div>
                <div class="zan"></div>
                <div class="zan"></div>
                <div class="zan"></div>
            </div>
        </body>
    </html>

    三,数据库设计

    class News(models.Model):
        title=models.CharField(max_length=64)
        summary=models.CharField(max_length=128,null=True)
        url=models.URLField(null=True)
        ctime=models.DateTimeField(auto_now_add=True)
        user=models.ForeignKey(to="UserInfo",to_field='nid',related_name='n')#UserInfo是用户信息表
    #related_name是设置反向查找是就用这个名字代替
    news_type_choices=[ (1,'42区'), (2,'段子'), (3,'图片'), (4,'你问我答'), #由于有固定的类型,可以直接用列表的形式存放 ] nt=models.IntegerField(choices=news_type_choices,related_name='nt')
       favor_count
    =models.IntegerField(default=0)
    class comment(models.model):
      #自己与自己关联用self
      parent_comment=models.ForeignKey(to='self',nul=True,retated_name='cp')

     三,评论效果,递归的展示评论

    class Comment(models.Model):
        content=models.CharField(max_length=32)
        user_info=models.ForeignKey('UserInfo')
        news=models.ForeignKey('News')
        parent=models.ForeignKey('self',related_name='o',null=True)
        ctime=models.DateTimeField(auto_now_add=True,null=True)
    class Node:
        @staticmethod
        def digui(ret,row)
        #ret为要返回的结果,row为要遍历的数据
        for rt in ret:;
            if rt['id']==row['parent_id']:
                row['childen']=[]
                rt['childen'].append(row)
                return
            else:
                Node.digui(rt['childen'],row)
        @staticmethod
        def create_tree(comment_list):
            ret=[]
            for row in comment_list:
                if not row['parent_id']:
                    row['childen']=[]
                    ret.append(row)
                else:
                    Node.digui(ret,row)
            return ret

    四,评论效果展示的升级版

    1,列表与字典都是引用类型

    def create_tree(request,comment_list):
        ret=[]
        comment_list_dict={}
        for row in comment_list:
            row.update({'childen':[]})
            comment_list_dict[row['id']]=row
        for item in comment_list:
            parent_row=comment_list_dict.get(item['parent_id'])
            #如果parent_id为none
            if not parent_row:
                ret.appent(item)
            else:
                parent_row['childen'].append(item)
                #字典与列表都是引用
        retutn(ret)

    当在一处修改列表或字典,其他地方引用了列表与字典的内容也会修改。

    2,字典的访问是利用了哈希算法,效率很高。

    五,同步数据库与操作的记录文件

    当手动删除数据库后,记录操作的文件并未更新,再次启动时会不一致,会报错。为了避免这种情况

    1,前端的方法展示评论

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .comment-box{margin-left: 20px;}
            </style>
        </head>
        <body>
            <div class="item">
                <a news_id="19" class="com">评论</a>
                <div class="comment-list">
                    <div class="comment-box">
                    <span></span>
                </div>
                </div>
                
            </div>
            <script src="/js/jquery.js"></script>
            <script>
                $(function(){
                    bindCommentEvent();
                    
                });
                function diGui(childen_list){
                    var html="";
                    $.each(childen_list,function(ck,cv){
                        var b="<div class='comment-box'><span>";
                        b+=cv.content;
                        
                        b+="</span>";
                        var result=diGui(cv.childen);
                        b+=reult;
                        b+="</div>";
                        html+=b;
                    });
                }
                function create_tree(data,$this){
                    var html='<div class="comment-list">';
                    $.each(data, function(k,v) {
                        var a="<div class='comment-box'><span>";
                        a+=v.content;
                        a+="</span>";
                        var result=diGui(v.childen);
                        a+=reult;
                        a+="</div>";
                        html+=a;
                    });
                }
                function bindCommentEvent(){
                    $('.com').click(function(){
                        var news_id=$(this).attr('news_id');
                        var _this=$(this);
                        $.ajax({
                            type:"get",
                            url:"/comment/",
                            data:{news_id:news_id},
                            dataType:"JSON"
                            
                            success:function(arg,_this){
                                create_tree(arg,_this);
                            }
                        });
                        
                    })
                }
                
            </script>
        </body>
    </html>

    2,直接后台处理

    form django.utils.safestring import mark_safe
    refister =template.Library()
    def diGui(childen_list):
        html=""
        for cv in childen_list:
            b="<div class='comment-box'><span>"
            b+=cv['content']
            b+="</span>"
            result=diGui(cv['childen'])
            b+=reult
            b+="</div>"
            html+=b
        return html
    
    @register.simple_tag
    def create_tree(comment_list):
        html='<div class="comment-list">'
            for v in comment_list:
                a="<div class='comment-box'><span>"
                a+=v['content']
                a+="</span>"
                result=diGui(v['childen']);
                a+=reult;
                a+="</div>";
                html+=a;
            return mark_safe(html)

    python manage.py migrate --fake

    启动:python manage.py migrate

     参考文献:   www.cnblogs.com/wupeiqi/articles/5237704.html

  • 相关阅读:
    u
    华为OJ:数字颠倒
    Unity3D &amp; C# 设计模式--23
    Cocos2d-x学习笔记(12)(CCControlSwitch开关、CCControlSlider滑动条、CCControlButtonbutton)
    hdu5299 Circles Game
    asp.net webform中使用async,await实现异步操作
    Restful风格wcf调用4——权限认证
    Restful风格wcf调用3——Stream
    Restful风格wcf调用2——增删改查
    Restful风格wcf调用
  • 原文地址:https://www.cnblogs.com/gjx1212/p/13785373.html
Copyright © 2011-2022 走看看