登録するフロントエンドは、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() 関数の使用に関する詳細な説明
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...
1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...
序文最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。...
CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...
目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...
オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...
まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...
実装準備 # ファイルパスをバックアップする必要があります: /opt/apollo/logs/ac...
変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...
序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...
[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...
目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...
序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...