Django+vue 登録とログインのサンプルコード

Django+vue 登録とログインのサンプルコード

登録する

フロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワードをフォームの形式でバックエンドに送信します。
フォームの機能は、データを収集すること、つまり、フロントエンドページでユーザーが入力した値を取得することです。 numberValidateForm: フロントエンドで定義されたフォーム
$axios は、使用時に main.js でグローバルに登録する必要があります。.then は成功後の操作を表し、.catch は失敗後の操作を表します。

送信フォーム(フォーム名) {
      データ = 新しい FormData()
      data.append('ユーザー名',this.numberValidateForm.name)
      data.append('パスワード',this.numberValidateForm.pass)
      this.$axios.post('/api/register/',data).then((res) => {
        this.$router.push({ name: "login" }) // ルートジャンプ }).catch((res) => {
         console.log("送信エラー!!");
         false を返します。
      })
  }

クロスドメイン認証に $axios を使用するには、まずプロキシを設定し、リクエスト ヘッダーに X-CSRFToken を追加する必要があります。

設定ファイル

演技

プロキシ: {
        "/api":{
          ターゲット:"http://127.0.0.1:8000/",
          changeOrigin: true // プロキシを使用するかどうか}
    }, //プロキシを設定する,

メイン.js

'axios' から Axios をインポートします
Vue.prototype.$axios = アクシオス
getCookie = 関数 (cookie) {
    reg = /csrftoken=([\w]+)[;]?/g とします。
    reg.exec(cookie)[1]を返す
}
Axios.インターセプター.リクエスト.使用(
  関数(設定) {
    //POSTリクエストの前にX-CSRFTokenヘッダー情報を一律に追加します。let cookie = document.cookie;
    if(cookie && config.method == 'post'){
      config.headers['X-CSRFToken'] = getCookie(cookie);
    }
    設定を返します。
  },
  関数(エラー){
    // リクエストエラーに対して何らかの処理を実行する
    Promise.reject(error) を返します。
  }
);

ログイン

送信フォーム(フォーム名) {
      this.$refs[formName].validate(valid => { //vueフロントエンド検証ルール if (valid) {
          データ = 新しい FormData()
          data.append('ユーザー名',this.numberValidateForm.name)
          data.append('パスワード',this.numberValidateForm.pass)
          this.$axios.post('/api/login/',data).then((res) => {
            if(res.data.code == "ok"){
              コンソールログ(12345678)
              this.$router.push({name:"firstpage"})
            }
          })
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    },

ビュー.py

Django バックグラウンドビュー機能

django.shortcutsからレンダリングをインポートする
django.viewsからViewをインポートする
django.http から HttpResponse、JsonResponse をインポートします
from django.contrib.auth.models import User # Django のカプセル化された認証関数 from django.contrib import auth
クラスLogin(View):
    def post(self,request):
        試す:
            ユーザー = request.POST.get('ユーザー名',なし)
            pwd = request.POST.get('パスワード',なし)
            # パスワードの確認 obj = auth.authenticate(request,username=user,password=pwd)
            オブジェクトの場合:
                return JsonResponse({'code':'ok','message':'アカウントとパスワードの検証が成功しました'})
        を除外する:
            JsonResponse を返します({'code':'no','message':'検証に失敗しました'})

クラス Register(View):
    def post(self, request):
        試す:
            ユーザー名 = request.POST.get('ユーザー名',なし)
            パスワード = request.POST.get('password',なし)
            user = User.objects.create_user(username=ユーザー名,password=パスワード)
            ユーザー.保存()
        を除外する:
            JsonResponse を返します({'code':'no','message':'登録に失敗しました'})
        JsonResponse を返します({'code':'ok','message':'登録成功'})

Django + Vue で登録とログインを実装するサンプルコードに関するこの記事はこれで終わりです。より関連性の高い Django + Vue の登録とログインのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • メールで確認コードを送信するDjango登録
  • 一般的なDjango登録機能モジュールの実装方法
  • Django 管理バックグラウンドでデータベース テーブルを登録する方法
  • Django ユーザログインおよび登録システムの実装例
  • Djangoフレームワークで実装されたユーザー登録、ログイン、ログアウト機能の例
  • Django によるユーザー登録の実装例の説明
  • Djangoはauthモジュールの下でログイン、登録、ログアウト機能を実装しています。
  • Python Djangoで簡単な登録機能を実装する手順の詳細な説明
  • Django のログインおよび登録システムのサンプルコード
  • Django は、Ajax を介して電子メールによるユーザー登録とアカウントの有効化を完了します。
  • Django Mallプロジェクト登録機能の実装

<<:  Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

>>:  MySQL での find_in_set() 関数の使用に関する詳細な説明

推薦する

.html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。

ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...

ZabbixはSNMPに基づいてLinuxホストを監視します

序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...

CSS3 の display:grid、グリッドレイアウトの紹介

1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...

フロントエンドブラウザのフォントサイズが12px未満のソリューション

序文最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。...

CSSスタイルのカスケーディングルールの詳細な説明

CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...

MySQL統計データテーブルの設計方法

目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

Linux CentOS でスケジュールされたバックアップ タスクを設定する方法

実装準備 # ファイルパスをバックアップする必要があります: /opt/apollo/logs/ac...

MySQL 変数宣言とストアド プロシージャの分析

変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...

Dockerはターミナルで中国語を入力できない問題を解決します

序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...