（42）-- Django框架之前台注册登录

最新推荐文章于 2022-12-24 15:25:15 发布
最新推荐文章于 2022-12-24 15:25:15 发布
阅读量613 收藏 2
点赞数
分类专栏： HTML基础 Django框架 文章标签： Django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fredreck1919/article/details/79497762
版权
这篇博客介绍了如何在Django框架下创建前端的注册和登录界面，包括register.html和login.html的实现过程，适合Python和Django的学习者参考。
摘要由CSDN通过智能技术生成

#Django框架之前台注册登录界面

# register.html

<!DOCTYPE html>
<html lang="en" class="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title> Flyme 账号 - 注册</title>
    <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。">
    <meta name="keywords" content="魅族 meizu 登录flyme 云服务 查找手机 充值账号 MX M9 MX2">
    <link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/myweb/public/js/bootstrap.min.js"></script>
    <!-- 兼任ie9以下 -->
    <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 自定义 -->
    <link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
    <link rel="stylesheet" type="text/css" href="/static/myweb/public/css/register.css">
    <script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
    <script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>

</head>
<body>
  <!-- 导航 --> 
  <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
    <nav class="navbar navbar-default header ">
      <div class="container clearfix">
          <div class="layout-header-logo navbar-left">
              <a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
                <img src="/static/myweb/public/img/logo.png">
              </a>
          </div>      
      </div>
    </nav>
  </div><!-- 导航 E--> 

  <!-- 主内容区域 -->
  <div id="content" class="content">  
    <div class="container-fluid"> 
        <div class="banner-box hidden-xs hidden-sm">
            <div class="container"> 
                <form action="{% url 'doregister' %}" method="post" id="mainForm" class="main-form">
                    {% csrf_token %}
                    <div class="tab-title">
                        <a class="linkABlue" id="toTelRegister" href="javascript:void(0)">注册 Flyme 账号</a>
                    </div>
                    <div class="tip-box visiblility-hidden">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <i class="glyphicon glyphicon-exclamation-sign"></i>
                            <span class="tip-font">请输入合法的手机号码</span>
                            <span aria-hidden="true" class="cha">×</span>
                        </button>
                    </div>
                    <div class="normalInput cycode-box fieldInput" id="cycode-box">
                        <div class="cycode-selectbox">
                            <input class="ipt-account inp-focus" name="username" id="username" maxlength="50" placeholder="用户名" autocomplete="off">
                        </div>
                    </div>
                    <div class="normalInput cycode-box fieldInput" id="cycode-box">
                        <div class="cycode-selectbox">
                            <input class="ipt-account inp-focus" name="phone" id="account" maxlength="50" placeholder="手机号" autocomplete="off">
                        </div>
                    </div>
                    <div class="normalInput fieldInput passwd-box">
                        <input class="inp-focus" name="password" id="password" maxlength="16" placeholder="密码" autocomplete="off" type="password">
                    </div>
                    <div class="normalInput fieldInput ">
                        <input class="inp-focus" name="code" id="code" maxlength="16" placeholder="验证码" autocomplete="off" type="text">
                        <div style="width: 100px;height:25px;position: absolute;right:0px;top:0px">
                            <img src="/admin/vcode" οnclick="this.src='/admin/vcode?'+Math.random()">
                        </div>
                    </div>

                    <div id="flymeService" class="rememberField" style="font-size:12px;">
                        <label class="pointer" for="acceptFlyme" tabindex="0">点击立即注册，即表示您同意并愿意遵守</label>
                        <a href="/serviceAgreement" target="_blank" class="linkABlue">Flyme服务协议</a>
                        <label class="pointer">和</label>
                        <a href="#" target="_blank" class="linkABlue">法律声明</a>
                    </div>
                    <a id="nextStep"  class="fullBtnBlue register-btn" data-step="1">立即注册</a>
                    <div class="transferField">
                        <a class="go2register linkABlue" href="#" id="toLogin">登录</a>
                    </div>
                </form>
            </div>
        </div>

        <script type="text/javascript">
          

          $("#nextStep").click(function(){
              $("#mainForm").submit();
          });
          
        </script>
     
    </div>
  </div>
  <!-- 主内容区域  E-->

  <!-- 底部区域 -->
  <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
    <div class="container">
      <div class="footer-layer1">
        <div class="footer-innerLink">
          <a href="#" target="_blank" title="关于魅族">关于魅族</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="工作机会">工作机会</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="联系我们">联系我们</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="法律声明">法律声明</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          
          <div href="javascript:void(0);" id="globalName" class="footer-language" title="简体中文">
            简体中文   
            <div id="globalContainer" class="footer-language_menu">
              <a href="#" id="i18n-link" title="English" class="ClobalItem">English</a>
            </div>
          </div>
        </div>
        <div class="footer-service">
          <span class="service-label">客服热线</span>
          <span class="service-num">400-788-3333</span>
          <a id="service-online" class="service-online" href="javascript:void(0);" title="在线客服">在线客服</a>
        </div>
        <div class="footer-outerLink">
          <a class="footer-sinaMblog" href="#" target="_blank"><i class="i_icon"></i></a>
          
          <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);" target="_blank"><i class="i_icon"></i></a>
          <a class="footer-qzone" href="#" target="_blank"><i class="i_icon"></i></a>
        </div>
      </div>
      <div class="clear"></div>
      <div id="flymeCopyright" class="copyrightWrap">
        <div class="copyrightInner">
          <span>&copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
          <a href="#" class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
          <a href="#" class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
          <a target="_blank" href="#" class="linkAGray">营业执照</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 E -->
  
<script type="text/javascript">
  nLogin();
</script>
</body>
</html>




# login.html

<!DOCTYPE html>
<html lang="en" class="">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title> Flyme 账号 - 登录</title>
   <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。" />
  <meta name="keywords" content="魅族  meizu 登录flyme 云服务  查找手机  充值账号  MX M9 MX2" />    <link href="/static/myweb/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="/static/myweb/public/img/favicon.ico" rel="icon" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="/static/myweb/public/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/myweb/public/js/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/myweb/public/js/bootstrap.min.js"></script>
    <!-- 兼任ie9以下 -->
    <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 自定义 -->
    <link rel="stylesheet" type="text/css" href="/static/myweb/public/css/global.css">
    <link rel="stylesheet" type="text/css" href="/static/myweb/public/css/register.css">
    <script type="text/javascript" src="/static/myweb/public/js/rem.js"></script>
    <script type="text/javascript" src="/static/myweb/public/js/topNav.js"></script>

</head>
<body>
  <!-- 导航 --> 
  <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
    <nav class="navbar navbar-default header ">
      <div class="container clearfix">
          <div class="layout-header-logo navbar-left">
              <a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
                <img src="/static/myweb/public/img/logo.png">
              </a>
          </div>      
      </div>
    </nav>
  </div><!-- 导航 E--> 

  <!-- 主内容区域 -->
  <div id="content" class="content">  
    <div class="container-fluid"> 
    <div class="banner-box hidden-xs hidden-sm">
      <div class="container">
        <form action="{% url 'dologin' %}" method="post" id="mainForm" class="main-form">
          {% csrf_token %}
          <div class="tab-title">
            <a class="linkAGray" id="toAccountLogin" href="javascript:void(0);">账号登录</a>
          </div>
          <div class="tip-box visiblility-hidden">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <i class="glyphicon glyphicon-exclamation-sign"></i>
              <span class="tip-font"></span>
              <span aria-hidden="true" class="cha">×</span>
            </button>
          </div>
          <div class="normalInput cycode-box fieldInput" id="cycode-box">
            <div class="cycode-selectbox">
              <input class="ipt-account inp-focus" name="username" id="account" maxlength="50" placeholder="用户名" autocomplete="off">
            </div>
          </div>
          <div class="normalInput fieldInput passwd-box">
            <input class="inp-focus" name="password" id="password" maxlength="16" placeholder="密码" autocomplete="off" type="password">
           </div>
          <div class="normalInput fieldInput ">
              <input class="inp-focus" name="code" id="code" maxlength="16" placeholder="验证码" autocomplete="off" type="text">
              <div style="width: 100px;height:25px;position: absolute;right:0px;top:0px">
                  <img src="/admin/vcode" οnclick="this.src='/admin/vcode?'+Math.random()">
              </div>
          </div>

          <a id="register" class="fullBtnBlue">登录</a>
          <div class="transferField">
            <a class="go2forgetpwd linkABlue rememberFieldForA" href="#">忘记密码?</a>
            <a class="go2register linkABlue" href="./register.html" id="toRegister">注册</a>
          </div>
        </form>

         <script type="text/javascript">
          

          $("#register").click(function(){
              $("#mainForm").submit();
          });
          
        </script>
      </div>
    </div>
     
    </div>
  </div>
  <!-- 主内容区域  E-->

  <!-- 底部区域 -->
  <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
    <div class="container">
      <div class="footer-layer1">
        <div class="footer-innerLink">
          <a href="#" target="_blank" title="关于魅族">关于魅族</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="工作机会">工作机会</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="联系我们">联系我们</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          <a href="#" target="_blank" title="法律声明">法律声明</a>
          <img class="foot-line" src="/static/myweb/public/img/space.gif">
          
          <div href="javascript:void(0);" id="globalName" class="footer-language" title="简体中文">
            简体中文   
            <div id="globalContainer" class="footer-language_menu">
              <a href="#" id="i18n-link" title="English" class="ClobalItem">English</a>
            </div>
          </div>
        </div>
        <div class="footer-service">
          <span class="service-label">客服热线</span>
          <span class="service-num">400-788-3333</span>
          <a id="service-online" class="service-online" href="javascript:void(0);" title="在线客服">在线客服</a>
        </div>
        <div class="footer-outerLink">
          <a class="footer-sinaMblog" href="#" target="_blank"><i class="i_icon"></i></a>
          
          <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);" target="_blank"><i class="i_icon"></i></a>
          <a class="footer-qzone" href="#" target="_blank"><i class="i_icon"></i></a>
        </div>
      </div>
      <div class="clear"></div>
      <div id="flymeCopyright" class="copyrightWrap">
        <div class="copyrightInner">
          <span>&copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
          <a href="#" class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
          <a href="#" class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
          <a target="_blank" href="#" class="linkAGray">营业执照</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 E -->
  
<script type="text/javascript">
  //
  nLogin();
</script>
</body>
</html>



兄弟连学python


Python学习交流、资源共享群：563626388 QQ


Fredreck1919
关注
专栏目录
python-Django实现前端登陆界面-包含登陆账号和密码
NLP与推荐算法
04-19 844
python账号密码登陆及登出Django实现功能
9Django-----------Django框架------------安装使用、基本介绍
weixin_43761516的博客
12-28 1379
一、Django框架介绍 二、Django框架搭建 （一）环境搭建 （二）项目实例 三、项⽬结构介绍 （一）URL与视图 1）视图的定义 2）路由的定义 3）URL模块化 4）URL添加参数 5）url命名 （二）模板 1）if标签 2）for...in...标签 3）a标签 （三）数据库 1）Django配置连接数据库 2）创建ORM模型 3）映射模型到数据库中 4）ORM的增删改查 5）F表达式和Q表达式----优化ORM 6）QuerySet的⽅法 7）ORM模型迁移 （四）⾼级视图 1）请求方式 2
翻译www.djangobook.com之第四章：Django模板系统
hideto
01-03 688
[color=red][b]The Django Book：第4章 Django模板系统[/b][/color] revised by [url=http://xin-wang.iteye.com/]xin_wang[/url] 前面的章节我们看到如何在视图中返回HTML，但是HTML是硬编码在Python代码中的 这会导致几个问题： 1，显然，任何页面的改动会牵扯到Python代...
django框架：注册模型、自定义管理页面
King --- 学习、总结、分享
07-04 1413
python django使用确实方便，而且django已经把大部分增、删、改、查的繁琐工作内容做完了。所以我们只需要修改以下页面即可。比如说：书的列表。需要他显示主键（pk）、书名、出版时间。这样就需要自定义管理页面。在注册模型时，定义一个类BookInfoAdmin(admin.ModelAdmin),并加上  list_display = ['pk','btitle','bpub_date'...
Python框架Django实现简单注册登录功能
热门推荐
ChenHuang1998的博客
01-22 1万+
环境搭建以及项目创建可以参考上一篇文章，这里我就略过了 Anaconda搭建django环境和创建项目 下面直接开始 环境：Python 3.5    Django 2.2.1 1.创建独立app 建议独立app的好处是功能模块化，后期更易维护 创建app 在项目配置文件中添加app名称 2.创建模型models 构建User表 class User(mo...
Django快速入门 —— 前台管理 （图书管理系统）
毕加索的忧伤
03-03 595
Django快速入门： 前台管理 第一步: URLconf 路由管理 在 Django 中，定义 URLconf 包括正则表达式、视图两部分 。 Django 使用正则表达式匹配请求的URL，一旦匹配成功，则调用应用的视图 。 注意：只匹配路径部分，即除去域名、参数后的字符串 。 在主配置文件中添加子配置文件，使主 urlconf 配置连接到子模块的 urlconf 配置文件 。 主配置文件配置如下, 已经配置过， 可以忽略此步骤: from django.contrib import ad
毕业设计-Python基于Django框架图书管理系统，包含源码、数据库文件、运行截图等
01-24
人生苦短，我用Python，咱们今天就来分享一个用Python语言开发的基于Django框架的图书管理系统吧。项目前台和后台界面模板都是自己编写，前台采用Bootstrap框架UI,后台EasyUI框架UI,没有采用Django自动生成的那个...
python---Django的学习----后台管理和前台原理
Lue的博客
07-31 536
Django 的安装 pip3 install Django==2-i https://pypi.douban.com/simple 项目：以图书管理系统为示例 ，实现图书管理的基本功能。 目录说明: manage.py一个命令行工具，可以使你用多种方式对 Django 项目进行交互内层的目录：项目的真正的Python包 __init__.py一个空文件，它告诉Python这个目录应该被看做一个Python包 settings.py 项目的配置 urls.py ...
Day-2实现django框架的前端界面
林鹏
04-15 3207
我们昨天已经将本次项目的基础环境搭建完成，今天我们需要将我们的django框架的前端界面部分完成 任务： 书城的界面 一.创建django项目 首先在cmd格式下输入 django-admin startproject web_book（文件名自己定义） 创建项目的django文件 然后 cd web_book 输入python manage.py runserver进行测试，这...
毕业设计 - Python基于Django在线音乐网站设计
最新发布
04-05
今天给大家带来的是一个基于Python语言开发的Django框架的在线音乐网站，有前台和后台哦！前台用户可以注册和登录网站，用户可以根据歌曲关键词搜索歌曲，可以按照歌曲分类查看歌曲排行或者总排行，打开歌曲播放页面...
简单的一个前台注册页面
02-09
一个简单的BS前台注册页面，可以完成一般的注册用途，写的很是简单，菜鸟刚刚学会的。
Django实现简单的用户登录
流夏_
09-11 5682
Django实现简单的用户登录 （未连接数据库）最基础的模型 由于本人第一次写博客，不足之处还请大家多多指教。 昨天到现在学习了Django的一些基础，如加载静态文件，url传递参数，url命名以及反向解析等，这些以后都会在博客里陆续提到。 有了以上的基础以后，今天晚上就写了一个简单的登录模型，为后续连接数据库做做准备。 项目名–myshop app名–zhihu（本人随便起的） ...
django前台开发框架
cnbird's blog
12-26 1549
http://twitter.github.com/bootstrap/
python下的django入门项目---图书管理系统（前台管理）
lijua9794的博客
07-30 668
一. URL 路由管理 在 Django 中，定义 URLconf 包括正则表达式、视图两部分 。 Django 使用正则表达式匹配请求的URL，一旦匹配成功，则调用应用的视图 。 注意：只匹配路径部分，即除去域名、参数后的字符串 。 在主配置文件中添加子配置文件，使主 urlconf 配置连接到子模块的 urlconf 配置文件 二.视图函数业务处理逻辑 在 Django 中，视图对WEB请求进行回应( response )。 ...
Django实战(一)-----用户登录与注册系统3（前端页面、登录视图）
weixin_30847939的博客
03-13 2740
基本框架搭建好了后，我们就要开始丰富页面内容了。最起码，得有一个用户登录的表单不是么？（注册的事情我们先放一边。） 一、 原生HTML页面 删除原来的login.html文件中的内容，写入下面的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
python--Django快速入门（前台管理）
weixin_56993834的博客
07-16 268
第一步:URLconf 路由管理 在 Django 中,定义 URLconf 包括正则表达式、视图两部分 。 Django 使用正则表达式匹配请求的URL,一旦匹配成功,则调用应用的视图 。 注意:只匹配路径部分,即除去域名、参数后的字符串 。 在主配置文件中添加子配置文件,使主 urlconf 配置连接到子模块的 urlconf 配置文件 。 主配置文件配置如下, 已经配置过, 可以忽略此步骤: # BookManage/urls.py urlpatterns = [ path('admin.
10.2、Django入门--前台管理
qq_43604376的博客
12-24 1248
python中Django框架入门
Django快速入门——项目（四）前台管理
qq_27172205的博客
07-23 143
第一步: URLconf 路由管理 在 Django 中，定义 URLconf 包括正则表达式、视图两部分 。 Django 使用正则表达式匹配请求的URL，一旦匹配成功，则调用应用的视图 。 注意：只匹配路径部分，即除去域名、参数后的字符串 。 在主配置文件中添加子配置文件，使主 urlconf 配置连接到子模块的 urlconf 配置文件 。 主配置文件my2django/urls.py from django.urls import path, include urlpatterns = [
学习使用Django2 前台页面展示
weixin_30580341的博客
08-28 155
Django 2.1 python 3.7 创建一个虚拟环境 python -m venv 虚拟环境名称 进入虚拟环境 下载django pip install django==2.1 1 创建项目： 2 3 django-admin startproject 项目名称 . -->创建项目 有个点...
Django框架实践：构建手机商城后台系统（一）
后台主要负责商家的操作，包括商品的增删改查以及管理商城的注册登录用户。前端则需要实现用户浏览商品、添加到购物车、登录注册和个人中心等功能。由于支付功能涉及到第三方服务，因此在此不进行深入讨论。 项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值