Layui 是一個基于 jQuery 的前端 UI 框架，它可以幫助你快速構建網頁應用。要實現前后端分離，你需要將前端頁面（HTML、CSS、JavaScript）和后端邏輯（PHP、Python、Node.js 等）分開處理。這里是一個簡單的示例，展示如何使用 Layui 和 PHP 實現前后端分離。
<!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: 'login.php', // PHP 后端處理文件
type: 'POST',
data: field,
success: function(res){
if(res.status == 'success'){
alert('登錄成功');
} else {
alert('用戶名或密碼錯誤');
}
},
error: function(){
alert('請求失敗，請稍后重試');
}
});
return false; // 阻止表單默認提交行為
});
});
</script>
</body>
</html>
<?php
header('Content-Type: application/json');
// 模擬數據庫連接
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 獲取前端傳遞的數據
$username = $_POST['username'];
$password = $_POST['password'];
// 驗證用戶名和密碼（示例）
if($username == 'admin' && $password == 'admin'){
$status = 'success';
} else {
$status = 'error';
}
// 返回 JSON 數據
echo json_encode(['status' => $status]);
$conn->close();
?>
在這個示例中，我們創建了一個簡單的登錄表單，使用 Layui 的表單組件和 jQuery 的 AJAX 方法發送請求到 PHP 后端處理文件（login.php）。后端接收到請求后，驗證用戶名和密碼，并返回 JSON 格式的狀態信息。前端根據返回的狀態信息彈出提示框。
這只是一個簡單的示例，實際項目中你可能需要根據需求進行更多的開發和優化。希望這個示例能幫助你理解如何使用 Layui 和 PHP 實現前后端分離。
