検索
ホームページウェブフロントエンドhtmlチュートリアル旅の続き: Python Flask と MySQL Web アプリケーションを最初から構築する - パート 2

このシリーズの前の部分では、Python Flask と MySQL の使用を開始し、アプリケーションのユーザー登録部分を実装する方法を説明しました。このチュートリアルでは、アプリケーションにログインおよびログアウト機能を実装することで、次のレベルに進みます。

使い始める

まず、GitHub から前のチュートリアルのソース コードを複製します。

リーリー

ソース コードのクローンを作成した後、part-1 ディレクトリに移動し、サーバーを起動します。

リーリー

ブラウザで https://localhost:5000 を指定すると、アプリケーションが実行されるはずです。

ログインインターフェースの作成

FlaskApp/templates に移動し、signin.html という名前の新しいファイルを作成します。 signin.html を開き、次の HTML コードを追加します:

リーリー

app.py を開き、ログイン インターフェイスの新しいルートを追加します。

リーリー

次に、index.htmlsignup.html を開き、両方のページにログイン用の href リンクを追加します: /signin。すべての変更を保存し、サーバーを再起動します。

リーリー

ブラウザで http://localhost:5000 を指定し、Login リンクをクリックすると、ログイン ページが表示されるはずです。

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

ログインを実現する

次に、ユーザーのログインを認証する関数を作成する必要があります。 Login をクリックすると、入力された電子メール アドレスとパスワードが Verify User 機能に送信されます。

ストアド プロシージャの作成

ユーザーを認証するには、MySQL ストアド プロシージャが必要です。したがって、次のように MySQL ストアド プロシージャを作成します。 リーリー

sp_validateLogin を使用して、MySQL データベースから username に基づいてユーザーの詳細を取得します。ハッシュ化されたパスワードを取得したら、ユーザーが入力したパスワードと照合して検証します。

ユーザーメソッドの確認

ユーザーを認証するメソッドを作成します。ユーザーがフォームを送信するときにこのメソッドを呼び出します:

リーリー

上記のコードに示すように、公開された電子メール アドレスとパスワードを

_username_password に読み込みました。次に、パラメータ _username を指定して sp_validateLogin プロシージャを呼び出します。したがって、validatelogin メソッド内で MySQL 接続を作成します。 リーリー 接続を作成した後、

con

を使用して接続し、cursor を作成します。 リーリー 次に示すように、カーソルを使用して MySQL ストアド プロシージャを呼び出します。

リーリー

以下に示すように、カーソルから取得したレコードを取得します。

リーリー

データにいくつかのレコードがある場合、取得したパスワードとユーザーが入力したパスワードを照合します。

リーリー

上記のコードに示すように、

check_password_hash

というメソッドを使用して、返されたハッシュ化されたパスワードがユーザーが入力したパスワードと一致するかどうかを確認します。すべてがうまくいけば、ユーザーを userHome.html にリダイレクトします。エラーが発生した場合は、エラー メッセージとともに error.html が表示されます。 これは完全な

validateLogin

コードです: リーリー テンプレート フォルダーに

userhome.html

という名前のページを作成し、次の HTML コードを追加します。 リーリー さらに、templates

フォルダーに

error.html という名前のエラー ページを作成し、次の HTML コードを追加します。 リーリー error.html には次のような要素があります:

リーリー

変数の値は render_template 関数から渡すことができ、動的に設定できます。

ログインに成功すると、ユーザーをユーザーのホームページにリダイレクトするため、以下に示すように /userHome というルートを作成する必要があります。 リーリー

すべての変更を保存し、サーバーを再起動します。ホーム ページの

Login リンクをクリックし、有効な電子メール アドレスとパスワードを使用してログインしてみます。ユーザー認証が成功すると、次のようなページが表示されます:

ユーザー認証が失敗した場合、ユーザーは以下に示すエラー ページにリダイレクトされます。

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

ここでは、別のエラー ページを使用してエラーを表示します。同じページを使用してエラー メッセージを表示する場合も問題ありません。

限制未经授权访问用户主页

用户验证成功后,用户将被重定向到用户主页。但现在,即使是未经授权的用户也可以通过简单地浏览 URL http://localhost:5000/userhome 来查看主页。

为了限制未经授权的用户访问,我们将检查会话变量,并在用户成功登录时设置该变量。因此从 Flask 导入 session

from flask import session

我们还需要为会话设置一个密钥。因此,在 app.py 中,在应用程序初始化后,设置密钥,如下所示:

app.secret_key = 'why would I tell you my secret key?'

现在,在 validateLogin 方法中,在成功登录后将用户重定向到 /userhome 之前,设置 session 变量,如下所示:

session['user'] = data[0][0]

接下来,在 userhome 方法内,在渲染 userhome.html 之前检查会话变量。如果未找到会话变量,则重定向到错误页面。

@app.route('/userhome')
def userHome():
    if session.get('user'):
        return render_template('userhome.html')
    else:
        return render_template('error.html',error = 'Unauthorized Access')

保存所有更改并重新启动服务器。在不登录的情况下,尝试导航到 http://localhost:5000/userhome,由于您尚未登录,因此您应该被重定向到错误页面。

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

实现注销

实现注销功能是最简单的。我们需要做的就是将会话变量 user 设置为 null 并将用户重定向到主页。

app.py中,为 logout 创建一个新的路由和方法,如下所示:

@app.route('/logout')
def logout():
    session.pop('user',None)
    return redirect('/')

我们已经将注销按钮的 href 设置为 /logout。因此,保存所有更改并重新启动服务器。在主页上,单击登录并尝试使用有效的电子邮件地址和密码登录。登录后,单击用户主页中的注销按钮,您应该会成功从应用程序注销。

结论

在本教程的这一部分中,我们了解了如何实现用户登录和注销功能。我们还了解了如何限制对应用程序页面的未经授权的访问。在本教程的下一部分中,我们将实现登录用户在应用程序中添加和编辑博客文章的功能。

这篇文章已根据 Jacob Jackson 的贡献进行了更新。 Jacob 是一名 Web 开发人员、技术作家、自由职业者和开源贡献者。

以上が旅の続き: Python Flask と MySQL Web アプリケーションを最初から構築する - パート 2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLタグの目的は何ですか?HTMLタグの目的は何ですか?Apr 28, 2025 am 12:02 AM

htmltagsareSterentionforturturingwebpages、EnhinceAccessibility、seo、andporformance.1)theyclosedinagure bracketetsandinginging inpairstocreateahierarchStructure.2)semanticagslikeandimproveuserexperienceandseo.3)

自己閉鎖タグとは何ですか?例を挙げてください。自己閉鎖タグとは何ですか?例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1)areEssentionalinforementswithoutcontent、2)

HTMLを超えて:Web開発のための重要なテクノロジーHTMLを超えて:Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません