django session(退出浏览器清空session)

Django 同时被 3 个专栏收录
9 篇文章 0 订阅
11 篇文章 0 订阅
8 篇文章 0 订阅

django session 登录

from django.views.decorators.csrf import csrf_exempt
# 登录页
@csrf_exempt
def login(request):
    print('login==================')
    # 获取验证码
    verification_code_ = verification_code(len=4)
    if (request.method == 'POST'):
        body = request.POST
        # 用户名
        user_name = body['user_name']
        # 密码
        password = body['password']
        # 验证码
        Verification_Code = body['Verification_Code']

        # request.session.set_expiry(1800000) # 30分钟后过期
        # 把用户名存进session
        request.session['username'] = user_name
        # request.session['is_login'] = True
        # 退出浏览器session失效(必须所有浏览器都关闭时,才能彻底清除session)
        
        request.session.set_expiry(0)

        return redirect('../index/')
    return render(request, 'backend/login.html', {'verification_code': verification_code_, })

# 点击退出登录
def login_out(request):
    request.session.flush()  # 清空session
    # login_status = 0
    # return render(request, 'backend/index.html', {'login_status': login_status, })
    return redirect('../login/')


# 首页
def index(request):
    print('index===============')
    # 调用 判断session 是否过期 方法
    session_exist_ = session_exist(request)
    # 判断session 是否过期
    if session_exist_:
        list_ = models.Test.objects.all() # 获取所有的数据
        count = models.Test.objects.all().count() # 查询所有数据的个数
        limit = 2 # 每页展示的个数
        paginator = Paginator(list_, limit)
        page = request.GET.get('page')
        contacts = paginator.get_page(page)
        # request.session.set_expiry(0)
        return render(request, 'backend/index.html', {'list': contacts, 'count': count, 'limit': limit})
    else:
        print(2)
        return redirect('../login/')
# 判断session 是否过期
def session_exist(request):
    session_key = request.session.session_key
    # 判断 session_key是否存在
    if session_key == None:
        return False
    else:
        return True
        
# 获取验证码
def verification_code(len=4):
    ''' 随机生成4位的验证码 '''
    # 注意: 这里我们生成的是0-9A-Za-z的列表,当然你也可以指定这个list,这里很灵活
    # 比如: code_list = ['P','y','t','h','o','n','T','a','b'] # PythonTab的字母
    code_list = []
    for i in range(10):  # 0-9数字
        code_list.append(str(i))
    for i in range(65, 91):  # 对应从“A”到“Z”的ASCII码
        code_list.append(chr(i))
    for i in range(97, 123):  # 对应从“a”到“z”的ASCII码
        code_list.append(chr(i))
    myslice = random.sample(code_list, len)  # 从list中随机获取6个元素,作为一个片断返回
    verification_code = ''.join(myslice)  # list to string
    return verification_code
# url
urlpatterns = [
    path('admin/', admin.site.urls),
    # url(r'^$', TemplateView.as_view(template_name="backend/login.html")),
    # path('', TemplateView.as_view(template_name="backend/login.html")),
    # 登录
    path('login/', views.login),
    # 更新验证码
    path('verification_code_do/', views.verification_code_do),
    # 退出登录
    path('login_out/', views.login_out),
    # 首页
    path('index/', views.index),

]
<!-- 登录页 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="/static/css/layui.css">
  <style>
    body {
      background-color: #000;
    }

    .login {
      width: 450px;
      border: 1px solid #000;
      margin: 200px auto;
      padding: 40px 50px;
      box-sizing: border-box;
      background-color: #fff;
    }

    .login_p {
      text-align: center;
      margin: 0 0 35px 0;
    }

    .login_content {
      /*width: 250px;*/
      margin: 0 auto;
    }

    .login_input {
      margin: 10px 0 25px 0;
    }

    .login_content>div:nth-child(1) {
      margin: 0 0 10px 0;
    }

    .login_content>div:nth-child(3) {
      position: relative;
    }

    .login_content>div:nth-child(3)>input {
      width: 270px;
      position: absolute;
    }

    .login_content>div:nth-child(3)>span {
      position: absolute;
      width: 50px;
      left: 277px;
      display: inline-block;
      border: 1px solid #e6e6e6;
      text-align: center;
      padding: 9.5px;
      top: 28px;
    }

  </style>
</head>

<body>
<div class="login">
  <form class="layui-form" id="myForm" method="post" action="../login/">
    <!--  <form class="layui-form" method="post" action="">-->
    <form class="layui-form" method="post" action="" omsubmit='return checkForm()'>
      <p class="login_p">后台管理系统</p>
      <div class="login_content">
        <div>
          <lable class="left_title">用户名:</lable>
          <input type="text" class="layui-input login_input" id="user_name" name="user_name">
        </div>

        <div>
          <lable>&nbsp;&nbsp;&nbsp;&nbsp;码:</lable>
          <input type="password" class="layui-input login_input" id="passwod" name="password">
        </div>
        <div>
          <lable>验证码:</lable>
          <input type="text" class="layui-input login_input" name="Verification_Code" id="Verification_Code">

          <span id="verification_btn" onclick="verification_btn()" data-value="{{verification_code}}">
              {{verification_code}}</span>

        </div>

        <div style="margin-top:80px;">
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          <button class="layui-btn" id="login_do" lay-submit lay-filter="formDemo">登录</button>
        </div>

      </div>

    </form>
    </form>
</div>

</body>
<script src="/static/js/layui.js"></script>
<!--调用分页的js方法-->
<script src="/static/js/laypage.js"></script>
<script src="/static/js/jquery.min.js"></script>

<script>
  // 进入登录页就执行的方法
  $(document).ready(function () {
    if (window.name == "") {
      console.log("首次被加载");
      window.name = "isReload";  // 在首次进入页面时我们可以给window.name设置一个固定值
    } else if (window.name == "isReload") {
      console.log("页面被刷新");
      document.getElementById("myForm").reset() // 返回登录页时,清空表单中的数据
    }

  });



  // 获取验证码的元素
  var verification_btn = document.getElementById("verification_btn");


  document.getElementById("verification_btn").style.fontFamily = "Fixedsys"; //设置字体
  document.getElementById("verification_btn").style.letterSpacing = "5px"; //字体间距
  document.getElementById("verification_btn").style.color = "#0ab000"; //字体颜色

  // 点击验证码按钮,更新验证码
  verification_btn.onclick = function () {
    verification_value = $(this).attr("custom")
    $.ajax({
      url: '../verification_code_do/',
      dataType: 'json',
      type: 'POST',
      contentType: "application/json; charset=UTF-8",
      success: function (data) {
        // 更新新的验证码
        verification_code_ = data.verification_code_
        verification_btn.innerHTML = verification_code_;
      },
      error: function () {
        console.log(222)
      }
    })
  }


  // < !--form 表单提交 判断用户名,密码,验证码是否正确-- >
  $("form").submit(function () {
    // 用户名
    var user_name = $("input[name='user_name']").val();
    // 密码
    var password = $("input[name='password']").val();
    // 验证码
    var Verification_Code = $("input[name='Verification_Code']").val();
    // 图片中的验证码
    var verification_btn = document.getElementById("verification_btn");
    // 获取图片中验证码的值
    verification_btn = verification_btn.innerText
    console.log(verification_btn + '---------')
    if (user_name == "" || user_name == null || user_name == undefined) {
      alert("用户名错误");
      return false;/*阻止表单提交*/
    } else if (password == "" || password == null || password == undefined) {
      alert("密码错误");
      return false;/*阻止表单提交*/
    } else if (Verification_Code == "" || Verification_Code == null || Verification_Code == undefined || Verification_Code
      != verification_btn) {
      // alert("验证码错误");
      console.log('验证码错误')
      // 更新验证码
      $.ajax({
        url: '../verification_code_do/',
        dataType: 'json',
        type: 'POST',
        contentType: "application/json; charset=UTF-8",
        success: function (data) {
          // console.log(data)
          // 定义新的验证码
          verification_code_ = data.verification_code_;

          // 重新获取图片验证码 span 元素,验证码错误,更新验证码的值。
          var verification_btn = document.getElementById("verification_btn");
          verification_btn.innerText = verification_code_;

        },
        error: function () {
          console.log(222)
        }
      })
      return false;/*阻止表单提交*/
    } else {
      // < !--alert("登录成功"); -->
      return true;
    }
  })



</script>

</html>

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

相信光___

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值