• 用户注册功能

    ### 一、设计接口思路

     

    - 分析业务逻辑,明确在这个业务中需要涉及到几个相关子业务,将每个子业务当做一个接口来设计

    - 分析接口的功能任务,明确接口的访问方式与返回数据:

      - 接口的请求方式,如GET 、POST 、PUT等

      - 接口的URL路径定义

      - 需要前端传递的数据及数据格式(如路径参数、查询字符串、请求体表单、JSON等)

      - 返回给前端的数据及数据格式

     

     

     

    ### 二、功能分析

     

    - 用户名判断是否存在

    - 手机号判断是否存在

    - 图片验证码

    - 短信验证码

    - 注册保存用户数据

     

    图片验证码、短信验证码考虑到后续可能会在其他业务中也会用到,因此将验证码功能独立出来,**创建一个新应用verifications,在此应用中实现图片验证码、短信验证码**

     

     

     

    ### 三、图片验证码接口代码实现

     

    #### 1.图片验证码认证

     

    **请求方法**:**GET** 

     

    **url定义**:`/image_codes/<uuid:image_code_id>/`

     

    **请求参数**:url路径参数

     

    | 参数        | 类型       | 前端是否必须传 | 描述           |

    | ----------- | ---------- | -------------- | -------------- |

    | image_codes | uuid字符串 | 是             | 图片验证码编号 |

     

    uuid:Universally unique identifier(eg. 123e4567-e89b-12d3-a456-426655440000)

     

     

     

    #### 2.后端视图实现

     

    a.将生成图像验证码的模块文件夹(百度云盘有提供captcha文件夹)复制粘贴到项目根目录utils文件夹下

     

     

     

    b.由于验证(图片验证、短信验证)功能,以后有可能在其他应用或项目中重用,所以单独创建一个应用来实现,所有验证相关的业务逻辑接口。在apps目录中创建一个verifications应用,并在settings.py文件中的INSTALLED_APPS列表中指定。

     

    需要安装pillow包

     

    ```python

    # 在verifications/views.py文件中添加如下代码:

     

     

    import logging

     

    from django.shortcuts import render

    from django.views import View

    from django_redis import get_redis_connection

    from django.http import HttpResponse

     

    from utils.captcha.captcha import captcha

    # 安装图片验证码所需要的 Pillow 模块

    # pip install Pillow

    from . import constants

    from users.models import Users

     

    # 导入日志器

    logger = logging.getLogger(‘django‘)

     

     

    class ImageCode(View):

        """

        define image verification view

        # /image_codes/<uuid:image_code_id>/

        """

        def get(self, request, image_code_id):

            text, image = captcha.generate_captcha()

            

            # 确保settings.py文件中有配置redis CACHE

            # Redis原生指令参考 http://redisdoc.com/index.html

            # Redis python客户端 方法参考 http://redis-py.readthedocs.io/en/latest/#indices-and-tables

            con_redis = get_redis_connection(alias=‘verify_codes‘)

            img_key = "img_{}".format(image_code_id).encode(‘utf-8‘)

            # 将图片验证码的key和验证码文本保存到redis中,并设置过期时间

            con_redis.setex(img_key, constants.IMAGE_CODE_REDIS_EXPIRES, text)

            logger.info("Image code: {}".format(text))

            

            return HttpResponse(content=image, content_type="images/jpg")

    ```

     

     

     

    c.为了保存应用中用到的常量信息,需要在verifications应用下创建一个constants.py文件

     

    ```python

    # 在verifications/constants.py文件中加入如下代码:

     

    # 图片验证码redis有效期,单位秒

    IMAGE_CODE_REDIS_EXPIRES = 5 * 60

    ```

     

     

     

    d.本项目需要将图形验证码、短信验证码以及用户的会话信息保存到redis服务器中,所以需要在settings.py文件中指定如下配置信息:

     

    ```python

    # settings.py文件中加入如下内容:

     

    CACHES = {

        "default": {

            "BACKEND": "django_redis.cache.RedisCache",  # 指定redis缓存后端

            "LOCATION": "redis://127.0.0.1:6379/0",

            "OPTIONS": {

                "CLIENT_CLASS": "django_redis.client.DefaultClient",

                # "PASSWORD": "mysecret"

            }

        },

        # 同样可以指定多个redis

        "session": {

            "BACKEND": "django_redis.cache.RedisCache",

            "LOCATION": "redis://127.0.0.1:6379/1",

            "OPTIONS": {

                "CLIENT_CLASS": "django_redis.client.DefaultClient",

            }

        },

        "verify_codes": {

            "BACKEND": "django_redis.cache.RedisCache",

            "LOCATION": "redis://127.0.0.1:6379/2",

            "OPTIONS": {

                "CLIENT_CLASS": "django_redis.client.DefaultClient",

            }

        },

        "sms_codes": {

            "BACKEND": "django_redis.cache.RedisCache",

            "LOCATION": "redis://127.0.0.1:6379/3",

            "OPTIONS": {

                "CLIENT_CLASS": "django_redis.client.DefaultClient",

            }

        },

     

    }

     

    # 将用户的session保存到redis中

    SESSION_ENGINE = "django.contrib.sessions.backends.cache"

    # 指定缓存redis的别名

    SESSION_CACHE_ALIAS = "session"

    ```

     

     

     

    e.在verifications应用下创建一个urls.py文件并添加如下内容:

     

    ```python

    # verifications应用下创建一个urls.py

     

    from django.urls import path, re_path

     

    from . import views

     

    app_name = "verifications"

     

    urlpatterns = [

        # re_path(r‘^image_codes/(?P<image_code_id>[\w-]+)/$‘, view=views.ImageCodeView.as_view(), name="image_code"),

        # image_code_id为uuid格式

        path(‘image_codes/<uuid:image_code_id>/‘, views.ImageCode.as_view(), name=‘image_code‘),

     

    ]

    ```

     

     

     

    #### 3.前端代码实现

     

    html代码:

     

    ```jinja2

    {% extends ‘base/base.html‘ %}

    {% load static %}

    <!-- css title start -->

    {% block title %}

      注册页

    {% endblock %}

    <!-- css title end -->

     

    {% block link %}

    <link rel="stylesheet" href="../../static/css/authPro/auth.css">

    {% endblock %}

     

    {% block main %}

    <!-- container start -->

    <main id="container">

      <div class="register-contain">

        <div class="top-contain">

          <h4 class="please-register">请注册</h4>

          <a href="{% url ‘users:login‘ %}" class="login">立即登录 &gt;</a>

        </div>

        <form action="" method="post" class="form-contain">

          {% csrf_token %}

          <div class="form-item">

            <input type="text" placeholder="请输入用户名" name="username" id="user_name" class="form-control" autocomplete="off">

          </div>

          <div class="form-item">

            <input type="password" placeholder="请输入密码" name="password" class="form-control">

          </div>

          <div class="form-item">

            <input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">

          </div>

          <div class="form-item">

            <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" id="mobile" autocomplete="off">

          </div>

          <div class="form-item">

            <input type="text" placeholder="请输入图形验证码" name="captcha_graph" id="input_captcha" class="form-captcha">

            <a href="javascript:void(0);" class="captcha-graph-img">

              <img src="" alt="验证码" title="点击刷新">

            </a>

          </div>

          <div class="form-item">

            <input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off">

            <a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>

          </div>

          <div class="form-item">

            <input type="submit" value="立即注册" class="register-btn">

          </div>

        </form>

      </div>

    </main>

    <!-- container end -->

    {% endblock %}

     

    {% block script %}

      <script src="{% static ‘js/users/auth.js‘ %}"></script>

    {#    <script src="../../static/js/users/auth.js"></script>#}

    {% endblock %}

     

     

    ```

     

     

     

    在js文件夹下创建一个users文件夹用户存放用户模块相关的js文件,在users文件下创建auth.js文件。

     

    ```javascript

    $(function () {

      let $img = $(".form-item .captcha-graph-img img");  // 获取图像标签

      let sImageCodeId = "";  // 定义图像验证码ID值

     

      generateImageCode();  // 生成图像验证码图片

      $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

     

      // 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性

      function generateImageCode() {

        // 1、生成一个图片验证码随机编号

        sImageCodeId = generateUUID();

        // 2、拼接请求url /image_codes/<uuid:image_code_id>/

        let imageCodeUrl = "/image_codes/" + sImageCodeId + "/";

        // 3、修改验证码图片src地址

        $img.attr(‘src‘, imageCodeUrl)

      }

     

      // 生成图片UUID验证码

      function generateUUID() {

        let d = new Date().getTime();

        if (window.performance && typeof window.performance.now === "function") {

            d += performance.now(); //use high-precision timer if available

        }

        let uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function (c) {

            let r = (d + Math.random() * 16) % 16 | 0;

            d = Math.floor(d / 16);

            return (c == ‘x‘ ? r : (r & 0x3 | 0x8)).toString(16);

        });

        return uuid;

      }

        

    });

     

    ```

    相关文章
    相关标签/搜索
    管家婆精选八码中特蓝月亮 额济纳旗| 梧州市| 杨浦区| 井研县| 临安市| 通许县| 扎兰屯市| 简阳市| 沙坪坝区| 仁寿县| 云浮市| 平武县| 义乌市| 谢通门县| 开封县| 莱阳市| 洪雅县| 南开区| 盖州市| 江都市| 屯门区| 罗山县| 巩义市| 新晃| 阜平县| 宣汉县| 溧阳市| 文水县| 五河县| 石门县| 小金县| 白朗县| 霍城县| 句容市| 烟台市| 武定县| 保山市| 海口市| 灌云县| 达日县| 涡阳县| 台东市| 武城县| 大安市| 霍城县| 东丰县| 望城县| 广汉市| 铅山县| 惠东县| 武陟县| 江门市| 佛冈县| 永川市| 青阳县| 武邑县| 涟源市| 邢台县| 夹江县| 辽阳县| 洮南市| 墨脱县| 潮安县| 阿荣旗| 保定市| 汾西县| 南京市| 射阳县| 龙里县| 云南省| 太和县| 彩票| 昌宁县| 晋江市| 湟中县| 寻乌县| 连州市| 固始县| 旬邑县| 渝中区| 礼泉县| 尼木县| 区。| 神池县| 周口市| 泗阳县| 白朗县| 林州市| 兴安盟| 井研县| 法库县| 定南县| 明溪县| 嘉祥县| 灵宝市| 兴山县| 西峡县| 岳阳市| 漳浦县| 台南市| 汕尾市| 建阳市| 酉阳| 盐源县| 平陆县| 津市市| 化隆| 梓潼县| 临潭县| 和龙市| 枝江市| 思南县| 盐亭县| 思茅市| 邢台县| 大宁县| 吴忠市| 六枝特区| 灵台县| 兴仁县| 大新县| 内丘县| 厦门市| 色达县| 彩票| 肇庆市| 隆德县| 铜陵市| 南岸区| 郁南县| 湖北省| 永兴县| 奉节县| 乐陵市| 桦南县| 渭南市| 崇义县| 凯里市| 阜南县| 靖远县| 璧山县| 琼中| 新郑市| 资溪县| 惠州市| 合阳县| 新和县| 渭源县| 金塔县| 眉山市| 淮阳县| 万全县| 旺苍县| 武夷山市| 仁寿县| 阜康市| 当涂县| 罗甸县| 府谷县| 建宁县| 当阳市| 康定县| 西安市| 彭阳县| 玛多县| 措美县| 钟祥市| 安化县| 沭阳县| 青海省| 项城市| 遵化市| 武城县| 云林县| 宁津县| 岗巴县| 龙江县| 和硕县| 望都县| 凉城县| 长乐市| 固镇县| 东台市| 天气| 阿城市| 泽州县| 开江县| 望都县| 梓潼县| 景德镇市| 辉县市| 沙雅县| 包头市| 连云港市| 扶余县| 冕宁县| 临沧市| 广东省| 株洲市| 济阳县| 东宁县| 石河子市| 乐陵市| 呼图壁县| 濮阳市| 隆尧县| 阳东县| 三穗县| 商都县| 莱芜市| 连城县| 邢台市| 天全县| 大安市| 邵阳县| 大冶市| 武穴市| 通许县| 鹿邑县| 舟山市| 健康| 东宁县| 东源县| 高安市| 西乡县| 阜南县| 大厂| 山阳县| 渭南市| 黑山县| 南通市| 庆安县| 宝山区| 汝南县| 宜昌市| 苏尼特右旗| 扎赉特旗| 江陵县| 和林格尔县| 左云县| 乐业县| 论坛| 西城区| 长汀县| 门源| 大名县| 武义县| 明光市| 平和县| 丽水市| 呼和浩特市| 周宁县| 扶余县| 始兴县| 瑞金市| 庄河市| 南郑县| 鹤峰县| 游戏| 靖州| 淮安市| 东乡族自治县| 大丰市| 确山县| 临夏县| 四子王旗| 北辰区| 固镇县| 怀宁县| 凉城县| 青河县| 盐源县| 太仓市| 洱源县| 正镶白旗| 佳木斯市| 武穴市| 金昌市| 嘉荫县| 湖北省| 锦屏县| 板桥市| 科技| 马山县| 华坪县| 江安县| 马龙县| 神农架林区| 沅陵县| 洪泽县| 家居| 宁海县| 伽师县| 济阳县| 三穗县| 木兰县| 洛浦县| 丹东市| 阳江市| 卓尼县| 密云县| 城市| 泸水县| 石首市| 长岛县| 崇礼县| 宁陕县| 邵阳县| 通河县| 花莲市| 海丰县| 土默特左旗| 策勒县| 吉安县| 贵南县| 盐城市| 珠海市| 酒泉市| 志丹县| 融水| 波密县| 阳曲县| 黄浦区| 金平| 东安县| 海宁市| 班玛县| 平乐县| 望城县| 四子王旗| 玉山县| 加查县| 扬中市| 长白| 金沙县| 二手房| 大名县| 航空| 陆川县| 岳阳市| 温州市| 时尚| 万盛区| 荆门市| 铁岭县| 金川县| 泽州县| 陆川县| 沙雅县| 清苑县| 顺昌县| 十堰市| 岑巩县| 金塔县| 广宗县| 武陟县| 松溪县| 宝山区| 安国市| 青海省| 公安县| 平定县| 蒲城县| 醴陵市| 锡林浩特市| 精河县| 岳西县| 天柱县| 滨海县| 社会| 鸡泽县| 聊城市| 从江县| 沙坪坝区| 南丹县| 遂宁市| 湖口县| 苏州市| 千阳县| 威远县| 宜春市| 平和县| 离岛区| 周口市| 通州区| 忻城县| 吉木乃县| 镇赉县| 剑川县| 西安市| 包头市| 肥东县| 泰顺县| 苏州市| 嘉祥县| 广水市| 淮阳县| 罗城| 虹口区| 蒲城县| 康平县| 莫力| 陈巴尔虎旗| 山丹县| 东阳市| 嘉禾县| 来宾市| 宜川县| 四平市| 寿宁县| 郯城县| 文水县| 离岛区| 石阡县| 隆子县| 泸溪县| 休宁县| 文安县| 玛沁县| 宜州市| 隆尧县| 永城市| 拉孜县| 岳普湖县| 徐水县| 灵寿县| 辽阳市| 武邑县| 朔州市| 忻州市| 藁城市| 陵水| 高台县| 景洪市| 宜章县| 根河市| 丽江市| 望都县| 五大连池市| 裕民县| 哈尔滨市| 井研县| 新河县| 南通市| 珠海市| 舟曲县| 承德市| 土默特右旗| 定陶县| 靖西县| 宾阳县| 宁津县| 广饶县| 胶南市| 建平县| 岑巩县| 宁海县| 阿勒泰市| 洛阳市| 清水县| 长兴县| 宜章县| 甘德县| 隆尧县| 兴和县| 龙泉市| 汉寿县| 普格县| 弥勒县| 光山县| 义马市| 淮北市| 互助| 孝昌县| 张家港市| 子长县| 江门市| 平谷区| 泰州市| 郸城县| 汉阴县| 报价| 湘西| 北川| 晴隆县| 云南省| 澄城县| 芒康县| 南丹县| 繁昌县| 克拉玛依市| 祥云县| 高密市| 辽源市| 内江市| 朝阳县| 米易县| 遂昌县| 电白县| 清镇市| 双鸭山市| 济源市| 郴州市| 南川市| 慈利县| 连平县| 安阳县| 长葛市| 武乡县| 孟村| 临沭县| 运城市| 兴文县| 鹤岗市| 巴青县| 安阳市| 兴和县| 佛山市| 温泉县| 藁城市| 宿松县| 曲麻莱县| 秦安县| 澄迈县| 黑水县| 凉山| 九寨沟县| 陆川县| 广饶县| 平遥县| 平塘县| 茶陵县| 灯塔市| 合川市| 遵化市| 济源市| 精河县| 通榆县| 隆安县| 蓝山县| 乐山市| 德昌县| 长阳| 贡觉县| 汶上县| 临安市| 宁武县| 理塘县| 鄂托克旗| 新龙县| 依兰县| 碌曲县| 桦川县| 南澳县| 临夏县| 故城县| 凤阳县| 醴陵市| 万盛区| 尉犁县| 塔城市| 阜宁县| 交城县| 夏河县| 垫江县| 三明市| 曲水县| 涟源市| 石台县| 清水县| 永春县| 灵川县| 托里县| 青浦区| 南丰县| 茶陵县| 钟祥市| 忻城县| 修文县| 册亨县| 龙陵县| 晴隆县| 长寿区| 淮北市| 平乡县| 青河县| 监利县| 会泽县| 仪征市| 东兴市| 虹口区| 平阴县| 石渠县| 天祝| 砚山县| 神池县| 玉田县| 巴彦县| 辉南县| 辽源市| 普洱| 特克斯县| 茶陵县| 丰镇市| 宜君县| 许昌市| 枞阳县| 葵青区| 泌阳县| 宜春市| 沽源县| 湖州市| 秭归县| 上思县| 绿春县| http://wap.bm1961loanz.fit http://m.vpelnk.fit http://m.gdamzf.fit http://www.jzwmuo.fit http://ucynvt.fit http://www.ebzeyo.fit http://www.rmcxum.fit http://wap.ymslih.fit http://wzahne.fit http://www.qfjjqh.fit http://wap.mylvdw.fit http://m.ijebhm.fit http://hwgfvb.fit http://gnjtss.fit http://m.dcrvqp.fit http://wap.gzeqzo.fit http://m.hmtbcx.fit http://kqsyol.fit