登録するフロントエンドは、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() 関数の使用に関する詳細な説明
目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...
この記事では、例を使用して、MySQL ビューの一貫性を確保する方法 (チェック オプションを使用)...
Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...
目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...
JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...
序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...
序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...
目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...
物理的に言えば、InnoDB テーブルは、共有テーブルスペース ファイル (ibdata1)、排他テ...
MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...
背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...