Layui是一個前端UI框架，它可以幫助我們快速構建網頁界面，但它本身并不提供數據庫操作功能。要使用Layui簡化MySQL的增刪改查，你需要結合后端編程語言（如PHP、Python、Node.js等）來實現。以下是一個簡單的示例，使用PHP和Layui實現MySQL的增刪改查操作。
首先，在MySQL中創建一個名為user的表，用于存儲用戶信息。
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
創建一個名為index.php的文件，用于處理前端發送的請求并與MySQL數據庫進行交互。
<?php
// 連接MySQL數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 獲取前端發送的請求參數
$action = isset($_GET['action']) ? $_GET['action'] : '';
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$username = isset($_POST['username']) ? $_POST['username'] : '';
$password = isset($_POST['password']) ? $_POST['password'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
// 根據請求參數執行相應的MySQL操作
switch ($action) {
case 'add':
$sql = "INSERT INTO user (username, password, email) VALUES ('$username', '$password', '$email')";
break;
case 'delete':
$sql = "DELETE FROM user WHERE id=$id";
break;
case 'update':
$sql = "UPDATE user SET username='$username', password='$password', email='$email' WHERE id=$id";
break;
case 'select':
$sql = "SELECT * FROM user";
break;
default:
echo "無效的請求參數";
exit;
}
if ($conn->query($sql) === TRUE) {
echo "操作成功";
} else {
echo "錯誤: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
創建一個名為index.html的文件，用于顯示表格和表單，并發送請求到后端PHP文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui簡化MySQL增刪改查示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui/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">
<label class="layui-form-label">用戶名</label>
<div class="layui-input-block">
<input type="text" name="username" required 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-block">
<input type="password" name="password" required 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-block">
<input type="email" name="email" required lay-verify="required" placeholder="請輸入郵箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="add">添加</button>
<button type="button" class="layui-btn" id="delete">刪除</button>
<button type="button" class="layui-btn" id="update">更新</button>
<button type="button" class="layui-btn" id="select">查詢</button>
</div>
</div>
</form>
</div>
</div>
<table class="layui-hide" id="userTable" lay-filter="userTableFilter"></table>
</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/layui.all.js"></script>
<script>
layui.use(['form', 'table'], function(){
var form = layui.form;
var table = layui.table;
// 渲染表格
table.render({
elem: '#userTable',
url: 'index.php', // 數據接口
page: true, // 開啟分頁
cols: [[ // 表頭
{field: 'id', title: 'ID', sort: true},
{field: 'username', title: '用戶名', sort: true},
{field: 'password', title: '密碼', sort: true},
{field: 'email', title: '郵箱', sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
// 監聽工具條
table.on('tool(userTableFilter)', function(obj){
var data = obj.data;
if(obj.event === 'delete'){
layer.confirm('真的刪除行么', function(index){
obj.del();
layer.close(index);
// 發送刪除請求到后端
$.post('index.php', {action: 'delete', id: data.id}, function(response) {
if (response === '操作成功') {
layer.msg('刪除成功');
} else {
layer.msg('刪除失敗');
}
});
});
} else if(obj.event === 'update'){
// 發送更新請求到后端
$.post('index.php', {action: 'update', id: data.id, username: data.username, password: data.password, email: data.email}, function(response) {
if (response === '操作成功') {
layer.msg('更新成功');
} else {
layer.msg('更新失敗');
}
});
} else if(obj.event === 'select'){
// 發送查詢請求到后端
$.post('index.php', {action: 'select'}, function(response) {
// 將查詢結果填充到表格中
var html = '';
response.forEach(function(item) {
html += '<tr>';
html += '<td>' + item.id + '</td>';
html += '<td>' + item.username + '</td>';
html += '<td>' + item.password + '</td>';
html += '<td>' + item.email + '</td>';
html += '<td><button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">刪除</button></td>';
html += '<td><button class="layui-btn layui-btn-xs layui-btn-warning" lay-event="update">更新</button></td>';
html += '</tr>';
});
$('#userTable').html(html);
});
}
});
// 監聽添加按鈕
$('#add').on('click', function(){
layer.prompt({
title: '請輸入用戶信息',
formType: 1,
value: ''
}, function(value, index){
$.post('index.php', {action: 'add', username: value.username, password: value.password, email: value.email}, function(response) {
if (response === '操作成功') {
layer.msg('添加成功');
layer.close(index);
table.reload('userTable'); // 刷新表格
} else {
layer.msg('添加失敗');
}
});
});
});
});
</script>
</body>
</html>
現在，你可以在瀏覽器中打開index.html文件，嘗試使用Layui簡化MySQL的增刪改查操作。請注意，這個示例僅用于演示目的，實際項目中你可能需要考慮更多的安全性和錯誤處理。
