登録するフロントエンドは、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() 関数の使用に関する詳細な説明
目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
私たち、特に Linux エンジニアは毎日 Linux サーバーを扱っています。サーバーのセキュリテ...
Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...
JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...
プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...
テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...
Div 基本レイアウト <div class="main"> <...
テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...
この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...
現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...