五、登錄功能

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修改地方如下：

（項目）在線教育平臺（三）