データベースを準備する
この例では、Mysql データベースを使用して、次のテーブル構造を持つユーザー テーブルを作成します:
次に、ユーザー情報データの一部を user テーブルに挿入します。
index.php
ユーザーがユーザー名とパスワードを入力すると、正常にログインするように求められ、「終了」をクリックすると、ユーザーのログイン インターフェイスが終了します。
「index.php」と入力します。ユーザーがログインしている場合は、ログイン情報が表示されます。ユーザーがログインしていない場合は、ログインを求めるログインボックスが表示されます。
リーリー
index.php ファイルのヘッダーに次のステートメントを追加する必要があることに注意してください: session_start; 同時に、ヘッド部分に jquery ライブラリを導入し、ログイン ボックスの美しい CSS スタイルを記述することもできます。もちろん、この例にはすでに少しシンプルなスタイルが記述されています。ソース コードを参照してください。
global.js
global.js ファイルには、実装される jquery コードが含まれています。最初に行うことは、Baidu や Google のように、入力ボックスを開くとすぐにマウス カーソルが入力ボックス内にあるようにすることです。使用コードは次のとおりです:
次に行うことは、入力ボックスがフォーカスを取得したときと失ったときに異なるスタイルを表示することです。たとえば、この例では、異なる境界線の色が使用されています。
ユーザー ログイン: ユーザーがログイン ボタンをクリックした後、まずユーザーの入力を空にできないことを確認してから、Ajax リクエストをバックグラウンドの login.php に送信します。バックグラウンド検証ログインが成功すると、ログインしたユーザーの情報が返されます。ログインに失敗した場合は、ユーザーのログイン数や最終ログイン時刻などの情報が返されます。
Ajax リクエストを行うとき、データ送信形式は json であり、返されるデータも JS を使用して json データを解析してログイン後のユーザー情報を取得し、それを #login 要素に追加します。ログイン操作を完了します。
ユーザー終了: [終了] をクリックすると、Ajax リクエストがlogin.php に送信され、すべてのセッションがバックグラウンドでログアウトされ、ページはログイン インターフェイスに戻ります。
リーリー
login.php
フロントからのリクエストに従い、ログイン時にユーザーが入力したユーザー名とパスワードを取得し、データベース内の対応するユーザー名とパスワードと比較し、成功した場合にユーザーのログイン情報を取得します。を新たに更新し、jsonデータをまとめてフロントに渡します。
フロントエンドリクエストが終了したら、セッションからログアウトし、処理のためにフロントエンドJSに1を返します。上記のコードの get_client_ip() はクライアント IP を取得する関数であるため、ソース コードをダウンロードして参照することはできません。
さて、ユーザーのログインとログアウトの手順が完了しました。避けられない欠点がありますので、ご批判や修正を歓迎します。