Layui開發使用文檔地址：https://www.layui.com/doc/
在開始前，請大家先看下上面的開發文檔，做好Layui初始化配置，最重要的是學會數據表格的渲染，這對於下面功能的實現起到至關重要的作用，還需要引入jQuery.js.文件。
下面我將會用自己做過的Layui后台中用戶管理為例，詳細地向大家介紹如何實現后台中的功能，以便大家在使用Layui模板后台或用Layui搭建后台時，能快速實現與數據庫的交互，實現功能，少走彎路。
數據庫：MySQL
后台：Layui
后端語言：PHP
如下圖所示，這是我用戶管理的界面（user.html）。
1.搜索功能
這是用戶搜索一行的html代碼：
然后我們要引入三個js文件：
其中jquery.js和layui.js，大家可以去各自的官網下載。user.js是我們自己要寫的js文件，功能的實現全在這個文件中。
接下來就是編寫user.js中的搜索功能部分：
$('#search').click(function () {
var Nick = $('#user').val();
var date = $('#time').val();
if($('#user').val()==""&&$('#time').val()==""){
layer.msg('查詢內容不能為空');
return false;
}
table.reload('testReload', { //table.reload重載數據表格的語法，在文檔中有
url: 'search.php'
// ,methods:"post"
,request: {
pageName: 'page' //頁碼的參數名稱，默認：page
,limitName: 'pageSize' //每頁數據量的參數名，默認：limit
}
,where: {
// 向search.php傳送數據
start: date,
keyword: Nick
}
,page: {
curr: 1
}
});
return false;
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
注意這段代碼要放在下面這個function中（所有功能類如添加和刪除用戶都要放在里面）
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});
1
2
3
4
5
最后是search.php文件，代碼如下：
<?php
header('Access-Control-Allow-Origin: *'); //解決跨域問題
header('Content-Type:application/json'); //定義編碼JSON
//下面函數解決PHP報錯Notice: Undefined index
function _post($str){
$val = !empty($_GET[$str]) ? $_GET[$str] : null;
return $val;
}
//start和keyword對應於上面js代碼中的date和Nick
$PersonalRegisterTime=_post('start');
$PersonalNickName=_post('keyword');
// $conn = mysqli_connect("localhost","root",""," myplays");
$servername = "";
$username = "root";
$password = "";
$dbname = " myplays";
$conn = mysqli_connect($servername,$username,$password,$dbname);
mysqli_query($conn,"set names utf8");
$sql = "SELECT * FROM username where PersonalNickName LIKE '%$PersonalNickName%' and PersonalRegisterTime LIKE '%$PersonalRegisterTime%' and judge = '1'";
$resultSet = mysqli_query($conn,$sql);
$sqli = mysqli_num_rows($resultSet);
//定義一個json函數，將輸出結果轉化為json格式，才能用數據表格渲染出來
function json($result_number,$result=array()){
$result=array(
'code'=>$result_number,
'data'=>$result
);
//輸出json
echo json_encode($result);
exit;
}
$dataarr = array();
if(mysqli_num_rows($resultSet)>0){
while($row = mysqli_fetch_assoc($resultSet)) {
$dataarr[]=$row;
}
echo json(0,$dataarr);//要code：0，表格才能渲染出來
}else{
echo json(0,$dataarr);
}
mysqli_close($conn);
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
這樣一個搜索用戶的功能就這樣實現了。
2.添加功能
添加功能就需要用到彈出層，彈窗方法。
我們可以使用這個方法來實現。
首先寫一個js文件，命名為admin.js文件。
在其中使用layui.define([mods], callback)定義模塊。寫下代碼如下。
/*
參數解釋：
title 標題
url 請求的url
id 需要操作的數據id
w 彈出層寬度（缺省調默認值）
h 彈出層高度（缺省調默認值）
*/
window.WeAdminShow = function(title, url, w, h) {
if(title == null || title == '') {
title = false;
};
if(url == null || url == '') {
url = "404.html";
};
if(w == null || w == '') {
w = ($(window).width() * 0.9);
};
if(h == null || h == '') {
h = ($(window).height() - 50);
};
layer.open({
type: 2,
area: [w + 'px', h + 'px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade: 0.4,
title: title,
content: url
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
然后在user.js中拓展這一模塊
layui.extend({
admin: '{/}../../static/js/admin'
});
1
2
3
再接着使用layui.use 加載。
注：表單模塊文檔 - layui.form地址：https://www.layui.com/doc/modules/form.html
最后再寫一個add.html作為彈出層的界面，並在其中使用事件監聽form.on和Ajax將用戶信息提交到insert.php文件，添加到數據庫中。代碼如下:
<form class="layui-form">
<div class="layui-form-item">
<label for="L_username" class="layui-form-label">
<span class="we-red">*</span>登錄名
</label>
<div class="layui-input-inline">
<input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off" class="layui-input" placeholder="請輸入你的昵稱">
</div>
<div class="layui-form-mid layui-word-aux">
請設置開頭不能為數字
</div>
</div>
<div class="layui-form-item">
<label for="L_phone" class="layui-form-label">
<span class="we-red">*</span>手機
</label>
<div class="layui-input-inline">
<input type="text" id="L_phone" name="phone" lay-verify="required|phone" autocomplete="" class="layui-input" placeholder="請輸入手機號碼">
</div>
</div>
<div class="layui-form-item">
<label for="L_Status" class="layui-form-label">
<span class="we-red">*</span>身份
</label>
<div class="layui-input-inline">
<input type="text" id="L_Status" name="Status" autocomplete="off" class="layui-input" placeholder="請輸入您的身份">
</div>
</div>
<div class="layui-form-item">
<label for="L_pass" class="layui-form-label">
<span class="we-red">*</span>密碼
</label>
<div class="layui-input-inline">
<input type="password" id="L_pass" name="pass" lay-verify="required|pass" autocomplete="off" class="layui-input" placeholder="請輸入密碼">
</div>
<div class="layui-form-mid layui-word-aux">
6到16個字符
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
<span class="we-red">*</span>確認密碼
</label>
<div class="layui-input-inline">
<input type="password" id="L_repass" name="repass" lay-verify="required|repass" autocomplete="off" class="layui-input" placeholder="請再次輸入密碼">
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">確定</button>
</div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script>
layui.extend({
admin: '{/}../../static/js/admin'
});
layui.use(['form', 'jquery','util','admin', 'layer'], function() {
var form = layui.form,
$ = layui.jquery,
util = layui.util,
admin = layui.admin,
layer = layui.layer;
//自定義驗證規則
form.verify({
nikename: function(value) {
if(value.length < 5) {
return '昵稱至少得5個字符啊';
}
},
pass: [/(.+){6,12}$/, '密碼必須6到12位'],
repass: function(value) {
if($('#L_pass').val() != $('#L_repass').val()) {
return '兩次密碼不一致';
}
}
});
//失去焦點時判斷值為空不驗證，一旦填寫必須驗證
$('input[name="email"]').blur(function(){
//這里是失去焦點時的事件
if($('input[name="email"]').val()){
$('input[name="email"]').attr('lay-verify','email');
}else{
$('input[name="email"]').removeAttr('lay-verify');
}
});
//監聽提交
form.on('submit(add)', function(data) {
//console.log(data.field);
var f = data.field;
//發異步，把數據提交給php
$.ajax({
type:'post',
url:'insert.php',
data : data.field,
dataType:'JSON',
success:function(Result){
if(Result="200"){ // Result="200"是insert.php中增加成功的回應，用於判斷是否增加成功。可對照下面的edit.php。
layer.alert("增加成功", {
icon: 6 //笑臉
}, function() {
//獲取提交成功的時間
var time = new Date();
var timeNow = util.toDateString(time);
// 獲得frame索引
var index = parent.layer.getFrameIndex(window.name);
//關閉當前frame
parent.layer.close(index);
window.parent.location.reload();//刷新
});
}
else {
layer.alert("增加失敗", {
icon: 7 //感嘆號
}, function() {
//獲取提交成功的時間
var time = new Date();
var timeNow = util.toDateString(time);
// 獲得frame索引
var index = parent.layer.getFrameIndex(window.name);
//關閉當前frame
parent.layer.close(index);
return false;
});
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
最后我們的添加用戶功能就實現了。
3.刪除、編輯和查看功能
刪除、編輯和查看功能的實現方式大部分相同，編輯和查看也是需要用到彈出層，彈窗方法。首先是在user.html上寫入如下代碼：
<script type="text/html" id="operateTpl">//operateTpl用於數據表格中操作一列的選中
<a title="編輯" onclick="member_edit(this,'要修改的id')">
<i class="layui-icon"></i>
</a>
<i class="layui-icon layui-icon-util"></i>
</a>
<a title="查看" onclick="member_show(this,'要查看的id')">
<i class="layui-icon"></i>
</a>
<a title="刪除" onclick="member_del(this,'要刪除的id')" >
<i class="layui-icon"></i>
</a>
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
注：layui.use 加載layui.define 定義的模塊，當外部 js 或 onclick調用 use 內部函數時，需要在 use 中定義 window 函數供外部引用。
所以在user.js中寫下如下代碼：
//編輯用戶
window.member_edit = function (obj,id) {
var str =$(obj).parents("tr") .text();
var reg = /[0-9]+/;
var id = str.match(reg)[0];
$.ajax({
type: 'get',
url: "edit2.php?id=" + id
});
WeAdminShow('編輯用戶', './edit.html', 500, 400);
}
//查看
window.member_show = function (obj,id) {
var str =$(obj).parents("tr") .text();
var reg = /[0-9]+/;
var id = str.match(reg)[0];
$.ajax({
type: 'get',
url: "show1.php?id=" + id
});
WeAdminShow('查看用戶', './show.html', 500, 400);
}
/*用戶-刪除*/
window.member_del = function (obj, id) {
layer.confirm('確認要刪除嗎？', function (index) {
//發異步刪除數據
$(obj).parents("tr").remove();
layer.msg('已刪除!', {
icon: 1,
time: 1000
});
//截取選中項的id，進行刪除
var str =$(obj).parents("tr") .text();
var reg = /[0-9]+/;
var id = str.match(reg)[0];
//將得到的id使用get方式通過ajax傳送給del2.php，進行刪除
$.ajax({
type: 'get',
url: "del2.php?id=" + id,
})
setTimeout(function(){
location.replace(location.href);//成功后刷新父界面
}, 1000);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
接下來就是分點講解編輯和查看的彈出層界面和PHP文件。
（1）編輯
編輯的彈出界面與添加功能的幾乎一樣，大家可以參考上面的add.html，此處就不講解了。
首先在上面的代碼中先把選中用戶的id送入edit2.php，存入cookie值中，然后我們通過edit.php(對應於上面的insert.php)來使用id選擇用戶，並修改對應的用戶資料。
edit.php：
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: text/json');
function _post($str){
$val = !empty($_POST[$str]) ? $_POST[$str] : null;
return $val;
}
@$id=$_COOKIE['id']; //將cookie值id存入變量id中
@$admin=$_COOKIE['admin'];
$PersonalNickName=_post('username');
$PersonalPhone=_post('phone');
$PersonalPassword=_post('pass');
$timeoffset = 8;
$PersonalRegisterTime=date('Y-m-d H:i:s', time()+ $timeoffset * 3600);
$Status = _post('Status');
$servername = "";
$username = "root";
$password = "";
$dbname = " myplays";
$conn = mysqli_connect($servername,$username,$password,$dbname);
mysqli_query($conn,"set names utf8");
$sql ="UPDATE username SET PersonalNickName = '$PersonalNickName',PersonalPhone = '$PersonalPhone',PersonalPassword = '$PersonalPassword',PersonalRegisterTime ='$PersonalRegisterTime', Status ='$Status' WHERE Personalld = '$id' ";
$res = mysqli_query( $conn, $sql );
if(!$res){
class Em {
public $Result = "";
}
$e = new Em();
$e->Result = "100";//修改失敗
echo json_encode($e);
}else{
class Emp {
public $Result = "";
}
$e = new Emp();
$e->Result = "200";//修改成功
echo json_encode($e);
}
setcookie("id", "", time()-3600);//將id值刪掉
mysqli_close($conn);
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
（2）查看
查看的彈出層界面與add.html中的HTML部分一樣，不同的地方在於它的js部分：
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
$.ajax({
type: 'get',
url: 'show.php',
success: function (data) {
var msg = JSON.parse(data);
//從show.php傳過來的數組，分別存放到對應的變量中
var AdminNickName=msg[0][1];
var AdminPhone = msg[0][2];
var time = msg[0][4];
var Status=msg[0][5];
//然后將變量值放入對應的輸入框中
$('#username').val(AdminNickName);
$('#phone').val(AdminPhone);
$('#char').val(Status);
$('#time').val(time);
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
與編輯一樣，我們也是要通過id來選擇用戶（原理與上面編輯一樣，使用show1.php將id存入cookie值，再通過show.php使用id，挑選出對應的用戶資料），從而將對應的用戶資料展現出來。
效果如下：
show.php：
<?php
header('Access-Control-Allow-Origin: *'); //解決跨域問題
header("Content-Type:text/html;charset=utf-8");//設置頁面字符編碼
function _cookie($str){
$val = !empty($_COOKIE[$str]) ? $_COOKIE[$str] : null;
return $val;
}
$id=_cookie('id');
$servername = "";
$username = "root";
$password = "";
$dbname = " myplays";
$conn = mysqli_connect($servername,$username,$password,$dbname);
mysqli_query($conn,"set names utf8");
$sql = "SELECT * FROM username where judge ='1' and Personalld = '$id'";
$result = mysqli_query($conn,$sql);
$arr=array();
while($row=mysqli_fetch_array($result)) {
array_push($arr,$row);
}
echo json_encode($arr);//將挑選出的用戶資料變成數組
setcookie("id", "", time()-60);
mysqli_close($conn);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
這樣就可以實現查看用戶的功能了。
以上就是我實現這些功能的思路和方法，希望能幫到有需要的人。可能有些地方寫的不詳細或者會出現bug，也希望大家多多寬容，並在下方的評論中指出問題，我會盡快回復你的。
————————————————
版權聲明：本文為CSDN博主「小虎工程師」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43453731/article/details/98473389