【Django博客网站】b站项目学习系列三：登录界面

最新推荐文章于 2024-10-30 16:52:22 发布

海风迂回

最新推荐文章于 2024-10-30 16:52:22 发布

阅读量864

点赞数 25

分类专栏：【Django博客网站】文章标签： python django html mysql redis git

本文链接：https://blog.csdn.net/castlegirl/article/details/135064393

版权

【Django博客网站】专栏收录该内容

9 篇文章 1 订阅

订阅专栏

目录

手机号登录

首页用户名展示

退出登录

手机号登录

将 static 文件夹中的 login.html 拖入 templates 文件夹中

定义视图：在 users 文件夹的 views.py 文件中添加：

from django.contrib.auth import login
from django.contrib.auth import authenticate
class LoginView(View):
    def get(self,request):
        return render(request,'login.html')
    def post(self,request):
        mobile = request.POST.get('mobile')   # 接受参数
        password = request.POST.get('password')
        remember = request.POST.get('remember')
        if not all([mobile, password]):    # 校验参数，判断参数是否齐全
            return HttpResponseBadRequest('缺少必传参数')
        if not re.match(r'^1[3-9]\d{9}$', mobile):   # 判断手机号是否正确
            return HttpResponseBadRequest('请输入正确的手机号')
        if not re.match(r'^[0-9A-Za-z]{8,20}$', password):   # 判断密码是否是8-20个数字
            return HttpResponseBadRequest('密码最少8位，最长20位')
        # 认证登录用户，认证字段已经在User模型中的USERNAME_FIELD = 'mobile'修改
        user=authenticate(mobile=mobile, password=password)
        if user is None:
            return HttpResponseBadRequest('用户名或密码错误')
        login(request, user)    # 实现状态保持
        response =  redirect(reverse('home:index'))    # 响应登录结果
        if remember != 'on':    # 设置状态保持的周期
            request.session.set_expiry(0)   # 没有记住用户：浏览器会话结束就过期
            response.set_cookie('is_login', True)   # 设置cookie
            response.set_cookie('username', user.username, max_age=30 * 24 * 3600)
        else:
            request.session.set_expiry(None)   # 记住用户：None表示两周后过期
            response.set_cookie('is_login', True, max_age=14*24 * 3600)   # 设置cookie
            response.set_cookie('username', user.username, max_age=30 * 24 * 3600)
        return response    # 返回响应

定义路由：在 users 文件夹中的 urls.py 文件中添加：
```
path('login/', LoginView.as_view(),name='login'),
```

修改 templates 文件夹中 login.html 文件的资源加载方式：

 <!-- Header部分 -->
    {% load static %}
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <!-- Footer部分 -->
    <script type="text/javascript" src="{% static 'js/host.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/login.js' %}"></script>
    <!-- 点击注册部分 -->
<small class="form-text text-muted ml-1">还没有账号？<a href="{% url 'users:register' %}" style="color: cornflowerblue; ">注册新账号</a>

修改 templates 文件夹中 login.html 文件的资源加载方式：在 templates 文件夹的 login.html 中添加如下代码，位于  的 <form class="login" id="login_form" method="POST"> 之后
```
{% csrf_token %}
```

首页用户名展示

修改 templates 文件夹中 index.html 文件，在 <head> 补充和替换：

<title>首页</title> 之后添加：{% load static %}
<!-- 引入bootstrap的css文件 --> 替换："{% static 'bootstrap/css/bootstrap.min.css' %}"
<!-- 引入monikai.css --> 替换："{% static '/md_css/monokai.css' %}"
<!--导入css--> 替换："{% static 'common/common.css' %}"
"{% static 'common/jquery.pagination.css' %}"
<!-- 引入vuejs --> 替换："{% static 'js/vue-2.5.16.js' %}"、"{% static 'js/axios-0.18.0.min.js' %}"、
"{% static 'js/jquery-1.12.4.min.js' %}"
在 <!-- content --> 替换：
<!-- 引入js --> 替换："{% static 'js/host.js' %}"、"{% static 'js/common.js' %}"、"{% static 'js/index.js' %}"、"{% static 'js/jquery.pagination.min.js' %}"
五个 <!-- 标题图 --> 替换："{% static 'img/1.jpg' %}"
<!--登录/个人中心--> 替换：<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">[[username]]</a>

在 static 文件 index.js 文件中将 this.is_login=true 替换为：
```
this.is_login=getCookie('is_login');
```

退出登录

定义视图：在 users 文件夹的 views.py 文件中加入：

from django.contrib.auth import logout
class LogoutView(View):
    def get(self,request):
        logout(request)   # 清理session
        response = redirect(reverse('home:index'))   # 退出登录，重定向到登录页
        response.delete_cookie('is_login')   # 退出登录时清除cookie中的登录状态
        return response

定义子路由：

from users.views import LogoutView
path('logout/', LogoutView.as_view(),name='logout'),

修改 templates 文件夹中 index.html 文件：在 <body> 替换：

<a class="navbar-brand" href="{% url 'home:index' %}">个人博客</a>
<a class="dropdown-item" href='{% url 'users:logout' %}'>退出登录</a>
<a class="nav-link" href="{% url 'users:login' %}">登录</a>