登録するフロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワードをフォームの形式でバックエンドに送信します。 送信フォーム(フォーム名) { データ = 新しい 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています
>>: MySQL での find_in_set() 関数の使用に関する詳細な説明
マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...
Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
データベースを作成する右クリック - 新しいデータベースを作成ライブラリ名を入力し、文字セットと並べ...
1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...
数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...
シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
結果:実装コードhtml <ul class="スライド"> <...
目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...
元の住所: http://www.webdesignfromscratch.com/web-2.0-...
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
Tomcat テストで 404 問題が発生します。問題は次のとおりです。 HTTP ステータス 40...