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() 関数の使用に関する詳細な説明

推薦する

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

MySQLデータベースを使い始めるための最初のステップはテーブルを作成することです

データベースを作成する右クリック - 新しいデータベースを作成ライブラリ名を入力し、文字セットと並べ...

MySQL の count 関数の正しい使い方の詳細な説明

1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...

IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォント ソリューションを表示します。

数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

Vueコンポーネントの基本のまとめ

コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...

CSS3 で実装された画像ホバートグルボタン

結果:実装コードhtml <ul class="スライド"> <...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

Tomcat の 404 エラーの解決方法の詳細な説明

Tomcat テストで 404 問題が発生します。問題は次のとおりです。 HTTP ステータス 40...