zoukankan      html  css  js  c++  java
  • DAY 61 django16

    1 首页样式(不用太关注)
    2 开启meida的访问
    -setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,'media')
       -FileField(upload_to='avatar/'),以后上传的头像都放在media下的avatar文件夹下
       -re_path('^media/(?P<path>.*?)$', serve,kwargs={'document_root':settings.MEDIA_ROOT}),
       -+'media/avatar/a.jpg'
    3 个人站点路由设计

     

    0 伪静态

    1 为了搜索引擎优化,动态页面做成伪静态 
    https://www.cnblogs.com/Zh1z3ven/p/14624772.html
    2 xx.html结尾的网页,权重高, p/14624772  p/14624772.php p/14624772.jsp  权重低

    3 百度是个大爬虫,一刻不停的在互联网上爬取页面----》爬完存到自己的库中---》你们百度搜索---》去百度的库中搜---》返回你看到

    4 谷歌需要FQ

     

    1 左侧查询和个人主页路由整合

    路由整合

    re_path('^(?P<username>w+)/(?P<condition>category|tag|archive)/(?P<params>.*).html$', views.personal_site),

    视图函数

    def personal_site(request, username, **kwargs):
       user = models.UserInfo.objects.filter(username=username).first()
       if user:

           article_list = user.blog.article_set.all()
           if kwargs:
               condition = kwargs.get('condition')
               params = kwargs.get('params')
               if condition == 'category':
                   article_list = article_list.filter(category_id=params)
               elif condition == 'tag':
                   article_list = article_list.filter(tag__id=params) #跨表了
               elif condition == 'archive':
                   param_year, param_month = params.split('/')
                   article_list = article_list.filter(create_time__year=param_year, create_time__month=param_month)



           return render(request, 'site.html', locals())
       else:
           return render(request, '404.html')

     

    2 左侧标签,分类,归档写成inclusion_tag

    left.py


    from django import template
    register = template.Library()
    from blog import models
    from django.db.models.functions import TruncMonth
    from django.db.models import Count

    @register.inclusion_tag('left.html')
    def left_inclusion_tag(username):
       user=models.UserInfo.objects.filter(username=username).first()
       category_list = models.Category.objects.filter(blog=user.blog).annotate(count=Count('article')).values('count',
                                                                                                              'name', 'id')
       tag_list = models.Tag.objects.filter(blog=user.blog).annotate(count=Count('article')).values_list('count',
                                                                                                         'name', 'id')

       month_list = models.Article.objects.filter(blog=user.blog).annotate(month=TruncMonth('create_time')).values(
           'month').annotate(count=Count('id')).values_list('month', 'count')

       return {'username':username,'category_list':category_list,'tag_list':tag_list,'month_list':month_list}

    left.html

    <div>


       <div class="panel panel-success">
           <div class="panel-heading">
               <h3 class="panel-title">我的标签</h3>
           </div>
           <div class="panel-body">
              {% for tag in tag_list %}
                   <p><a href="/{{ username }}/tag/{{ tag.2 }}.html">{{ tag.1 }}({{ tag.0 }})</a></p>
              {% endfor %}


           </div>
       </div>
       <div class="panel panel-info">
           <div class="panel-heading">
               <h3 class="panel-title">我的分类</h3>
           </div>
           <div class="panel-body">
              {% for category in category_list %}
                   <p>
                       <a href="/{{ username }}/category/{{ category.id }}.html">{{ category.name }}({{ category.count }})</a>
                   </p>
              {% endfor %}
           </div>
       </div>
       <div class="panel panel-info">
           <div class="panel-heading">
               <h3 class="panel-title">随笔档案</h3>
           </div>
           <div class="panel-body">
              {% for month in month_list %}

                   <p>
                       <a href="/{{ username }}/archive/{{ month.0|date:'Y/m' }}.html">{{ month.0|date:'Y年m月' }}({{ month.1 }})</a>
                   </p>
              {% endfor %}

           </div>
       </div>


    </div>

    使用

    {% load left %}
    {% left_inclusion_tag username %}

    3 文章详情页面搭建



    #div_digg {
       float: right;
       margin-bottom: 10px;
       margin-right: 30px;
       font-size: 12px;
        125px;
       text-align: center;
       margin-top: 10px;
    }

    .diggit {
       float: left;
        46px;
       height: 52px;
       background: url(/static/img/upup.gif) no-repeat;
       text-align: center;
       cursor: pointer;
       margin-top: 2px;
       padding-top: 5px;
    }

    .buryit {
       float: right;
       margin-left: 20px;
        46px;
       height: 52px;
       background: url(/static/img/downdown.gif) no-repeat;
       text-align: center;
       cursor: pointer;
       margin-top: 2px;
       padding-top: 5px;
    }

    .clear {
       clear: both;
    }
    .diggword {
       margin-top: 5px;
       margin-left: 0;
       font-size: 12px;
       color: red;
    }

     

    4 文章点赞点踩样式

       <div id="div_digg">
    <div class="diggit action">
    <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
    </div>
    <div class="buryit action">
    <span class="burynum" id="bury_count">{{ article.down_num }}</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">

    </div>
    </div>


    #div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    125px;
    text-align: center;
    margin-top: 10px;
    }

    .diggit {
    float: left;
    46px;
    height: 52px;
    background: url(/static/img/upup.gif) no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
    }

    .buryit {
    float: right;
    margin-left: 20px;
    46px;
    height: 52px;
    background: url(/static/img/downdown.gif) no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
    }

    .clear {
    clear: both;
    }
    .diggword {
    margin-top: 5px;
    margin-left: 0;
    font-size: 12px;
    color: red;
    }

     

    5 文章点赞点踩后端

    后端

    def upanddown(request):
    if request.is_ajax():
    response = {'status': 100, 'msg': None}
    if request.user.is_authenticated:
    article_id = request.POST.get('article_id')
    is_up = json.loads(request.POST.get('is_up'))
    res = models.UpAndDown.objects.filter(article_id=article_id, user=request.user)
    if res:
    # 点过了
    response['status'] = 102
    response['msg'] = '你已经点过了'
    return JsonResponse(response)
    # 事务操作
    with transaction.atomic():
    if is_up:
    models.Article.objects.filter(id=article_id).update(up_num=F('up_num') + 1)
    response['msg'] = '点赞成功'
    else:
    models.Article.objects.filter(id=article_id).update(down_num=F('down_num') + 1)
    response['msg'] = '点踩成功'

    models.UpAndDown.objects.create(user=request.user, article_id=article_id, is_up=is_up)
    return JsonResponse(response)
    else:
    response['status'] = '101'
    response['msg'] = '请去<a href="/login/">登录</a>'
    return JsonResponse(response)

    前端

       $('.action').click(function () {
           var is_up=$(this).hasClass('diggit')
           var span= $(this).children('span')
           $.ajax({
               url:'/upanddown/',
               method:'post',
               //谁(当前登录用户)对那篇文章点赞或点踩
               data:{article_id:'{{ article.id }}',is_up:is_up,'csrfmiddlewaretoken':'{{ csrf_token }}'},
               success:function (data) {
                   console.log(data)

                   $('#digg_tips').html(data.msg)
                   if (data.status=='100'){
                       //let num=Number(span.html())+1
                       span.html(Number(span.html())+1)
                  }

              }
          })

      })

     

     

  • 相关阅读:
    webservice时间类型XMLGregorianCalendar和Date的转换
    webservice中jaxws:server 和jaxws:endpoint的区别
    使用CXF开发JAX-WS类型的WebService
    使用TCP/IP Monitor监视Soap协议
    Webservice优缺点总结
    WebService两种调用方法
    DOS命令运行java文件,批量引用jar包
    eclipse创建的maven项目无法部署到tomcat
    图片翻转效果
    掷骰子效果
  • 原文地址:https://www.cnblogs.com/DEJAVU888/p/14893697.html
Copyright © 2011-2022 走看看