Day_04

1.注册功能

1.1 展示注册页面

  • 1.1.1 创建web应用 & 注册
    python manage.py startapp web
    swttings中注册
    image
【在web下创建两个文件】
	* 1、创建views文件夹（根据不同的需要放在同一个py文件中），删除自带的views.py（有限）；
	* 2、创建templates文件，存放我们的html模板 【注意：在不同应用的templates下，创建一个app同名的文件夹，再把我们的html模板放进去，为了防止相同功能读取模板时串烧】例如：web/templates/web/11.html
  • 1.1.2 创建母板（头部内容相同）
    • layout/basic.html
      image
    • 导入bootstrap、font-awesome、js 他们都保存在了static目录下
      image
  • 1.1.3 URL准备
    不同的应用我们创建各自的urls,在整个sass项目下的urls,我们做个分流
    • sass/urls
      image
    • web/urls
      image
  • 1.1.4 创建头部文件
    1. 创建一个register访问url，并执行指定函数
2. 在account中创建register方法，返回register.html
3. register.html继承basic.html
4. 在basic.html中设置头部文件
basic.html 
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <style>
        .navbar-default{
            border-radius:0;
        }
    </style>
    {% block css %} {% endblock %}
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Tracer平台</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">产品功能</a></li>
                <li><a href="#">企业方案</a></li>
                <li><a href="#">帮助文档</a></li>
                <li><a href="#">价格</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

{% block content %}

{% endblock %}

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

{% block js %} {% endblock %}
</body>
</html>
register.html 
{% extends 'layout/basic.html' %}

{% block title %} 用户注册 {% endblock %}

{% block css %}{% endblock %}

{% block content %}
<div class="container">
    <h1>注册页面</h1>
</div>

{% endblock %}

{% block js %}{% endblock %}
  • 1.1.5 生成表结构
    • web/models.py:
      image
      django会通过orm自动帮我们在数据库中生成,我们只需要在models中设计表结构即可
      使用命令生成：
      python manage.py makemigrations
      python manage.py migrate
  • 1.1.6 创建RegisterModelForm类
    • 在web/forms/account.py中创建
      image
  • 1.1.7 在视图函数中去实例化
    image
  • 1.1.8 在register.html模板中去展示
register.html 
{% block content %}
<div class="account">
    <div class="title">用户注册</div>
    <form id="form" method="Post" novalidate>
        {% csrf_token %}
        {% for field in form %}
        {% if field.name == 'code' %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
                <div class="col-xs-7">
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
                <div class="col-xs-5">
                    <input id="smsBtn" type="button" class="btn btn-default" value="点击获取验证码">
                </div>
            </div>
        </div>
        {% else %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
                {{ field }}
                <span class="error-msg">{{ field.errors.0 }}</span>
            </div>
        </div>
        {% endif %}
        {% endfor %}

        <div class="row">
            <div class="col-xs-3">
                <input id="submit" type="button" class="btn btn-primary" value="注  册"></input>
            </div>
        </div>

    </form>
</div>

{% endblock %}
  • 1.1.9 结果展示
    image

-----------------------------------------------

1.2 点击获取验证码

  • 1.2.1 按钮绑定点击事件
    image

  • 1.2.2 获取手机号
    image

  • 1.2.3 发送Ajax请求
    image

  • 1.2.4 手机号校验

    • 不能为空
    • 格式正确
    • 没有注册
      image
      注意：当我们想要用视图函数中的参数的时候，就可以去重写我们的构造函数

  • 1.2.5 验证通过

    • 发送短信
    • 将短信保存到redis中（60s）
      image

  • 1.2.6 成功 | 失败

    • 成功，错误信息
    • 失败，倒计时
    disabled属性:
  	$("#btnSms").prop("disabled",true);添加disabled属性，不可操作
  	$("#btnSms").prop("disabled",false);移除disabled属性，可操作
定时器：
  	var obj = setInterval(funcation(){
  	console.log(123);
  	},1000)
  	claerInterval(obj);

    var time = 60
var obj = setInterval(funcation(){
  	time = time - 1;
  	if (time < 1){
  		claerInterval(obj);
  	}
  },1000)

    image

-----------------------------------------------

兄弟们，遇到问题了，头大？下一篇见

posted @ 2023-04-26 13:20  Cool-Bo  阅读(16)  评论(0)    收藏  举报