Vue と Flask は簡単なログイン検証ジャンプを実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue と Flask は簡単なログイン検証ジャンプを実装します

小云云

Jan 15, 2018 am 10:20 AM

flask ログイン確認する

この記事では主に、簡単なログイン認証ジャンプを実装するVue+Flaskのサンプルコードを紹介しますが、編集者がかなり良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ファイルの場所:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>

  <script type="text/javascript" src="../static/vue.js"></script>
  <script type="text/javascript" src="../static/axios.js"></script>

</head>
<body>

<p id="login">
  <form action="#" novalidate>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" placeholder="Enter your Name" v-model="username"><br>
    <label for="password">Password</label>
    <input type="text" name="password" id="password" placeholder="Enter your Password" v-model="password"><br>
    <br>

    <button type="button" v-on:click="login">Apply</button>
  </form>
</p>


<script type="text/javascript">
  var login = new Vue({
    el: &#39;#login&#39;,
    data:{
      username: &#39;&#39;,
      password: &#39;&#39;
    },
    methods: {
      login: function () {
        axios.post(&#39;http://127.0.0.1:5000/login&#39;,{
          username: this.username,
          password: this.password
        }).then(function (response) {
          console.log(response.status)
          // 其实是应该走后台路由
          if(parseInt(response.status) === 200){
            window.location.href = &#39;index&#39;
          }
        }).catch(function (error) {
          console.log(error.response)
        })

      }
    }
  })
</script>

</body>
</html>

ログイン後にコピー

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>
  <h1>Hello,This is Index Page!</h1>
</body>
</html>

ログイン後にコピー

# -*- coding: utf-8 -*-

from flask import Flask, request, session, redirect, url_for, render_template, make_response, jsonify
app = Flask(__name__)


@app.route(&#39;/login&#39;, methods=(&#39;GET&#39;, &#39;POST&#39;))
def login():
  if request.method == &#39;POST&#39;:
    session[&#39;username&#39;] = request.json.get(&#39;username&#39;)
    session[&#39;password&#39;] = request.json.get(&#39;password&#39;)
    # 登录成功，则跳转到index页面
    return jsonify({&#39;code&#39;: 200, &#39;token&#39;: "123456"})
  # 登录失败，跳转到当前登录页面
  return render_template(&#39;login.html&#39;)


@app.route(&#39;/index&#39;)
def index():
  # 如果用户名和密码都存在，则跳转到index页面，登录成功
  if &#39;username&#39; in session and &#39;password&#39; in session:
    return render_template(&#39;index.html&#39;)
  # 否则，跳转到login页面
  return redirect(url_for(&#39;login&#39;))


@app.route(&#39;/logout&#39;)
def logout():
  session.pop(&#39;username&#39;, None)
  session.pop(&#39;password&#39;, None)
  return redirect(url_for(&#39;login&#39;))


# set the secret key. keep this really secret:
app.secret_key = &#39;A0Zr98j/3yX R~XHH!jmN]LWX/,?RT&#39;


if __name__ == &#39;__main__&#39;:
  app.run(debug=True)

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7533

CakePHP チュートリアル

1379

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか? Mar 19, 2024 pm 02:00 PM

自分のコンピュータで他人の Steam アカウントにログインし、その他人のアカウントに壁紙ソフトウェアがインストールされている場合、自分のアカウントに切り替えた後、Steam は他人のアカウントに登録されている壁紙を自動的にダウンロードします。 Steam クラウドの同期をオフにします。別のアカウントにログインした後に、wallpaperengine が他の人の壁紙をダウンロードした場合の対処方法 1. 自分の steam アカウントにログインし、設定でクラウド同期を見つけて、steam クラウド同期をオフにします。 2. 以前にログインしたことのある他の人の Steam アカウントにログインし、壁紙クリエイティブワークショップを開き、サブスクリプションコンテンツを見つけて、すべてのサブスクリプションをキャンセルします。 (将来壁紙が見つからない場合は、まず壁紙を収集してからサブスクリプションをキャンセルできます) 3. 自分の Steam に戻ります。

小紅書で以前のアカウントにログインするにはどうすればよいですか?再接続後に元の番号が失われた場合はどうすればよいですか? Mar 21, 2024 pm 09:41 PM

ソーシャルメディアの急速な発展に伴い、Xiaohongshu は多くの若者が生活を共有し、新製品を探索するための人気のプラットフォームになりました。使用中に、ユーザーが以前のアカウントにログインできない場合があります。この記事では、Xiaohongshuで古いアカウントにログインできない問題の解決方法と、バインドを変更した後に元のアカウントが失われる可能性への対処方法について詳しく説明します。 1. 小紅書の前のアカウントにログインするにはどうすればよいですか? 1. パスワードを取得してログインします。Xiaohongshu に長期間ログインしない場合、アカウントがシステムによってリサイクルされる可能性があります。アクセス権を復元するには、パスワードを取得してアカウントへのログインを再試行します。操作手順は以下の通りです。 (1) 小紅書アプリまたは公式サイトを開き、「ログイン」ボタンをクリックします。 (2) 「パスワードを取得」を選択します。 (3) アカウント登録時に使用した携帯電話番号を入力してください

バックグラウンドログインの問題の解決策を明らかにする Mar 03, 2024 am 08:57 AM

Discuz のバックグラウンドログイン問題の解決策が明らかになりました。特定のコードサンプルが必要です。インターネットの急速な発展に伴い、Web サイトの構築がますます一般的になってきました。Discuz は、一般的に使用されるフォーラム Web サイト構築システムとして、次のユーザーに好まれています。多くのウェブマスター。しかし、その強力な機能ゆえに、Discuz を使用する際にバックグラウンドでのログインの問題などの問題が発生することがあります。本日は、Discuz のバックグラウンドログインの問題の解決策を明らかにし、具体的なコード例を提供します。

Kuaishou PC 版へのログイン方法 - Kuaishou PC 版へのログイン方法 Mar 04, 2024 pm 03:30 PM

最近、何人かの友人が Kuaishou コンピュータ版へのログイン方法を尋ねてきました。ここでは Kuaishou コンピュータ版へのログイン方法を説明します。必要な友人が来て、さらに詳しく学ぶことができます。ステップ 1: まず、コンピュータのブラウザで Baidu の Kuaishou 公式 Web サイトを検索します。ステップ 2: 検索結果リストの最初の項目を選択します。ステップ 3: Kuaishou 公式ウェブサイトのメインページに入った後、ビデオオプションをクリックします。ステップ 4: 右上隅にあるユーザーのアバターをクリックします。ステップ 5: QR コードをクリックして、ポップアップログインメニューでログインします。ステップ 6: 次に、携帯電話で Kuaishou を開き、左上隅のアイコンをクリックします。ステップ 7: QR コードのロゴをクリックします。ステップ 8: My QR コードインターフェイスの右上隅にあるスキャンアイコンをクリックした後、コンピューター上の QR コードをスキャンします。ステップ 9: 最後に、Kuaishou のコンピュータ版にログインします。

PDFの署名を検証する方法 Feb 18, 2024 pm 05:33 PM

私たちは通常、政府やその他の機関から PDF ファイルを受け取りますが、中にはデジタル署名が付いているものもあります。署名を検証すると、SignatureValid メッセージと緑色のチェックマークが表示されます。署名が検証されない場合、有効性は不明です。署名の検証は重要です。PDF で署名を検証する方法を見てみましょう。 PDF 形式の署名を検証する方法 PDF 形式で署名を検証すると、署名の信頼性が高まり、文書が受け入れられる可能性が高くなります。次の方法で PDF ドキュメントの署名を検証できます。 Adobe Reader で PDF を開きます。署名を右クリックし、「署名プロパティの表示」を選択します。「署名者証明書の表示」ボタンをクリックします。「信頼」タブから信頼できる証明書リストに署名を追加します。「署名の検証」をクリックして検証を完了します。

WeChatの友人による認証を使用してブロックを解除する詳細な方法 Mar 25, 2024 pm 01:26 PM

1. WeChatを開いた後、検索アイコンをクリックし、WeChatチームと入力し、下のサービスをクリックして入力します。 2. 入力後、左下隅にあるセルフサービスツールオプションをクリックします。 3. をクリックした後、上のオプションで、補助検証のブロック解除/再審査請求のオプションをクリックします。

ゼロから始めて、Flask をインストールし、個人ブログを迅速に確立する方法を段階的にガイドします。 Feb 19, 2024 pm 04:01 PM

ゼロから始めて、Flask をインストールし、個人ブログをすぐに構築する方法を段階的に説明します。書くことが好きな人にとって、個人ブログを持つことは非常に重要です。軽量の Python Web フレームワークである Flask は、シンプルで完全に機能する個人ブログを迅速に構築するのに役立ちます。この記事では、ゼロから始めて、Flask をインストールして個人ブログを迅速に構築する方法を段階的に説明します。ステップ 1: Python と pip をインストールする開始する前に、まず Python と pi をインストールする必要があります

Flask フレームワークのインストールガイド: Flask を正しくインストールするための詳細な手順 Feb 18, 2024 pm 10:51 PM

Flask フレームワークのインストールチュートリアル: Flask フレームワークを正しくインストールする方法を段階的に説明します。特定のコード例が必要です。はじめに: Flask は、シンプルで柔軟な Python Web 開発フレームワークです。学びやすく、使いやすく、強力な機能が満載です。この記事では、Flask フレームワークを正しくインストールする方法を段階的に説明し、参照用の詳細なコード例を提供します。ステップ 1: Python をインストールする Flask フレームワークをインストールする前に、まず Python がコンピュータにインストールされていることを確認する必要があります。 Pから始められます

See all articles

Vue と Flask は簡単なログイン検証ジャンプを実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック