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(divレイヤー)を介してFLASHにリンクを追加するための実装コード

今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

メタビューポートはiPhoneでウェブページをフルスクリーン表示コントロールします

困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...

リアルタイムコンピューティングフレームワークFlinkクラスタの構築と動作メカニズムについての簡単な説明

目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

Vue プロジェクトで addRoutes を使用する際の問題の解決策

目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

InnoDB がトランザクション分離レベルを巧みに実装する方法

序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...

Linuxでディスクをマウントする方法

仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

リモートDockerを使用した統合テスト環境の構築手順

需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...