登録するフロントエンドは、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() 関数の使用に関する詳細な説明
今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...
お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...
困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...
目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...
MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...
目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...
仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...
タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...
需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...
設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...
公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...