(二)Django 在线平台(首页+登录后台实现)

Django Python2.7 编写在线教育平台笔记第二部分(配置前端页面+后台代码编写)

前端页面地址 https://github.com/Lxstrive/DjangoHtml


1 . index页面设计

将index.html页面拷贝到Templates目录下

在项目目录中新建static目录 将css 、js、 image文件夹拷贝到static目录

(二)Django 在线平台(首页+登录后台实现)_第1张图片

在urls中配置index.html页面路径:

这里使用django中用来处理静态文件的TemplateView类会自动创建View视图只用调用TemplateView.as_view函数即可返回前端页面

from django.views.generic import TemplateView

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^xadmin/', xadmin.site.urls),
    url(r'^$', TemplateView.as_view(template_name='index.html'), name='index')

]

启动Django项目 在浏览器中输入127.0.0.1: 8000  这时的页面找不到CSS JS 文件

需要在Settgings.py文件中配置static目录的路径

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

并且修改index.html中css js image的link路径 修改成/static/(可以用pycharm的全局替换)


页面可以正常显示

2.login.html 配置 在urls中写入 并且修改login页面中css js image路径 同上

url(r'^login/$', TemplateView.as_view(template_name='login.html'), name='login')

配置在index页面中点击登录跳转到login页面需要修改index.html中登录的跳转url



后台登录功能实现

1.在urls中配置登录页面

(二)Django 在线平台(首页+登录后台实现)_第2张图片

2.编写usersAPP下视图函数

# -*- coding:utf-8 -*-
__author__ = '_X.xx_'
__date__ = '2018/6/8 14:08'

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', '')
        pass_word = request.POST.get('password', '')
        # authenticate方法只进行验证
        user = authenticate(username=user_name, password=pass_word)
        if user is not None:
            # login方法实现登录
            login(request, user)
            return render(request, 'index.html', {})
        else:
            return render(request, 'login.html', {})
    elif request.method == 'GET':
        return render(request, 'login.html', {})

3.在index.html前端页面进行判断跳转显示 如果登录成功则显示用户名 否则显示登录注册

(二)Django 在线平台(首页+登录后台实现)_第3张图片

(二)Django 在线平台(首页+登录后台实现)_第4张图片

(二)Django 在线平台(首页+登录后台实现)_第5张图片


自定义登录类型,让用户也可以用邮箱进行登录

usersAPP视图函数中编写类 继承ModelBackend

from django.contrib.auth.backends import ModelBackend
from django.db.models import Q
from .models import UserProfile


class CustomBackend(ModelBackend):
    """
        自定义登录类型
        用户名和邮箱都可以登录
    """

    def authenticate(self, username=None, password=None, **kwargs):
        try:
            # 使用并级需要使用django.db.models 下的Q对象
            user = UserProfile.objects.get(
                Q(username=username) | Q(email=username))
            # 由于密码是密文传输,用户传进来的是明文 所以需要使用Django自带的user             # check_password方法进行密码比对
            if user.check_password(password):
                return user
        except Exception as e:
            return None

在settings.py中配置自定义登录的类:(注意的是一个元组类型),配置完成后 用户可以使用用户名或邮箱进行登录

(二)Django 在线平台(首页+登录后台实现)_第6张图片

优化一下登录功能,如果用户输入错误 给出提示

很简单只需要在登录方法中返回一个msg字典错误提示,在前端login页面接收信息即可

(二)Django 在线平台(首页+登录后台实现)_第7张图片

(二)Django 在线平台(首页+登录后台实现)_第8张图片


(二)Django 在线平台(首页+登录后台实现)_第9张图片

Django基于类的登录方法:

配置urls 这里的as_view()需要加括号

from users.views import LoginView
url(r'^login/$', LoginView.as_view(), name='login')
在view视图中编写:

  导入  from django.views.generic.base import View
class LoginView(View):
    """
        基础类的登录方法
    """

    def get(self, request):
        # 重写Viewget方法
        return render(request, 'login.html', {})

    def post(self, request):
        user_name = request.POST.get('username', '')
        pass_word = request.POST.get('password', '')
        # authenticate方法只进行验证
        user = authenticate(username=user_name, password=pass_word)
        if user is not None:
            # login方法实现登录
            login(request, user)
            return render(request, 'index.html', {})
        else:
            return render(request, 'login.html', {'msg': '用户名或密码错误'})

继续优化登录功能

在从数据库读取数据验证之前可以先使用django的forms进行先验证 可以减少数据库负载

1 .在usersAPP中新建forms.py文件 编写:

(二)Django 在线平台(首页+登录后台实现)_第10张图片

# !/usr/bin/env python 
# -*- coding:utf-8 -*-
__author__ = '_X.xx_'
__date__ = '2018/6/8 15:56'


from django import forms


class LoginForm(forms.Form):
    username = forms.CharField(required=True)
    password = forms.CharField(required=True, min_length=6)
2.在view视图函数中post方法中引入forms

def post(self, request):
    # 实例化LoginForm传值request.POST(是字典形式)会先传入forms进行验证
    login_form = LoginForm(request.POST)
    # is_valid()方法会先进行判断用户名密码 如果errors为空则进行下一步
    if login_form.is_valid():
        user_name = request.POST.get('username', '')
        pass_word = request.POST.get('password', '')
        # authenticate方法只进行验证
        user = authenticate(username=user_name, password=pass_word)
        if user is not None:
            # login方法实现登录
            login(request, user)
            return render(request, 'index.html', {})
        else:
            return render(request, 'login.html', {
                'msg': '用户名或密码错误',
            })
    else:
        return render(request, 'login.html', {
            'login_form': login_form,
        })

编写前端页面 将forms.erros传入前端页面

(二)Django 在线平台(首页+登录后台实现)_第11张图片

<div class="error btns login-form-tips" id="jsLoginTips">{% for key, error in login_form.errors.items %}{{ error }}{% endfor %}{{ msg }}div>

用户找回密码功能
    配置前端页面forget.html urls

url(r'^forget/$', ForgetPwdView.as_view(), name='forget_pwd'),
    在forms里编写:
class ForgetForm(forms.Form):
    # email进行验证
    email = forms.EmailField(required=True)
    captcha = CaptchaField(error_messages={'invalid': u'验证码错误'})
配置前端页面css js 路径正常显示前端页面 form表单注意添加
{% csrf_token %}
编写View视图函数功能

class ForgetPwdView(View):
    """
        找回密码
    """

    def get(self, request):
        forget_form = ForgetForm()
        return render(request, 'forgetpwd.html', {
            'forget_form': forget_form
        })

    def post(self, request):
        forget_form = ForgetForm(request.POST)
        if forget_form.is_valid():
            email = request.POST.get('email', '')
            send_register_email(email, 'forget')
            return render(request, 'send_success.html')
        else:
            return render(request, 'forgetpwd.html', {
                'forget_form': forget_form
            })

你可能感兴趣的:(Django)