Layui后台实现搜索、添加、删除、编辑、查看功能（以用户管理为例）

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">&#xe642;</i>
</a>
<i class="layui-icon layui-icon-util"></i>
</a>
<a title="查看" onclick="member_show(this,'要查看的id')">
<i class="layui-icon">&#xe63c;</i>
</a>
<a title="删除" onclick="member_del(this,'要删除的id')" >
<i class="layui-icon">&#xe640;</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