(1)把html文件中index.html拷贝到templates文件夹内
(2)新建static目录用来存放静态文件,该文件与apps在同级目录。
在settings.py中设置路径
STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )
(3)引用静态文件
使用ctrl+f查找出所有“../”, 然后ctrl+r 全部替换为“/static/”
修改:把login.html与index.html拷贝到templates文件夹下
(4)配置静态文件的url
MxOnline/urls.py中
# MxOnline/urls.py import xadmin from django.urls import path from django.views.generic import TemplateView
urlpatterns = [ path('xadmin/', xadmin.site.urls), path('', TemplateView.as_view(template_name='index.html'),name='index'), path('login/', TemplateView.as_view(template_name='login.html'),name='login'), ]
更改index.html里面跳转到登录界面的url
将login.html改为“login/”
<a style="color:white" class="fr registerbtn" href="register.html">注册</a> <a style="color:white" class="fr loginbtn" href="/login/">登录</a>
现在可以访问index页面,然后点‘’登录”,跳转到登录页面了
用户登录:
(1)修改login的路由
from django.views.generic import TemplateView from users import views urlpatterns = [ path('xadmin/', xadmin.site.urls), path('', TemplateView.as_view(template_name='index.html'),name='index'), path('login/',views.user_login,name = 'login'), #修改login路由 ]
(2)写login的视图
from django.shortcuts import render from django.contrib.auth import authenticate,login def user_login(request): if request.method == 'POST': # 获取用户提交的用户名和密码 user_name = request.POST.get('username',None) pass_word = request.POST.get('password',None) # 成功返回user对象,失败None user = authenticate(username=user_name,password=pass_word) # 如果不是null说明验证成功 if user is not None: # 登录 login(request,user) return render(request,'index.html') else: return render(request,'login.html',{'msg':'用户名或密码错误'}) elif request.method == 'GET': return render(request,'login.html')
(3)更改login.html
<form action="/login/" method="post" autocomplete="off"> <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' /> <div class="form-group marb20 "> <label>用 户 名</label> <input name="username" id="account_l" type="text" placeholder="手机号/邮箱" /> </div> <div class="form-group marb8 "> <label>密 码</label> <input name="password" id="password_l" type="password" placeholder="请输入您的密码" /> </div> <div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div> <div class="auto-box marb38"> <a class="fr" href="forgetpwd.html">忘记密码?</a> </div> <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > " /> <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' /> {% csrf_token %} </form>
如果用户登录错误,应该有提示错误信息,下面代码:
<div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>
(4)修改index.html
<div class=" header"> <div class="top"> {% if request.user.is_authenticated %} <div class="personal"> <dl class="user fr"> <dd>bobby<img class="down fr" src="/static/images/top_down.png"/></dd> <dt><img width="20" height="20" src="/static/media/image/2016/12/default_big_14.png"/></dt> </dl> <div class="userdetail"> <dl> <dt><img width="80" height="80" src="/static/media/image/2016/12/default_big_14.png"/></dt> <dd> <h2>django</h2> <p>bobby</p> </dd> </dl> <div class="btn"> <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a> <a class="fr" href="/logout/">退出</a> </div> </div> </div> {% else %} <div class="wp"> <div class="fl"><p>服务电话:<b>33333333</b></p></div> <!--登录后跳转--> <a style="color:white" class="fr registerbtn" href="register.html">注册</a> <a style="color:white" class="fr loginbtn" href="/login/">登录</a> </div> {% endif %} </div>
(5)增加邮箱登录
让用户可以通过邮箱或者用户名都可以登录,用自定义authenticate方法
这里是继承ModelBackend类来做的验证
# users/views.py from django.shortcuts import render from django.contrib.auth import authenticate,login from django.contrib.auth.backends import ModelBackend from .models import UserProfile from django.db.models import Q #邮箱和用户名都可以登录 # 基础ModelBackend类,因为它有authenticate方法 class CustomBackend(ModelBackend): def authenticate(self, request, username=None, password=None, **kwargs): try: # 不希望用户存在两个,get只能有一个。两个是get失败的一种原因 Q为使用并集查询 user = UserProfile.objects.get(Q(username=username)|Q(email=username)) # django的后台中密码加密:所以不能password==password # UserProfile继承的AbstractUser中有def check_password(self, raw_password): if user.check_password(password): return user except Exception as e: return None def user_login(request): if request.method == 'POST': # 获取用户提交的用户名和密码 user_name = request.POST.get('username',None) pass_word = request.POST.get('password',None) # 成功返回user对象,失败None user = authenticate(username=user_name,password=pass_word) # 如果不是null说明验证成功 if user is not None: # 登录 login(request,user) return render(request,'index.html') else: return render(request,'login.html',{'msg':'用户名或密码错误'}) elif request.method == 'GET': return render(request,'login.html') users/views.py
MxOnline/settings.py添加如下代码:
AUTHENTICATION_BACKENDS = ( 'users.views.CustomBackend', )
然后通过邮箱也可以实现登录了