(项目)在线教育平台

Posted sweltering

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(项目)在线教育平台相关的知识,希望对你有一定的参考价值。

五、登录功能

1、首页和登录页面配置

  将首页的index.html和登录页面login.html前端文件拷贝到项目的templates文件夹内,如果需要前端初始文件请联系我QQ:779060694,。

  然后在项目根目录下新建static文件夹,该文件夹用来存放一些前端的静态文件,将前端的静态文件(css、images、img、js、media)这些文件拷贝到该文件夹下。

技术分享图片

  然后在setting.py文件中配置静态文件的访问路径:

1 STATICFILES_DIRS = (
2     os.path.join(BASE_DIR, static),
3 )

  然后修改首页index.html和登录页面login.html初始文件中的静态文件访问路径,使用ctrl+f查找出所有的‘../‘,然后ctrl+r全部替换为‘/static/‘。

  现在开始在url.py文件中配置首页的访问url和登录页面的访问url:

1 from django.views.generic import TemplateView
2 
3 urlpatterns = [
4     path(‘‘, TemplateView.as_view(template_name=index.html), name=index),  # 首页
5     path(login/, TemplateView.as_view(template_name=login.html), name=login),  # 登录
6 ]

  在index.html文件中修改跳转到登录页面的url,初始文件中将登录和注册都注释了,需要取消注释,然后修改跳转url:

技术分享图片

  现在就可以可以访问首页和登录页面了:http://127.0.0.1:8000/

2、后端用户登录接口

2.1 编写登录接口

  在users/views.py文件中编写登录的接口:

 1 from django.contrib.auth import authenticate, login
 2 
 3 # Create your views here.
 4 
 5 def user_login(request):
 6     if request.method == POST:
 7         # 获取用户提交的用户名和密码
 8         user_name = request.POST.get(username, None)
 9         pass_word = request.POST.get(password, None)
10 
11         # 通过django的authenticate方法获取user对象,也就是验证用户是否存在
12         user = authenticate(username=user_name, password=pass_word)
13 
14         if user is not None:
15             # 验证通过,通过django的login方法去登录,然后返回首页
16             login(request, user)
17             return render(request, index.html)
18         else:
19             return render(request, login.html, {msg: 用户名或密码错误})
20 
21     elif request.method == GET:
22         return render(request, login.html)

2.2 修改登录的url

  在urls.py文件中修改登录页面的url:

1 from users import views
2 
3 urlpatterns = [
4     path(login/, views.user_login, name=login),  # 登录
5 ]

3、前端登录页面配置

  在login.html文件中修改如下内容,与后端接口对接:

技术分享图片

 

   然后修改index.html文件中顶部登录注册按钮在登录状态下隐藏的问题,也就是未登录状态下显示登录注册按钮,登录状态下显示用户姓名和个人中心:

技术分享图片

4、后端登录接口完善,增加邮箱登录和form表单验证

  同时需要邮箱和用户名登录,需要自定义authenticate方法,在users/views中重写ModelBackend类中的方法authenticate:

 1 from django.contrib.auth.backends import ModelBackend
 2 from django.db.models import Q
 3 
 4 from .models import UserProfile
 5 
 6 # Create your views here.
 7 
 8 
 9 class CustomBackend(ModelBackend):
10     """邮箱用户名同时登录验证方法"""
11     # 重写authenticate方法实现用户名、邮箱都可以登录
12     def authenticate(self, request, username=None, password=None, **kwargs):
13         try:
14             # 同时查询用户名和邮箱记录,使用Q并集查询
15             user = UserProfile.objects.get(Q(username=username)|Q(email=username))
16 
17             # 密码在数据库中是加密的,需要使用UserProfile继承的AbstractUser中的check_password方法
18             if user.check_password(password):
19                 return user
20         except Exception as e:
21             return None

  然后将重写后的CustomBackend类配置进setting.py文件中:

1 AUTHENTICATION_BACKENDS = (
2     users.views.CustomBackend,
3 )

  现在就可以通过邮箱和用户名进行登录了。

  继续完善登录接口,增加form表单验证,在users下新建form.py文件,添加需要表单验证的字段:

1 from django import forms
2 
3 
4 class LoginForm(forms.Form):
5     """登录表单验证"""
6     # required=True用户名和密码不能为空
7     username = forms.CharField(required=True)
8     password = forms.CharField(required=True, min_length=5)

  继续完善登录接口,将函数的形式改成类的形式,通过form表单进行验证,先把函数形式改成类的形式:

 1 class LoginView(View):
 2     """登录"""
 3     def get(self, request):
 4         return render(request, login.html)
 5 
 6     def post(self, request):
 7         # form实例化
 8         login_form = LoginForm(request.POST)
 9         if login_form.is_valid():
10             # form验证通过,获取用户提交的用户名和密码
11             user_name = request.POST.get(username, None)
12             pass_word = request.POST.get(password, None)
13 
14             # 通过django的authenticate方法获取user对象,也就是验证用户是否存在
15             user = authenticate(username=user_name, password=pass_word)
16 
17             if user is not None:
18                 # 验证通过,通过django的login方法去登录,然后返回首页
19                 login(request, user)
20                 return render(request, index.html)
21             else:
22                 # 验证不通过,返回登录页面,并将错误信息返回回去显示
23                 return render(request, login.html, {msg: 用户名或密码错误, login_form: login_form})
24         else:
25             return render(request, login.html, {login_form: login_form})

  修改登录接口的url:

1 from users.views import LoginView
2 
3 urlpatterns = [
4     path(login/, LoginView.as_view(), name=login),  # 登录
5 ]

5、前端错误提示信息修改

  登录失败后,前端需要有错误信息提示,login.html修改地方如下:

技术分享图片

 

以上是关于(项目)在线教育平台的主要内容,如果未能解决你的问题,请参考以下文章

Git

GitHub

TODO:Github的使用技巧之同步代码

Github简介

关于guithub

GitHub介绍