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

推薦する

Vuex環境の詳細な説明

目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

Linux サーバーの状態を監視する方法

私たち、特に Linux エンジニアは毎日 Linux サーバーを扱っています。サーバーのセキュリテ...

Linuxフラッシュのインストール方法

Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...

iPhone デバイスの WAP ページでフォントサイズが大きい問題の解決策

JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Linux CentOS でスクリプトを定期的に実行するように設定する方法

多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

MySQLの基本操作学習ノートテーブル

テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

MySQL のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...