Layui フレームワークを使用してマルチユーザーログインをサポートする権限管理システムを開発する方法-jsチュートリアル-php.cn

Layui フレームワークを使用してマルチユーザーログインをサポートする権限管理システムを開発する方法

はじめに:
現代のインターネット時代では、アプリケーションパーソナライズされた機能と権限管理を実現するには、マルチユーザーログインをサポートする必要があります。システムのセキュリティとデータのプライバシーを保護するために、開発者は特定の手段を使用してマルチユーザーログインと権限管理機能を実装する必要があります。この記事では、Layui フレームワークを使用してマルチユーザーログインをサポートする権限管理システムを開発する方法と、具体的なコード例を紹介します。

準備
開発を開始する前に、必要なツールとリソースを準備する必要があります。まず、Layui フレームワークをダウンロードしてインストールする必要があります。最新の安定バージョンは公式 Web サイトからダウンロードできます。次に、PHP をサポートするサーバー環境が必要です。XAMPP などの統合環境を使用して構築できます。最後に、ユーザー情報と権限データを保存するデータベースが必要ですが、MySQL またはその他のリレーショナルデータベースを選択できます。
データベース設計
データベースを設計する前に、システムに必要な機能と権限レベルを決定する必要があります。権限管理システムには、管理者、一般ユーザー、ゲストという 3 つの役割があるとします。管理者は最高の権限を持ち、ユーザーと権限を管理できます。一般ユーザーはシステムのさまざまな機能を使用でき、訪問者はシステムの公開コンテンツの閲覧のみが可能です。

ユーザー情報とロール情報を保存するユーザーテーブルとロールテーブルを設計できます。ユーザーテーブルにはユーザー ID、ユーザー名、パスワードなどのフィールドが含まれ、ロールテーブルにはロール ID、ロール名などのフィールドが含まれます。さらに、さまざまな機能やページの許可情報を保存する許可テーブルを設計することもできます。権限テーブルには、権限ID、権限名、権限URLなどのフィールドが含まれます。

ログインページのデザイン
Layui フレームワークを使用してログインページをデザインするのは非常に簡単です。 Layui のフォームモジュールを使用してログインフォームを作成し、対応する検証ルールとイベント処理関数を追加できます。以下は、単純なログインページのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <form class="layui-form" action="login.php" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="login-btn">登录</button>
                </div>
            </div>
        </form>
    </div>
 
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['form'], function() {
            var form = layui.form;
 
            form.on('submit(login-btn)', function(data) {
                // 处理登录请求
            });
        });
    </script>
</body>
</html>

ログイン後にコピー

ログインの検証と権限の管理
ログインページでは、AJAX テクノロジを使用してユーザー名とパスワードを送信できます。処理の背景を確認します。バックグラウンドでログイン要求を受信した後、PHP を使用してユーザー名とパスワードを検証し、検証結果に基づいて対応するログインステータスと権限を設定できます。

まず、ログイン要求を処理するために、login.php スクリプトを作成する必要があります。このスクリプトでは、ユーザーテーブルにクエリを実行することでユーザー名とパスワードが正しいことを検証し、クエリ結果をフロントエンドページに返すことができます。以下は、簡略化されたlogin.phpスクリプトのサンプルコードです:

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "123456", "mydb");
if (!$conn) {
    die("连接数据库失败：" . mysqli_connect_error());
}
 
// 处理登录请求
$username = $_POST["username"];
$password = $_POST["password"];
 
$sql = "SELECT * FROM user WHERE username='" . $username . "' AND password='" . $password . "'";
$result = mysqli_query($conn, $sql);
 
if (mysqli_num_rows($result) > 0) {
    // 登录成功，设置登录状态和权限
    session_start();
    $_SESSION["username"] = $username;
 
    // 获取用户角色
    $role = mysqli_fetch_assoc($result)["role"];
 
    // 根据角色设置权限
    if ($role == "admin") {
        // 设置管理员权限
        $_SESSION["role"] = "admin";
    } else if ($role == "user") {
        // 设置普通用户权限
        $_SESSION["role"] = "user";
    } else {
        // 设置访客权限
        $_SESSION["role"] = "guest";
    }
 
    echo "success";
} else {
    // 登录失败
    echo "error";
}
 
// 关闭数据库连接
mysqli_close($conn);
?>

ログイン後にコピー

ログイン検証が完了したら、ユーザーの権限に基づいてユーザーがアクセスできる機能とページを決定できます。各機能やページを作成する際に、PHPを利用してユーザーの権限を判定し、判定結果に応じた処理を行うことができます。

権限管理ページのデザイン
Layui フレームワークを使用して権限管理ページをデザインすることも非常に簡単です。 Layui のテーブルモジュールを使用してテーブルを作成し、対応するデータとイベント処理関数を追加できます。以下は、単純な権限管理ページのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <table class="layui-table" lay-data="{url:'get_permissions.php', page:true, limit:10, id:'permission_table'}" lay-filter="permission_table">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80, sort:true}">ID</th>
                    <th lay-data="{field:'name', width:120}">权限名</th>
                    <th lay-data="{field:'url'}">URL</th>
                </tr>
            </thead>
        </table>
    </div>
 
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['table'], function() {
            var table = layui.table;
 
            // 监听表格事件
            table.on('tool(permission_table)', function(obj) {
                var data = obj.data;
 
                if (obj.event === 'edit') {
                    // 编辑权限
                    editPermission(data);
                } else if (obj.event === 'delete') {
                    // 删除权限
                    deletePermission(data);
                }
            });
 
            // 编辑权限
            function editPermission(data) {
                // TODO: 编辑权限的逻辑
            }
 
            // 删除权限
            function deletePermission(data) {
                // TODO: 删除权限的逻辑
            }
        });
    </script>
</body>
</html>

ログイン後にコピー

権限管理ページでは、テーブルのイベントをリッスンし、ユーザーが編集をクリックしたときに対応するイベントハンドラーをトリガーできます。または削除ボタン。イベント処理関数では、AJAX テクノロジを使用して、対応する操作をバックグラウンドに送信して処理できます。

概要
この記事の導入部を通じて、Layui フレームワークを使用してマルチユーザーログインをサポートする権限管理システムを開発する方法と、対応するコード例を学習しました。実際の開発では、実際のニーズに応じてシステムの機能と権限を拡張し、コードを最適化して調整します。この記事が皆さんのお役に立てれば幸いです。ぜひ皆さんも実践してコミュニケーションをとってください。

以上がLayui フレームワークを使用してマルチユーザーログインをサポートする権限管理システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。