美文网首页
第四章 在线教育平台(用户登录注册)

第四章 在线教育平台(用户登录注册)

作者: Xia0JinZi | 来源:发表于2018-03-19 19:51 被阅读0次

用户登录注册界面

标签: django


登录

首页与登陆界面配置

复制主页及相关文件,其中包括静态文件。

 
urls

"""edu_gmooc URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.9/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
import xadmin

from users.views import user_login

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


settings
# 自定义验证规则
AUTHENTICATION_BACKED = (
    'users.views.CustmerBacked',
)
# 静态文件
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
  • views
# _*_ encoding:utf-8 _*_
from django.shortcuts import render
from django.contrib.auth import authenticate, login
from django.contrib.auth.backends import ModelBackend
from django.db.models import Q

from .models import UserProfile

# Create your views here.

#  邮箱验证规则
class CustmerBacked(ModelBackend):
    def authenticate(self, username=None, password=None, **kwargs):
        try:
            user = UserProfile.objects.get(Q(username=username) | Q(email=username))
            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')
        pass_word = request.POST.get('password')
        user = authenticate(username=user_name, password=pass_word)
        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')


  • index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <title>课程机构列表 - 慕学在线网</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/animate.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap ">
    <header>
        <div  class=" header">
        <!--登录后跳转-->
            <div class="top">
                <div class="wp">
                    <div class="fl"><p>服务电话:<b>33333333</b></p></div>
                    {% 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 %}
                            <a style="color:white" class="fr registerbtn" href="register.html">注册</a>
                            <a style="color:white" class="fr loginbtn" href="/login/">登录</a>
                    {% endif %}

                </div>
            </div>

            <div class="middle">
                <div class="wp">
                    <a href="index.html"><img class="fl" src="/static/images/logo.jpg"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="/static/images/search_btn.png"/>
                    </div>
                </div>
            </div>
            
            
            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li class="active" ><a href="index.html">首页</a></li>
                            <li >
                                <a href="course-list.html">
                                    公开课<img class="hot" src="/static/images/nav_hot.png">
                                </a>
                            </li>
                            <li >
                                <a href="teachers-list.html">授课教师</a>
                            </li>
                            <li ><a href="org-list.html">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            
            </div>
    </header>
</section>
<!--crumbs start-->



    <div class="banner">
            <div class="wp">
                <div class="fl">
                    <div class="imgslide">
                        <ul class="imgs">
                            
                            <li>
                                    <a href="http://www.imooc.com">
                                        <img width="1200" height="478" src="/static/media/banner/2016/11/57a801860001c34b12000460.jpg" />
                                    </a>
                                </li>
                            
                            <li>
                                    <a href="http://www.projectsedu.com">
                                        <img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460.jpg" />
                                    </a>
                                </li>
                            
                            <li>
                                    <a href="http://www.projectsedu.com">
                                        <img width="1200" height="478" src="/static/media/banner/2016/11/57a801860001c34b12000460_z4Vb8zl.jpg" />
                                    </a>
                                </li>
                            
                            <li>
                                    <a href="http://www.projectsedu.com">
                                        <img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460_nMwvoQD.jpg" />
                                    </a>
                                </li>
                            
                            <li>
                                    <a href="http://www.projectsedu.com">
                                        <img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460_GXIBATC.jpg" />
                                    </a>
                                </li>
                            

                        </ul>
                    </div>
                    <div class="unslider-arrow prev"></div>
                    <div class="unslider-arrow next"></div>
                </div>

                </div>


            </div>
<!--banner end-->
<!--feature start-->
    <section>
        <div class="wp">
            <ul class="feature">
                <li class="feature1">
                    <img class="pic" src="/static/images/feature1.png"/>
                    <p class="center">专业权威</p>
                </li>
                <li class="feature2">
                    <img class="pic" src="/static/images/feature2.png"/>
                    <p class="center">课程最新</p>
                </li>
                <li class="feature3">
                    <img class="pic" src="/static/images/feature3.png"/>
                    <p class="center">名师授课</p>
                </li>
                <li class="feature4">
                    <img class="pic" src="/static/images/feature4.png"/>
                    <p class="center">数据真实</p>
                </li>
            </ul>
        </div>
    </section>
<!--feature end-->
<!--module1 start-->
    <section>
        <div class="module">
            <div class="wp">
                <h1>公开课程</h1>
                <div class="module1 eachmod">
                    <div class="module1_1 left">
                        <img width="228" height="614" src="/static/images/module1_1.jpg"/>
                        <p class="fisrt_word">名师授课<br/>专业权威</p>
                        <a class="more" href="course-list.html">查看更多课程 ></a>
                    </div>
                    <div class="right group_list">
                        <div class="module1_2 box">
                            <div class="imgslide2">
                                <ul class="imgs">
                                    
                                    <li>
                                        <a href="course-detail.html">
                                            <img width="470" height="300" src="/static/media/courses/2016/12/python文件处理.jpg" />
                                        </a>
                                    </li>
                                    
                                    <li>
                                        <a href="course-detail.html">
                                            <img width="470" height="300" src="/static/media/courses/2016/12/python面向对象.jpg" />
                                        </a>
                                    </li>
                                    
                                </ul>
                            </div>
                            <div class="unslider-arrow2 prev"></div>
                            <div class="unslider-arrow2 next"></div>
                        </div>
                            
                            <div class="module1_3 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/mysql.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="django入门">django入门</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">初级</i></span>
                                    <span class="fr">学习人数:3</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="慕课网">慕课网</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                            <div class="module1_4 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="java入门">java入门</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">中级</i></span>
                                    <span class="fr">学习人数:0</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="北京大学">北京大学</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                            <div class="module1_5 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="python入门">python入门</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">中级</i></span>
                                    <span class="fr">学习人数:0</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="南京大学">南京大学</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                            <div class="module1_6 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_dHfj8Nq.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="java入门2">java入门2</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">高级</i></span>
                                    <span class="fr">学习人数:0</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="慕课网2">慕课网2</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                            <div class="module1_7 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_0nFiBSI.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="java入门3">java入门3</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">初级</i></span>
                                    <span class="fr">学习人数:1</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="慕课网3">慕课网3</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                            <div class="module1_8 box">
                                <a href="course-detail.html">
                                    <img width="233" height="190" src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135_MSIqfvw.jpg"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2 title="python入门2">python入门2</h2>
                                    </a>
                                    <span class="fl">难度:<i class="key">中级</i></span>
                                    <span class="fr">学习人数:0</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="慕课网666">慕课网666</span>
                                    <span class="star fr">0</span>
                                </div>
                            </div>
                            
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="module greybg">
            <div class="wp">
                <h1>课程机构</h1>
                <div class="module3 eachmod">
                    <div class="module3_1 left">
                        <img width="228" height="463" src="/static/images/module3_1.jpg"/>
                        <p class="fisrt_word">名校来袭<br/>权威认证</p>
                        <a class="more" href="org-list.html">查看更多机构 ></a>
                    </div>
                    <div class="right">
                        <ul>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网">慕课网</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="北京大学">北京大学</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/qhdx-logo.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="清华大学">清华大学</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/njdx.jpg"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="南京大学">南京大学</span></p>
                                    </a>
                                </li>
                            
                                <li class="five">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_klgAUn5.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网2">慕课网2</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_Gn1sRjp.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网3">慕课网3</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_Y2Tonsq.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网3">慕课网3</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_OO2ykYP.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网4">慕课网4</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_V0TJOyb.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网5">慕课网5</span></p>
                                    </a>
                                </li>
                            
                                <li class="five">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/11/imooc_qEaMov1.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕课网666">慕课网666</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/12/bjdx.jpg"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕学网">慕学网</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/12/imooc_Gn1sRjp.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="python培训机构">python培训机构</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/12/bjdx_cCpdUw8.jpg"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="vuejs培训">vuejs培训</span></p>
                                    </a>
                                </li>
                            
                                <li class="">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/12/imooc_klgAUn5.png"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="nodejs培训">nodejs培训</span></p>
                                    </a>
                                </li>
                            
                                <li class="five">
                                    <a href="org-detail-homepage.html">
                                        <div class="company">
                                            <img width="184" height="100" src="/static/media/org/2016/12/bjdx_bcd0m07.jpg"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="慕学在线">慕学在线</span></p>
                                    </a>
                                </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="footer">
            <div class="wp">
                <ul class="cont">
                    <li class="logo"><a href=""><img src="/static/images/footlogo.png"/></a></li>
                    <li class="code"><img src="/static/images/code.jpg"/><p class="center">扫描关注微信</p></li>
                    <li class="third"><img class="fl" src="/static/images/tell.png"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li>
                </ul>

            </div>
            <p class="line"></p>
            <div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号:蜀ICP备xxxxx号-1</span>
            </div>
        </div>
    </footer>

<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="/static/js/selectUi.js" type='text/javascript'></script>
<script src="/static/js/deco-common.js" type='text/javascript'></script>
<script type="text/javascript" src="/static/js/plugins/laydate/laydate.js"></script>
<script src="/static/js/plugins/layer/layer.js"></script>
<script src="/static/js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="/static/js/deco-common.js"  type="text/javascript"></script>

    <script type="text/javascript" src="/static/js/index.js"></script>

</body>
</html>

  • login.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <title>慕学在线网登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
</head>
<body>
<div class="dialog" id="jsDialog">
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
    <h1>成功提交</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="cont">
        <h2>您的需求提交成功!</h2>
        <p></p>
    </div>
</div>
<div  class="noactivebox dialogbox" id="jsUnactiveForm" >
    <h1>邮件验证提示</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="center">
        <img src="/static/images/send.png"/>
        <p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">12@13.com</span>发送了邮件,<br/>为保证您的账号安全,请及时验证邮箱</p>
        <p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
        <p class="zy_success upmove"></p>
        <p style="display: none;" class="sendE2">没收到,您可以查看您的垃圾邮件和被过滤邮件,也可以再次发送验证邮件(<span class="c5c">60s</span>)</p>
        <p class="sendE">没收到,您可以查看您的垃圾邮件和被过滤邮件,<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次发送验证邮件</span></p>
    </div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
    <div class="c-box fff-box">
        <div class="wp header-box">
            <p class="fl hd-tips">慕学在线网,在线学习平台!</p>
            <ul class="fr hd-bar">
                <li>服务电话:<span>33333333</span></li>
                <li class="active"><a href="login.html">[登录]</a></li>
                <li><a href="register.html">[注册]</a></li>
            </ul>
        </div>
    </div>
</header>
<section>
    <div class="c-box bg-box">
        <div class="login-box clearfix">
            <div class="hd-login clearfix">
                <a class="index-logo" href="index.html"></a>
                <h1>用户登录</h1>
                <a class="index-font" href="index.html">回到首页</a>
            </div>
            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs">
                            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
                            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
                            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
            <div class="fl form-box">
                <h2>帐号登录</h2>
                <form action="/login/" method="post" autocomplete="off">
                    <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
                    <div class="form-group marb20 ">
                        <label>用&nbsp;户&nbsp;名</label>
                        <input name="username" id="account_l" type="text" placeholder="手机号/邮箱" />
                    </div>
                    <div class="form-group marb8 ">
                        <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</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="立即登录 > " />
                {% csrf_token %}
                </form>
                <p class="form-p">没有慕学在线网帐号?<a href="register.html">[立即注册]</a></p>
            </div>
        </div>
    </div>
</section>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/login.js"  type="text/javascript"></script>
</body>
</html>

类继承方式 实现url跳转

  • url
from users.views import LoginView

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),
    url('^$', TemplateView.as_view(template_name='index.html'), name='index'),
    url('^login/$', LoginView.as_view(), name='login'),
]
  • views
class LoginView(View):

    def get(self, request):
        return render(request, 'login.html')

    def post(self,request):
        user_name = request.POST.get('username')
        pass_word = request.POST.get('password')
        user = authenticate(username=user_name, password=pass_word)
        if user is not None:
            login(request, user)
            return render(request, 'index.html')
        else:
            return render(request, 'login.html', {'msg': '用户名或密码错误!'})
  • from 表单验证
form

# _*_ encoding:utf-8 _*_

__author__ = 'wrj008'
__date__ = '2018/3/10 16:45'

from django import forms


class LoginForm(forms.Form):
    username = forms.CharField(required=True)
    password = forms.CharField(required=True)
    
    
views

from .forms import LoginForm
class LoginView(View):

    def get(self, request):
        return render(request, 'login.html')

    def post(self, request):
        login_form = LoginForm()
        if login_form.is_valid():
            user_name = request.POST.get('username')
            pass_word = request.POST.get('password')
            user = authenticate(username=user_name, password=pass_word)
            if user is not None:
                login(request, user)
                return render(request, 'index.html')
        else:
            return render(request, 'login.html', {'msg': '用户名或密码错误!'})

  • 登陆提示
class LoginView(View):

    def get(self, request):
        return render(request, 'login.html')

    def post(self, request):
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            user_name = request.POST.get('username')
            pass_word = request.POST.get('password')
            user = authenticate(username=user_name, password=pass_word)
            if user is not None:
                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})
<div class="fl form-box">
    <h2>帐号登录</h2>
        <form action="/login/" method="post" autocomplete="off">
            <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
            <div class="form-group marb20 {% if login_form.errors.username %} errorput{% endif %}">
                <label>用&nbsp;户&nbsp;名</label>
                <input name="username" id="account_l" type="text" placeholder="手机号/邮箱" />
            </div>
            <div class="form-group marb8 {% if login_form.errors.password %}errorput{% endif %}">
                <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <input name="password" id="password_l" type="password" placeholder="请输入您的密码" />
            </div>
            <div class="error btns login-form-tips" id="jsLoginTips">{% for key,error in login_form.errors.items %}{{ error }}{% endfor %}{{ 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="立即登录 > " />
                {% csrf_token %}
        </form>
        <p class="form-p">没有慕学在线网帐号?
            <a href="register.html">[立即注册]</a>
        </p>
</div>
  • 用户注册
用户注册

用户注册通过邮箱注册界面注册,其中注册过程需要用户输入验证码,采用django-simple-captcha,于此同时,用户注册成功,需要提供用户邮箱激活,这里采用邮箱发送激活链接,保证用户操作。

<div class="tab-form">
    <form id="email_register_form" method="post" action="{% url 'register' %}" autocomplete="off">
        <input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />
        <div class="form-group marb20 {% if register_form.errors.email %} errorput {% endif %}">
            <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
            <input  type="text" id="id_email" name="email" value="{{ register_form.email.value }}" placeholder="请输入您的邮箱地址" />
        </div>
        <div class="form-group marb8 {% if register_form.errors.password %} errorput {% endif %}">
            <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
            <input type="password" id="id_password" name="password"  value="{{ register_form.password.value }}" placeholder="请输入6-20位非中文字符密码" />
        </div>
        <div class="form-group marb8 captcha1 {% if register_form.errors.captcha %} errorput {% endif %}">
            <label>验&nbsp;证&nbsp;码</label>
                {{ register_form.captcha }}
        </div>
        <div class="error btns" id="jsEmailTips">{% for key,error in register_form.errors.items %}{{ error }}{% endfor %}</div>
        <div class="auto-box marb8"></div>
            <input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册并登录" />
                {% csrf_token %}
    </form>
</div>
class RegisterView(View):
    def get(self,request):
        register_form = RegisterForm()
        return render(request, 'register.html', {'register_form':register_form})

    def post(self,request):
        register_form = RegisterForm(request.POST)
        if register_form.is_valid():
            username = request.POST.get('email')
            password = request.POST.get('password')
            user_register = UserProfile()
            user_register.username = username
            user_register.email = username
            user_register.password = make_password(password)
            user_register.is_active = False
            user_register.save()

            send_email(username, 'register')
            return render(request, 'login.html', {'register_form': register_form})
        else:
            return render(request, 'register.html', {'register_form': register_form})
class RegisterForm(forms.Form):
    email = forms.EmailField(required=True)
    password = forms.CharField(required=True, min_length=5)
    captcha = CaptchaField(error_messages={'invalid': '验证码不正确'})

settings


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'users',
    'course',
    'organization',
    'operation',
    'xadmin',
    'crispy_forms',
    'captcha'
]

# email setting
EMAIL_HOST = 'smtp.163.com'
EMAIL_PORT = 25
EMAIL_HOST_USER = '13083337152@163.com'
EMAIL_HOST_PASSWORD = '*****'
EMAIL_USE_TLS = False
EMAIL_FROM = '13083337152@163.com'

urls

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),
    url('^$', TemplateView.as_view(template_name='index.html'), name='index'),
    url('^login/$', LoginView.as_view(), name='login'),
    url('^register/$', RegisterView.as_view(), name='register'),
    url(r'^captcha/', include('captcha.urls')),
    url(r'^active/(?P<active_code>.*)/$', ActiveView.as_view(), name='active')
]

email_utils

# _*_ encoding:utf-8 _*_

__author__ = 'wrj008'
__date__ = '2018/3/12 9:58'

from random import Random
from django.core.mail import send_mail

from users.models import EmailVerifyRecord
from edu_gmooc.settings import EMAIL_FROM


def random_code(randomlength=8):
    str = ''
    char = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789'
    length = len(char) - 1
    random = Random()
    for i in range(randomlength):
        str += char[random.randint(0, length)]
    return str


def send_email(email, send_type='register'):
    email_verify = EmailVerifyRecord()
    email_verify.email = email
    code = random_code(16)
    email_verify.code = code
    email_verify.send_type = send_type
    email_verify.save()

    email_title = ''
    email_body = ''
    if send_type == 'register':
        email_title = '用户注册'
        email_body = '点击下面链接注册:http://127.0.0.1:8000/active/{0}'.format(code)
        send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
        if send_status:
            pass

  • 密码找回
密码找回

用户进入密码找回界面,通过提交邮箱和验证码,收到修改密码地址,通过生成的随机修改密码地址,进行密码修改,修改密码需要隐藏用户账户,验证用户修改密码界面是够有输入错误,如有错误则,错误提示,没有错误则返回登录界面。

<div class="c-box bg-box">
        <div class="login-box clearfix">
            <div class="hd-login clearfix">
                <a class="index-logo" href="index.html"></a>
                <h1>忘记密码</h1>
                <a class="index-font" href="index.html">回到首页</a>
            </div>
            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs">
                        <li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
                        <li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
                        <li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
            <div class="fl form-box">
                <h2>忘记密码</h2>
                <form id="jsFindPwdForm" method="post" action="{% url 'forget_pwd' %}" autocomplete="off">
                    <div class="form-group marb20 {% if forgetpwd_form.errors.email %}errorput{% endif %} ">
                        <label>帐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        <input type="text" id="account" name="email" value="None" placeholder="邮箱" />
                    </div>
                    <div class="form-group captcha1 marb38">
                        <label>验&nbsp;证&nbsp;码</label>
                        {{ forgetpwd_form.captcha }}
                    </div>
                    <div class="error btns" id="jsForgetTips">{% for key,error in forgetpwd_form.errors.items %} {{ error }}{% endfor %}{{ msg }}</div>
                    <input type="hidden" name="sms_type" value="1">
                    <input class="btn btn-green" id="jsFindPwdBtn" type="submit" value="提交" />
                    <p class="form-p" style="bottom:40px;">您还可以<a href="login.html"> [直接登录]</a></p>
                {% csrf_token %}
                </form>
            </div>
        </div>
    </div>

    urls
    url('^forgetpwd/$', ForgetPwdView.as_view(), name='forget_pwd'),
    
    
    froms
    
    class FogetPwdForm(forms.Form):
        email = forms.EmailField(required=True)
        captcha = CaptchaField(error_messages={'invalid': '验证码不正确'})
        
    email-send
    elif send_type == 'forget':
        email_title = '用户密码找回'
        email_body = '点击下面链接重置密码:http://127.0.0.1:8000/reset/{0}'.format(code)
        send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
        if send_status:
            pass
    
    views
    class ForgetPwdView(View):
    def get(self, request):
        forgetpwd_form = FogetPwdForm(request.POST)
        return render(request, 'forgetpwd.html',{'forgetpwd_form': forgetpwd_form})

    def post(self,request):
        forgetpwd_form = FogetPwdForm(request.POST)
        if forgetpwd_form.is_valid():
            email = request.POST.get('email')
            user = UserProfile.objects.get(email=email)
            if user is not None:
                send_email(email, 'forget')
                return render(request, 'common/mail_success.html')
            else:
                return render(request, 'forgetpwd.html', {'msg': '用户不存在', 'forgetpwd_form': forgetpwd_form})
        else:
            return render(request, 'forgetpwd.html', {'forgetpwd_form': forgetpwd_form})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>密码修改</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/animate.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">

<body>
<div class="wp">
    <div class="resetpassword" id="resetPwdForm">
        <h1>修改密码</h1>
        <p>已经通过验证,请设置新密码</p>
        <form id="reset_password_form" action="{% url 'modify_pwd' %}" method="post">
            <input type="hidden" name="email" value="{{ email }}">
            <ul>
                <li>
                    <span class="">新 密 码 :</span>
                    <input type="password" name="password1" id="pwd" placeholder="6-20位非中文字符">
                    <i></i>
                </li>
                <li>
                    <span class="">确定密码:</span>
                    <input type="password" name="password2" id="repwd" placeholder="6-20位非中文字符">
                    <i></i>
                </li>
                <div class="error btns login-form-tips" id="jsLoginTips">{% for key,error in modifypwd_form.errors.items %}{{ error }}{% endfor %}{{ msg }}</div>
                <li class="button">
                     <input class="btn btn-green" id="jsLoginBtn" type="submit" value="提交" />
                </li>
            </ul>
            {% csrf_token %}
        </form>
    </div>
    <div class="resetpassword" id="reset_password_tips" style="display:none;">
        <h1>修改密码成功,请重新登录</h1>
        <img class="fl" src="/static/images/check2.png">
        <p class="successword">已经成功修改密码,请重新登录</p>
    </div>
</div>
</body>
</html>
urls
    url(r'^reset/(?P<active_code>.*)/$', ResetPwdView.as_view(), name='reset'),
    url('^modify_pwd/$', ModifyPwdView.as_view(), name='modify_pwd'),


forms
class ModifyForm(forms.Form):
    password1 = forms.CharField(required=True, min_length=5)
    password2 = forms.CharField(required=True, min_length=5)

views
class ResetPwdView(View):
    def get(self, request, active_code):
        all_actives = EmailVerifyRecord.objects.filter(code=active_code)
        if all_actives:
            for active in all_actives:
                email = active.email
            return render(request, 'password_reset.html', {'email': email})
        else:
            return render(request, 'common/active_fail.html')


class ModifyPwdView(View):
    def post(self, request):
        modifypwd_form = ModifyForm(request.POST)
        if modifypwd_form.is_valid():
            email = request.POST.get('email')
            pwd1 = request.POST.get('password1', '')
            pwd2 = request.POST.get('password2', '')
            if pwd1 == pwd2:
                user = UserProfile.objects.get(email=email)
                user.password = make_password(pwd1)
                user.save()
                return render(request, 'login.html')
            else:
                return render(request, 'password_reset.html', {'msg': '密码不一致', 'email': email})
        else:
            email = request.POST.get('email')
            return render(request, 'password_reset.html', {'email': email, 'modifypwd_form': modifypwd_form})

  • 本篇博客原视频博主[慕课在线教育平台]
  • 本篇博客撰写人: XiaoJinZi 转载请注明出处
  • 学生能力有限 附上邮箱: 986209501@qq.com 不足以及误处请大佬指责

相关文章

  • 第四章 在线教育平台(用户登录注册)

    用户登录注册界面 标签: django 首页与登陆界面配置 复制主页及相关文件,其中包括静态文件。 views i...

  • 步骤一

    1. 已有账号登录:本事件适用于已经注册成为平台的用户点击; 2. 新用户注册:本事件适用于未成功注册本平台的用户...

  • 简单需求分析

    用户模块 1注册页 注册时验证用户名是否被注册 完成用户信息注册 2登录页 显示登录页 实现用户的登录功能 3 用...

  • 产品注册登录功能设计总结

    1、什么是产品的登录注册功能? 注册:用户填写账户信息,注册成为会员; 登录:用户使用会员账号登录产品。 2、注册...

  • ios app先登录VS后登录

    APP是先让用户登录注册好,还是先让用户进入再选择登录注册的好? 让用户先登录注册的,从APP方来讲可以让想看到内...

  • 微信扫码登录及其拉起小程序汇总

    微信扫码登录1.1. 开发前准备工作* 微信开放平台申请用户并认证用户实体(企业用户)。* 微信开放平台注册应用...

  • APP的注册和登录功能设计

    一、为什么需要注册和登录? 是否需要注册和登录的关键取决于产品形态。 如果用户注册登录对于用户需求、产品功能、商业...

  • spring+springMVC+mybatis的整合 part

    登录注册 首先,我们webapp要实现用户登录,必须得能新建用户。所以先把注册用户放在前面。预期功能:打开注册页面...

  • 【Android】QQ分享、QQ空间分享

    开发者注册、应用创建 登录腾讯开放平台注册开发者账号并登录; 登陆后,点击右上角用户头像展开菜单,选择管理中心;管...

  • kiwiDiary-页面功能设计

    功能设计 用户登录注册页面 完成用户登录注册功能,由于微信或者其他第三方登录以及手机号注册登录需要购买相应的服务网...

网友评论

      本文标题:第四章 在线教育平台(用户登录注册)

      本文链接:https://www.haomeiwen.com/subject/tgapqftx.html