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

推薦する

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

MySQL ビューの一貫性を確保する方法の詳細な説明 (チェック オプション付き)

この記事では、例を使用して、MySQL ビューの一貫性を確保する方法 (チェック オプションを使用)...

Docker ビルド PHP 環境チュートリアル詳細説明

Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...

MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法

序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

MySQL の InnoDB ストレージ ファイルの詳細な説明

物理的に言えば、InnoDB テーブルは、共有テーブルスペース ファイル (ibdata1)、排他テ...

Win32 MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

Dockerイメージを素早くデプロイして実行する最新のIDEAプロセスの詳細な説明

背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...