- 将 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 中添加如下代码,位于 <!--content--> 的 <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>
- 运行成功后登录界面如下:
学习介绍链接:https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501
项目链接:GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog