layui php怎样实现前后端分离

Layui 是一个基于 jQuery 的前端 UI 框架，它可以帮助你快速构建网页应用。要实现前后端分离，你需要将前端页面（HTML、CSS、JavaScript）和后端 API 进行分离。以下是一个简单的示例，展示了如何使用 Layui 和 PHP 实现前后端分离。

创建一个 HTML 文件（例如：index.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui 前后端分离示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.all.js"></script>
<script>
layui.use(['form'], function(){
    var form = layui.form;
    
    // 监听提交
    form.on('submit(login)', function(data){
        var field = data.field; // 获取表单字段
        
        // 发送 AJAX 请求
        $.ajax({
            url: '/api/login', // 你的后端 API 地址
            type: 'POST',
            data: field,
            dataType: 'json',
            success: function(res){
                if(res.code === 0){
                    alert('登录成功');
                } else {
                    alert('登录失败：' + res.msg);
                }
            },
            error: function(){
                alert('请求失败，请检查网络连接');
            }
        });
        
        return false; // 阻止表单默认提交
    });
});
</script>

</body>
</html>

创建一个 PHP 文件（例如：api.php）来处理登录请求：

<?php
header('Content-Type: application/json');

// 模拟数据库连接
$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {
    die('连接失败：' . $conn->connect_error);
}

// 获取 POST 数据
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';

// 验证用户名和密码（示例）
if ($username === 'admin' && $password === '123456') {
    // 生成 JWT 令牌（示例）
    $token = md5($username . $password);
    
    // 返回成功响应
    echo json_encode([
        'code' => 0,
        'msg' => '登录成功',
        'token' => $token
    ]);
} else {
    // 返回失败响应
    echo json_encode([
        'code' => -1,
        'msg' => '用户名或密码错误'
    ]);
}

$conn->close();
?>

在这个示例中，我们创建了一个简单的登录表单，并使用 Layui 的表单组件处理表单提交。当用户提交表单时，我们使用 jQuery 发送 AJAX 请求到后端 API（api.php）。后端 API 处理请求并返回 JSON 格式的响应。前端接收到响应后，根据返回的状态码和消息进行相应的处理。

这只是一个简单的示例，实际应用中你可能需要根据需求进行调整。希望这个示例能帮助你理解如何使用 Layui 和 PHP 实现前后端分离。

最新问答

相关标签