【Django開發】0到1開發美多shop項目：圖形和簡訊驗證碼。全md文檔筆記（附代碼，已分享）

来源:https://www.cnblogs.com/yinuo112/p/18021444
-Advertisement-
Play Games

老周一般很少玩游戲，在某寶上買了一堆散件，計劃在過年期間自己做個機械臂耍耍。頭腦中划過一道紫藍色的閃電，想起用游戲手柄來控制機械臂。機械臂是由樹莓派（大草莓）負責控制，然後客戶端通過 Socket UDP 來發送信號。優先考慮在 PC 和手機上測試，就順便折騰一下 XInput API。當然，讀取手 ...


本系列文章md筆記（已分享）主要討論django商城項目相關知識。項目利用Django框架開發一套前後端不分離的商城項目（4.0版本）含代碼和文檔。功能包括前後端不分離，方便SEO。採用Django + Jinja2模板引擎 + Vue.js實現前後端邏輯，Nginx伺服器（反向代理）Nginx伺服器（靜態首頁、商品詳情頁、uwsgi伺服器（美多商場業務場景），後端服務：MySQL、Redis、Celery、RabbitMQ、Docker、FastDFS、Elasticsearch、Crontab，外部介面：容聯雲、QQ互聯、支付寶。

全套筆記和代碼自取移步： 個人博客

感興趣的小伙伴可以自取哦，歡迎大家點贊轉發~

共 11 章，132 子模塊

圖形驗證碼

圖形驗證碼介面設計和定義

1. 圖形驗證碼介面設計

1.請求方式

選項 方案
請求方法 GET
請求地址 image_codes/(?P[\w-]+)/

2.請求參數：路徑參數

參數名 類型 是否必傳 說明
uuid string 是 唯一編號

3.響應結果：image/jpg

2. 圖形驗證碼介面定義

1.圖形驗證碼視圖

class ImageCodeView(View):
    """圖形驗證碼"""

    def get(self, request, uuid):
        """
        :param request: 請求對象
        :param uuid: 唯一標識圖形驗證碼所屬於的用戶
        :return: image/jpg
        """
        pass

2.總路由

  
  
# verifications
  
  
url(r'^', include('verifications.urls')),

3.子路由

  
  
# 圖形驗證碼
  
  
url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),

圖形驗證碼後端邏輯

1. 準備captcha擴展包

提示：captcha擴展包用於後端生成圖形驗證碼

可能出現的錯誤

  • 報錯原因：環境中沒有Python處理圖片的庫：PIL

解決辦法

  • 安裝Python處理圖片的庫：pip install Pillow

2. 準備Redis資料庫

準備Redis的2號庫存儲驗證碼數據

"verify_code": { # 驗證碼
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },

3. 圖形驗證碼後端邏輯實現

class ImageCodeView(View):
    """圖形驗證碼"""

    def get(self, request, uuid):
        """
        :param request: 請求對象
        :param uuid: 唯一標識圖形驗證碼所屬於的用戶
        :return: image/jpg
        """
        # 生成圖片驗證碼
        text, image = captcha.generate_captcha()

        # 保存圖片驗證碼
        redis_conn = get_redis_connection('verify_code')
        redis_conn.setex('img_%s' % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)

        # 響應圖片驗證碼
        return http.HttpResponse(image, content_type='image/jpg')

圖形驗證碼前端邏輯

1. Vue實現圖形驗證碼展示

1.register.js

mounted(){
    // 生成圖形驗證碼
    this.generate_image_code();
},
methods: {
    // 生成圖形驗證碼
    generate_image_code(){
        // 生成UUID。generateUUID() : 封裝在common.js文件中，需要提前引入
        this.uuid = generateUUID();
        // 拼接圖形驗證碼請求地址
        this.image_code_url = "/image_codes/" + this.uuid + "/";
    },
    ......
}

2.register.html

<li>
    <label>圖形驗證碼:</label>
    <input type="text" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="圖形驗證碼" class="pic_code">
    <span class="error_tip">請填寫圖形驗證碼</span>
</li>

3.圖形驗證碼展示和存儲效果

2. Vue實現圖形驗證碼校驗

1.register.html

<li>
    <label>圖形驗證碼:</label>
    <input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="圖形驗證碼" class="pic_code">
    <span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
</li>

2.register.js

check_image_code(){
    if(!this.image_code) {
        this.error_image_code_message = '請填寫圖片驗證碼';
        this.error_image_code = true;
    } else {
        this.error_image_code = false;
    }
},

3.圖形驗證碼校驗效果

簡訊驗證碼

簡訊驗證碼邏輯分析

知識要點

  1. 保存簡訊驗證碼是為註冊做準備的。
  2. 為了避免用戶使用圖形驗證碼惡意測試，後端提取了圖形驗證碼後，立即刪除圖形驗證碼。
  3. Django不具備發送簡訊的功能，所以我們藉助第三方的容聯雲通訊簡訊平臺來幫助我們發送簡訊驗證碼。

容聯雲通訊簡訊平臺

1. 容聯雲通訊簡訊平臺介紹

1.容聯雲官網

  • 容聯雲通訊網址：
  • 註冊並登陸

2.容聯雲管理控制台

3.容聯雲創建應用

4.應用申請上線，併進行資質認證

5.完成資質認證，應用成功上線

6.添加測試號碼

7.簡訊模板

2. 容聯雲通訊簡訊SDK測試

1.模板簡訊SDK下載

2.模板簡訊SDK使用說明

3.集成模板簡訊SDK

  • CCPRestSDK.py：由容聯雲通訊開發者編寫的官方SDK文件，包括發送模板簡訊的方法
  • ccp_sms.py：調用發送模板簡訊的方法

4.模板簡訊SDK測試

  • ccp_sms.py文件中
  
  
# -*- coding:utf-8 -*-
  
  

from verifications.libs.yuntongxun.CCPRestSDK import REST

  
  
# 說明：主賬號，登陸雲通訊網站後，可在"控制台-應用"中看到開發者主賬號ACCOUNT SID
  
  
_accountSid = '8aaf070862181ad5016236f3bcc811d5'

  
  
# 說明：主賬號Token，登陸雲通訊網站後，可在控制台-應用中看到開發者主賬號AUTH TOKEN
  
  
_accountToken = '4e831592bd464663b0de944df13f16ef'

  
  
# 請使用管理控制台首頁的APPID或自己創建應用的APPID
  
  
_appId = '8aaf070868747811016883f12ef3062c'

  
  
# 說明：請求地址，生產環境配置成app.cloopen.com
  
  
_serverIP = 'sandboxapp.cloopen.com'

  
  
# 說明：請求埠 ，生產環境為8883
  
  
_serverPort = "8883"

  
  
# 說明：REST API版本號保持不變
  
  
_softVersion = '2013-12-26'

  
  
# 雲通訊官方提供的發送簡訊代碼實例
  
  
  
  
# 發送模板簡訊
  
  
  
  
# @param to 手機號碼
  
  
  
  
# @param datas 內容數據 格式為數組 例如：{'12','34'}，如不需替換請填 ''
  
  
  
  
# @param $tempId 模板Id
  
  
def sendTemplateSMS(to, datas, tempId):
    # 初始化REST SDK
    rest = REST(_serverIP, _serverPort, _softVersion)
    rest.setAccount(_accountSid, _accountToken)
    rest.setAppId(_appId)

    result = rest.sendTemplateSMS(to, datas, tempId)
    print(result)
    for k, v in result.items():

        if k == 'templateSMS':
            for k, s in v.items():
                print('%s:%s' % (k, s))
        else:
            print('%s:%s' % (k, v))

if __name__ == '__main__':
    # 註意： 測試的簡訊模板編號為1
    sendTemplateSMS('17600**2168', ['123456', 5], 1)

5.模板簡訊SDK返回結果說明

{
    'statusCode': '000000', // 狀態碼。'000000'表示成功，反之，失敗
    'templateSMS': 
        {
            'smsMessageSid': 'b5768b09e5bc4a369ed35c444c13a1eb', // 簡訊唯一標識符
            'dateCreated': '20190125185207' // 簡訊發送時間
        }
}

3. 封裝發送簡訊單例類

1.封裝發送簡訊單例類

class CCP(object):
    """發送簡訊的單例類"""

    def __new__(cls, *args, **kwargs):
        # 判斷是否存在類屬性_instance，_instance是類CCP的唯一對象，即單例
        if not hasattr(CCP, "_instance"):
            cls._instance = super(CCP, cls).__new__(cls, *args, **kwargs)
            cls._instance.rest = REST(_serverIP, _serverPort, _softVersion)
            cls._instance.rest.setAccount(_accountSid, _accountToken)
            cls._instance.rest.setAppId(_appId)
        return cls._instance

2.封裝發送簡訊單例方法

def send_template_sms(self, to, datas, temp_id):
    """
    發送模板簡訊單例方法
    :param to: 註冊手機號
    :param datas: 模板簡訊內容數據，格式為列表，例如：['123456', 5]，如不需替換請填 ''
    :param temp_id: 模板編號，預設id為1的模板
    :return: 發簡訊結果
    """
    result = self.rest.sendTemplateSMS(to, datas, temp_id)
    if result.get("statusCode") == "000000":
        # 返回0，表示發送簡訊成功
        return 0
    else:
        # 返回-1，表示發送失敗
        return -1

3.測試單例類發送模板簡訊結果

if __name__ == '__main__':
    # 註意： 測試的簡訊模板編號為1
    CCP().send_template_sms('176009***8', ['123456', 5], 1)

4. 知識要點

  1. 容聯雲通訊只是發送簡訊的平臺之一，還有其他雲平臺可用，比如，阿裡雲等，實現套路都是相通的。
  2. 將發簡訊的類封裝為單例，屬於性能優化的一種方案。

簡訊驗證碼後端邏輯

1. 簡訊驗證碼介面設計

1.請求方式

選項 方案
請求方法 GET
請求地址 /sms_codes/(?P1[3-9]\d{9})/

2.請求參數：路徑參數和查詢字元串

參數名 類型 是否必傳 說明
mobile string 是 手機號
image_code string 是 圖形驗證碼
uuid string 是 唯一編號

3.響應結果：JSON

欄位 說明
code 狀態碼
errmsg 錯誤信息

2. 簡訊驗證碼介面定義

class SMSCodeView(View):
    """簡訊驗證碼"""

    def get(self, reqeust, mobile):
        """
        :param reqeust: 請求對象
        :param mobile: 手機號
        :return: JSON
        """
        pass

3. 簡訊驗證碼後端邏輯實現

class SMSCodeView(View):
    """簡訊驗證碼"""

    def get(self, reqeust, mobile):
        """
        :param reqeust: 請求對象
        :param mobile: 手機號
        :return: JSON
        """
        # 接收參數
        image_code_client = reqeust.GET.get('image_code')
        uuid = reqeust.GET.get('uuid')

        # 校驗參數
        if not all([image_code_client, uuid]):
            return http.JsonResponse({'code': RETCODE.NECESSARYPARAMERR, 'errmsg': '缺少必傳參數'})

        # 創建連接到redis的對象
        redis_conn = get_redis_connection('verify_code')
        # 提取圖形驗證碼
        image_code_server = redis_conn.get('img_%s' % uuid)
        if image_code_server is None:
            # 圖形驗證碼過期或者不存在
            return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '圖形驗證碼失效'})
        # 刪除圖形驗證碼，避免惡意測試圖形驗證碼
        try:
            redis_conn.delete('img_%s' % uuid)
        except Exception as e:
            logger.error(e)
        # 對比圖形驗證碼
        image_code_server = image_code_server.decode()  # bytes轉字元串
        if image_code_client.lower() != image_code_server.lower():  # 轉小寫後比較
            return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '輸入圖形驗證碼有誤'})

        # 生成簡訊驗證碼：生成6位數驗證碼
        sms_code = '%06d' % random.randint(0, 999999)
        logger.info(sms_code)
        # 保存簡訊驗證碼
        redis_conn.setex('sms_%s' % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
        # 發送簡訊驗證碼
        CCP().send_template_sms(mobile,[sms_code, constants.SMS_CODE_REDIS_EXPIRES // 60], constants.SEND_SMS_TEMPLATE_ID)

        # 響應結果
        return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '發送簡訊成功'})

簡訊驗證碼前端邏輯

1. Vue綁定簡訊驗證碼界面

1.register.html

<li>
    <label>簡訊驗證碼:</label>
    <input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code" class="msg_input">
    <a @click="send_sms_code" class="get_msg_code">[[ sms_code_tip ]]</a>
    <span class="error_tip" v-show="error_sms_code">[[ error_sms_code_message ]]</span>
</li>

2.register.js

check_sms_code(){
    if(this.sms_code.length != 6){
        this.error_sms_code_message = '請填寫簡訊驗證碼';
        this.error_sms_code = true;
    } else {
        this.error_sms_code = false;
    }
},

2. axios請求簡訊驗證碼

1.發送簡訊驗證碼事件處理

send_sms_code(){
    // 避免重覆點擊
    if (this.sending_flag == true) {
        return;
    }
    this.sending_flag = true;

    // 校驗參數
    this.check_mobile();
    this.check_image_code();
    if (this.error_mobile == true || this.error_image_code == true) {
        this.sending_flag = false;
        return;
    }

    // 請求簡訊驗證碼
    let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid;
    axios.get(url, {
        responseType: 'json'
    })
        .then(response => {
            if (response.data.code == '0') {
                // 倒計時60秒
                var num = 60;
                var t = setInterval(() => {
                    if (num == 1) {
                        clearInterval(t);
                        this.sms_code_tip = '獲取簡訊驗證碼';
                        this.sending_flag = false;
                    } else {
                        num -= 1;
                        // 展示倒計時信息
                        this.sms_code_tip = num + '秒';
                    }
                }, 1000, 60)
            } else {
                if (response.data.code == '4001') {
                    this.error_image_code_message = response.data.errmsg;
                    this.error_image_code = true;
                } else { // 4002
                    this.error_sms_code_message = response.data.errmsg;
                    this.error_sms_code = true;
                }
                this.generate_image_code();
                this.sending_flag = false;
            }
        })
        .catch(error => {
            console.log(error.response);
            this.sending_flag = false;
        })
},

2.發送簡訊驗證碼效果展示

補充註冊時簡訊驗證邏輯

1. 補充註冊時簡訊驗證後端邏輯

1.接收簡訊驗證碼參數

sms_code_client = request.POST.get('sms_code')

2.保存註冊數據之前，對比簡訊驗證碼

redis_conn = get_redis_connection('verify_code')
sms_code_server = redis_conn.get('sms_%s' % mobile)
if sms_code_server is None:
    return render(request, 'register.html', {'sms_code_errmsg':'無效的簡訊驗證碼'})
if sms_code_client != sms_code_server.decode():
    return render(request, 'register.html', {'sms_code_errmsg': '輸入簡訊驗證碼有誤'})

2. 補充註冊時簡訊驗證前端邏輯

1.register.html

<li>
    <label>簡訊驗證碼:</label>
    <input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code" class="msg_input">
    <a @click="send_sms_code" class="get_msg_code">[[ sms_code_tip ]]</a>
    <span v-show="error_sms_code" class="error_tip">[[ error_sms_code_message ]]</span>
    {% if sms_code_errmsg %}
        <span class="error_tip">{{ sms_code_errmsg }} </span>
    {% endif %}
</li>

未完待續， 同學們請等待下一期

全套筆記和代碼自取移步gitee倉庫： gitee倉庫獲取完整文檔和代碼

感興趣的小伙伴可以自取哦，歡迎大家點贊轉發~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【Vue前端】vue使用筆記0基礎到高手第2篇：Vue進階知識點介紹（附代碼，已分享）
    這篇筆記總結自網課DNS解析和優化【渡一教育】 DNS用於將功能變數名稱轉換成IP地址。 特點： DNS解析過程耗費時間長； DNS有本地緩存。 DNS解析完成得到IP地址，這個IP地址會存儲到本地設備，後續再讀這個功能變數名稱會直接返回本地緩存的IP地址。 用戶瀏覽網頁中的DNS解析流程 首先用戶輸入url地 ...
  • [Vue] CSS中的v-bind
    在 Vue 中說到v-bind大多數時候都是想到template中動態綁定script中的響應式數據。但其實在單文件組件(SFC)中， ...
  • [Vite] 靜態資源的動態訪問
    Vite腳手架在打包代碼的時候，會把源代碼里對於靜態資源的訪問路徑轉換為打包後靜態資源文件的路徑。動態訪問靜態資源通常導致讀取不到文件，因為源代碼中使用的路徑是src中的，而打包之後靜態資源帶上了文件指紋，代碼中的路徑卻沒有隨之改變。 ...
  • [設計模式]創建型模式-單例模式
    前言 單例模式是最簡單的一種模式。在Go中，單例模式指的是全局只有一個實例，並且它負責創建自己的對象。單例模式有減少記憶體和系統資源開銷、防止多個實例產生衝突等優點。 因為單例模式保證了實例的全局唯一性，並且只被初始化一次，所以比較適合全局共用一個實例，且只需要被初始化一次的場景，例如資料庫實例、全局 ...
  • [設計模式]行為型模式-策略模式
    前言 策略模式定義了一系列演算法，並將每個演算法封裝起來，使它們可以互相替換，且演算法的變換不會影響使用演算法的客戶。 在項目開發中，我們經常要根據不同的場景，採取不同的措施，也就是不同的策略。假設我們需要對a、b這兩個整數進行計算，根據條件的不同，需要執行不同的計算方式。我們可以把所有的操作都封裝在同一個 ...
  • 遍歷用for還是foreach？
    在編程的世界里，我們經常需要對數據進行迴圈處理，常用的兩種方法就是：for迴圈和foreach迴圈。想象你站在一條裝滿寶貝的傳送帶前，你要親手檢查每一件寶貝。使用for迴圈就像是你親手控制傳送帶的速度和方向，而使用foreach迴圈則是傳送帶自動運轉，你只需專註於寶貝本身。 ...
  • 2.19學習
    Java 方法重載 方法重載 允許在同一個類中定義多個具有相同名稱的方法，但 參數列表 必須不同。 語法： returnType methodName(parameter1, parameter2, ..., parameterN) { // 方法體 } 示例： public class Main ...
  • 一文總結 C++ 常量表達式、constexpr 和 const
    TLDR 修飾變數的時候，可以把 constexpr 對象當作加強版的 const 對象：const 對象表明值不會改變，但不一定能夠在編譯期取得結果；constexpr 對象不僅值不會改變，而且保證能夠在編譯期取得結果。如果一個 const 變數能夠在編譯期求值，將其改為 constexpr 能夠 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類