zoukankan      html  css  js  c++  java

  • django bbs框架开发2

    目录

    一、登录功能

    views.py

    0难度，都是基本操作，要熟悉auth模块的使用

    # 登录功能
def login(request):
    # 1 获取前端传来的数据
    if request.method=='POST':
        back_dic = {'code':0,'msg':''}
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        # 2 验证验证码是否正确
        if code == request.session.get('code'):
	
            obj = auth.authenticate(request,username=username,password=password)
         # 3 验证用户是否正确
            if obj:
                auth.login(request,obj)
                back_dic['code'] = 1000
                # 登录成功后跳转到home页面
                back_dic['url'] = '/home/'
			# 错误信息msg在前端要渲染到错误标签位置
            else:
                back_dic['msg'] = '账号或密码错误'
        else:
            back_dic['msg'] = '验证码错误'
        return JsonResponse(back_dic)
    
    # 4 针对不同的情况返回不同的json数据(注意：通常ajax请求都需要一个字典去执行不同情况的结果)
    return render(request,'login.html')

    二、首页搭建

    home.html

    1. 对页面布局的使用
    2. 熟练掌握前端组件的拷贝和应用
    3. ajax请求基本操作
    4. 静态文件暴露（展示头像）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">BBS</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">BBS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">文章 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">用户</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
{#        判断用户是否登录#}
      <ul class="nav navbar-nav navbar-right">
          {% if request.user.is_authenticated %}
            <li><a href="#">{{ request.user.username }}</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>



                <li><a href="/logout/">退出登录</a></li>
                 <li><a href="#">修改头像</a></li>
                <li><a href="#">后台管理</a></li>
              </ul>
            </li>

           {% else %}
               <li><a href="/login/">登录</a></li>
               <li><a href="/register/">注册</a></li>
          {% endif %}
      </ul>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <h1 class="text-center">修改密码</h1>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="form-group">
                            <label for="">用户名：</label>
                            <input type="text" class="form-control" disabled value="{{ request.user }}">
                        </div>
                        <div class="form-group">
                                <p>原密码：<input type="password" class="form-control" id="old_password"></p>
                        </div>
                            <p>新密码：<input type="password" class="form-control" id="new_password"></p>
                            <p>确认密码<input type="password" class="form-control" id="password_again"></p>
                    </div>
                </div>
               <div class="modal-footer">
                   <span style="color: red" id="error"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="mybtn">提交</button>
              </div>
            </div>
          </div>
        </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-default">
              <div class="panel-heading">性感荷官</div>
              <div class="panel-body">
                在线发牌
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">知名女优</h3>
              </div>
              <div class="panel-body">
                等你来战
              </div>
            </div>
        </div>
        <div class="col-md-8">
            {% for article in article_list %}
                <ul class="media-list">
                  <li class="media">
                      <h3 class="media-heading"><a>{{ article.title }}</a></h3>
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" height="80px">
                      </a>
                    </div>
                    <div class="media-body">
                        {{ article.desc }}
                    </div>
                      <br>
                     <div style="color: #a9a9a9">
                         <span><a href="/{{ article.blog.userinfo.username }}">{{ article.blog.userinfo.username }}&nbsp&nbsp</a></span>
                         <span>发布于&nbsp</span>
                         <span>{{ article.create_time|date:'Y年m月d日' }}&nbsp&nbsp</span>
                         <span><span class="glyphicon glyphicon-comment"></span>&nbsp评论（{{ article.comment_num }}）</span>
                         <span><span class="glyphicon glyphicon-thumbs-up"></span>&nbsp点赞（{{ article.up_num }}）</span>
                    </div>
                  </li>
                </ul>
                <hr>
            {% endfor %}
            
        </div>
         <div class="col-md-2">
            <div class="panel panel-default">
              <div class="panel-heading">性感荷官</div>
              <div class="panel-body">
                在线发牌
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">知名女优</h3>
              </div>
              <div class="panel-body">
                等你来战
              </div>
            </div>
        </div>
    </div>
</div>

<script>

    $('#mybtn').click(function () {
        $.ajax({
            url:'/set_password',
            type:'post',
            data:{
                'old_password':$('#old_password').val(),
                'new_password':$('#new_password').val(),
                'password_again':$('#password_again').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success:function (args) {
                if(args.code == 1000){
                    window.location.href = args.url
                }else {
                    $('#error').text(args.msg)
                }
            }
        })
    })
</script>
</body>
</html>

    settings.py

    # 用户上传的文件应该存储到专门的文件夹，类比static
# 但是此处只是配置了路径，还没有在url开放接口
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

    url.py

    from django.views.static import serve
from app01 import settings
# 在前端开放接口后才能直接访问对应资源的文件
url(r'^mdedia/(?P<path>.*)',serve,{'document_root':settings.MEDIA_ROOT})

    三、admin后台管理

    '''
django有一个可视化后台管理界面，对数据进行增删改查
先要在admin.py注册你要操作的表
'''
from django.contrib import admin
from app01 import models
# Register your models here.
admin.site.register(models.UserInfo)
admin.site.register(models.Tag)
admin.site.register(models.Blog)
admin.site.register(models.Article)
admin.site.register(models.Article2Tag)
admin.site.register(models.Category)
admin.site.register(models.Comment)
admin.site.register(models.UpAndDowm)

'''
然后用有管理员权限的用户登录admin，每个表有对应的增删改查功能
这里要特别注意表关系，不能瞎绑定
注意在models.py中设计表的时候有一些参数可以帮助我们更清晰的观察表
'''
# verbose_name 可以在管理界面代替title展示给用户
title = models.CharField(max_length=32,verbose_name='文章标题')

# null=True 是告诉数据库可以为空，blank=True 是告诉管理后端可以为空
phone = models.BigIntegerField(null=True,blank=True)

# 修改表名
class Meta:
    #verbose_name = '用户表' # 这种方式默认后面加s
    verbose_name_plural = '用户表'

# 代替数据对象展示在前端
def __str__(self):
    return self.username

    四、图片防盗链

    可以避免别的网站直接通过本网站的url访问本网站资源

    简单的防盗：

    如果是本网站发送的请求就正常访问，不是就拒绝访问

    在请求头中有一个参数专门用来存放请求来源

    Referer：http://127.0.0.1:8000/xxx/

    如何避免：

    直接修改请求头

    直接爬取对方网址内的资源

    五、个人站点展示

    1. 展示的时候需要熟练掌握跨表查询应用（聚合函数，分组查询）
    2. 对于不同筛选条件的url（有名分组）
    3. 日期类型特定筛选（TruncMouth）

    views.py

    def site(request,username,**kwargs):

    user_obj = models.UserInfo.objects.filter(username=username).first()
    if not user_obj:
        return render(request,'error.html')
    blog = user_obj.blog
    article_list = models.Article.objects.filter(blog=blog)
    print(kwargs)
    if kwargs:
        condition = kwargs.get('condition')
        param = kwargs.get('param')
        print(condition,param)
        if condition == 'category':
            article_list = article_list.filter(category_id = param)
        elif condition == 'tag':
            article_list = article_list.filter(tag__id = param)
        else:
            year,month = param.split('-')
            article_list = article_list.filter(create_time__year =year,create_time__month=month)
    # 1 查询当前用户所有的分类及分类下的文章数
    category_list = models.Category.objects.filter(blog=blog).annotate(count_num = Count('article__pk')).values_list('name','count_num','pk')

    # 2 查询当前用户下所有的标签下的文章数
    tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num = Count('article__pk')).values_list('name','count_num','pk')

    # 3 以创建日期为分类
    date_list = models.Article.objects.filter(blog=blog).annotate(mouth = TruncMonth('create_time')).values('mouth').annotate(count_num=Count('pk')).values_list('mouth','count_num')
    return render(request,'site.html',locals())

    site.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">BBS</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">{{ blog.site_name }}</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">文章 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">用户</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
{#        判断用户是否登录#}
      <ul class="nav navbar-nav navbar-right">
          {% if request.user.is_authenticated %}
            <li><a href="#">{{ request.user.username }}</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>



                <li><a href="/logout/">退出登录</a></li>
                 <li><a href="#">修改头像</a></li>
                <li><a href="#">后台管理</a></li>
              </ul>
            </li>

           {% else %}
               <li><a href="/login/">登录</a></li>
               <li><a href="/register/">注册</a></li>
          {% endif %}
      </ul>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <h1 class="text-center">修改密码</h1>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="form-group">
                            <label for="">用户名：</label>
                            <input type="text" class="form-control" disabled value="{{ request.user }}">
                        </div>
                        <div class="form-group">
                                <p>原密码：<input type="password" class="form-control" id="old_password"></p>
                        </div>
                            <p>新密码：<input type="password" class="form-control" id="new_password"></p>
                            <p>确认密码<input type="password" class="form-control" id="password_again"></p>
                    </div>
                </div>
               <div class="modal-footer">
                   <span style="color: red" id="error"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="mybtn">提交</button>
              </div>
            </div>
          </div>
        </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-default">
              <div class="panel-heading">文章标签</div>
              <div class="panel-body">
                {% for tag in tag_list %}
                    <p><a href="/{{ username }}/tag/{{ tag.2 }}">{{ tag.0 }} ({{ tag.1 }})</a></p>
                {% endfor %}


              </div>
            </div>

            <div class="panel panel-default">
              <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.2 }}">{{ category.0 }} ({{ category.1 }})</a></p>
                {% endfor %}

              </div>
            </div>
          <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title " >日期</h3>
              </div>
              <div class="panel-body">
                {% for date in date_list %}
                    <p><a href="/{{ username }}/archive/{{ date.0|date:'Y-m' }}">{{ date.0 }} ({{ date.1 }})</a></p>
                {% endfor %}

              </div>
            </div>
        </div>
        <div class="col-md-8">
            {% for article in article_list %}
             <ul class="media-list">
                  <li class="media">
                      <h3 class="media-heading"><a>{{ article.title }}</a></h3>
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" height="80px">
                      </a>
                    </div>
                    <div class="media-body">
                        {{ article.desc }}
                    </div>
                      <br>
                     <div style="color: #a9a9a9">
                         <span>posted&nbsp;&nbsp;</span>
                         <span>@&nbsp;</span>
                         <span>{{ article.create_time|date:'Y年m月d日' }}&nbsp;&nbsp;</span>
                         <span><span class="glyphicon glyphicon-comment"></span>&nbsp评论（{{ article.comment_num }}）</span>
                         <span><span class="glyphicon glyphicon-thumbs-up"></span>&nbsp点赞（{{ article.up_num }}）</span>
                         <span><a href="#">编辑</a></span>
                    </div>
                  </li>
                </ul>
                <hr>
            {% endfor %}
            
        </div>
    </div>
</div>
</body>
</html>

    urls.py

        url(r'^(?P<username>w+)/$',views.site),
    url(r'^(?P<username>w+)/(?P<condition>category|tag|archive)/(?P<param>.*)/',views.site)
     
     
  • 相关阅读:
    使用mybatis如果类属性名和数据库中的属性名不一样取值就会为null
    学习mybatis时出现了java.io.IOException: Could not find resource EmployeeMapper.xml
    配置mybatis-config.xml出现过很诡异的现象
    mybatis学习（一）
    报错cannot be cast to javassist.util.proxy.Proxy
    列车调度
    三角形
    土豪聪要请客(stol)
    Jams倒酒(pour)
    Data
  • 原文地址：https://www.cnblogs.com/Tornadoes-Destroy-Parking-Lots/p/13096683.html
Copyright © 2011-2022 走看看