LayUI下线了，我却第一次使用LayUI

最新推荐文章于 2024-07-08 10:03:48 发布

dawn

最新推荐文章于 2024-07-08 10:03:48 发布

阅读量4.1k

点赞数 4

分类专栏： LayUI 文章标签： layui 前端 javascript php mysql

本文链接：https://blog.csdn.net/dawn0718/article/details/122092309

版权

LayUI 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

　　在一个博客上看到了LayUI下线，好像是10月31日后不再更新，但是可以正常使用，看了别人的介绍文章，感觉它的界面很漂亮，是尤雨溪开发的、很方便的前端框架。

　　特别是登录界面和主界面很漂亮，刚好要写一个Web页的小程序，决定拿它来练手，星期天下载了它的框架，结果发现我的小程序就几个页面，根本用不上，但不妨碍使用它，因为它的资料很全，查阅起来也很方便。

　　LayUI + PHP7.4 + MySQL8，经过三天多的努力，完成得差不多了，也算是完成了第一个Web页面小程序。

　　中间遇到了很多的问题，通过看原文档和在CSDN上搜索得到了解决。

　　登录界面：

login.html文件代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据记录-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

 		<!-- <link rel="stylesheet" type="text/css" href="css/default.css" /> -->
		<link rel="stylesheet" type="text/css" href="css/layuimini.css" />

    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .main-body {top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
        .login-main .login-bottom .center .item input {display:inline-block;width:227px;height:22px;padding:0;position:absolute;border:0;outline:0;font-size:14px;letter-spacing:0;}
        .login-main .login-bottom .center .item .icon-1 {background:url(./images/icon-login.png) no-repeat 1px 0;}
        .login-main .login-bottom .center .item .icon-2 {background:url(./images/icon-login.png) no-repeat -54px 0;}
        .login-main .login-bottom .center .item .icon-3 {background:url(./images/icon-login.png) no-repeat -106px 0;}
        .login-main .login-bottom .center .item .icon-4 {background:url(./images/icon-login.png) no-repeat 0 -43px;position:absolute;right:-10px;cursor:pointer;}
        .login-main .login-bottom .center .item .icon-5 {background:url(./images/icon-login.png) no-repeat -55px -43px;}
        .login-main .login-bottom .center .item .icon-6 {background:url(./images/icon-login.png) no-repeat 0 -93px;position:absolute;right:-10px;margin-top:8px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-nocheck {display:inline-block;width:10px;height:10px;border-radius:2px;border:solid 1px #9abcda;position:relative;top:2px;margin:1px 8px 1px 1px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-check {margin:0 7px 0 0;width:14px;height:14px;border:none;background:url(../images/icon-login.png) no-repeat -111px -48px;}
        .login-main .login-bottom .center .item .icon {display:inline-block;width:33px;height:22px;}
        .login-main .login-bottom .center .item {width:288px;height:35px;border-bottom:1px solid #dae1e6;margin-bottom:35px;}
        .login-main {width:428px;position:relative;float:left;}
        .login-main .login-top {height:117px;background-color:#148be4;border-radius:12px 12px 0 0;font-family:SourceHanSansCN-Regular;font-size:30px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#fff;line-height:117px;text-align:center;overflow:hidden;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
        .login-main .login-top .bg1 {display:inline-block;width:74px;height:74px;background:#fff;opacity:.1;border-radius:0 74px 0 0;position:absolute;left:0;top:43px;}
        .login-main .login-top .bg2 {display:inline-block;width:94px;height:94px;background:#fff;opacity:.1;border-radius:50%;position:absolute;right:-16px;top:-16px;}
        .login-main .login-bottom {width:428px;background:#fff;border-radius:0 0 12px 12px;padding-bottom:53px;}
        .login-main .login-bottom .center {width:288px;margin:0 auto;padding-top:40px;padding-bottom:15px;position:relative;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        body {background:url(./images/loginbg.png) 0% 0% / cover no-repeat;position:static;font-size:12px;}
        input::-webkit-input-placeholder {color:#a6aebf;}
        input::-moz-placeholder {/* Mozilla Firefox 19+ */            color:#a6aebf;}
        input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */            color:#a6aebf;}
        input:-ms-input-placeholder {/* Internet Explorer 10-11 */            color:#a6aebf;}
        input:-webkit-autofill {/* 取消Chrome记住密码的背景颜色 */            -webkit-box-shadow:0 0 0 1000px white inset !important;}
        html {height:100%;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        .login-main .login-bottom .tip .login-tip {font-family:MicrosoftYaHei;font-size:12px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#9abcda;cursor:pointer;}
        .login-main .login-bottom .tip .forget-password {font-stretch:normal;letter-spacing:0;color:#1391ff;text-decoration:none;position:absolute;right:62px;}
        .login-main .login-bottom .login-btn {width:288px;height:40px;background-color:#1E9FFF;border-radius:16px;margin:24px auto 0;text-align:center;line-height:40px;color:#fff;font-size:14px;letter-spacing:0;cursor:pointer;border:none;}
        .login-main .login-bottom .center .item .validateImg {position:absolute;right:1px;cursor:pointer;height:36px;border:1px solid #e6e6e6;}
        .footer {left:0;bottom:0;color:#fff;width:100%;position:absolute;text-align:center;line-height:30px;padding-bottom:10px;text-shadow:#000 0.1em 0.1em 0.1em;font-size:14px;}
        .padding-5 {padding:5px !important;}
        .footer a,.footer span {color:#fff;}
        @media screen and (max-width:428px) {.login-main {width:360px !important;}
            .login-main .login-top {width:360px !important;}
            .login-main .login-bottom {width:360px !important;}
        }
    </style>
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>数据记录</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" lay-verify="required"  placeholder="请输入登录账号" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" lay-verify="required"  placeholder="请输入密码" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>

                <div id="validatePanel" class="item" style="width: 137px;">
                    <input type="text" name="captcha" placeholder="请输入验证码" maxlength="4">
                    <img class="validateImg"  src="captcha.php"  width="100" height="38">
                </div>

            </div>
<!--            <div class="tip">
                <span class="icon-nocheck"></span>
                <span class="login-tip">保持登录</span>
                <a href="javascript:" class="forget-password">忘记密码？</a>
            </div>
 -->            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
            </div>
        </form>
    </div>
</div>
<div class="footer"><span class="padding-5"></span>信息档案管理站编制 V0.1</div>
<script src="./lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }
		
            $.ajax({
                url:'login.php',
                data:"username="+data.username+"&password="+data.password+"&captcha="+data.captcha,
                type:'POST',
                success:function (data) {
                    if (data == 'OK'){
                        location.href = "index.php";
                    }else{
                        layer.msg(data);
                    }
                }
            });
            return false;			
        });
    });
</script>
</body>
</html>

生成验证码的captcha.php文件：

<?php
session_start();

$image = imagecreatetruecolor(100, 38);//定义图片大小
$bgcolor = imagecolorallocate($image, 255, 255, 255);//将背景设置为白色的
imagefill($image, 0, 0, $bgcolor);//用白色填充图片
//为验证码增加干扰点
for ($i=0; $i < 99; $i++) { 
	$pointcolor = imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
	imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);
}
//为验证码增加干扰线
for ($i=0; $i < 3; $i++) { 
	$linecolor = imagecolorallocate($image,rand(80,220),rand(80,220),rand(80,220));
	imageline($image, rand(1,99), rand(1,29),rand(1,99), rand(1,29) ,$linecolor);
}
//验证码为随机四个字符，数字和字母
$data='abcdefghijkmnpqrstuvwxy3456789';	//不用0和1，因为o和0、l和1、2和Z容易引起混淆

for ($i=0; $i <4 ; $i++) { 
	$fontSize=19;
	$fontColor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));
	$fontContent = substr($data,rand(0,strlen($data)) ,1);
	$captchCode = $captchCode.$fontContent;
	$x=($i*100/4)+rand(5,10);
	$y=rand(5,10);
	imagestring($image,$fontSize,$x,$y,$fontContent,$fontColor);
}

ob_clean();
$_SESSION['DRcaptcha'] = $captchCode;//记录验证码
header('Content-type:image/png');//返回给浏览器的响应头，告诉浏览器是PNG图片
imagepng($image);
imagedestroy( $image );//销毁资源
?>

login.php文件代码：

<?php
error_reporting(0);
session_start();
$continue=true;
$falseStr="";
//获取post的数据
$userName = $_POST['username'];
$passWord = $_POST['password'];
$captcha  = $_POST['captcha'];
require 'DRlinkConfig.php';
if($captcha<>$_SESSION['DRcaptcha']){
	$continue=false;
	$falseStr="验证码错误！";	
}else{
	//连接数据库
	$sql = "select * from druserlist where c02 = '$userName'";
	$result = mysqli_query($mysqli,$sql);
	$phpRes = mysqli_fetch_row( $result );
	if ( !$phpRes ) {
		$continue=false;
		$falseStr="用户名不存在！";
	}else{
		$sql = "select c03 from druserlist where c02 = '$userName' and c03='$passWord'";
		$result = mysqli_query($mysqli,$sql);
		$phpRes = mysqli_fetch_row( $result );
		if(!$phpRes){
			$continue=false;
			$falseStr="密码错误！";
		}
	}	
}
if($continue){
	//创建会话
	$_SESSION['WRUser']=$userName;
  	echo 'OK';	
}else{
	echo $falseStr;	
}
?>

　　主界面：

　　index.php文件代码：

<?php
session_start();
$continue=true;
$falseStr="";

if(empty($_SESSION['WRUser'])){ 
	$continue=false;
	$falseStr="请登录！";	
}

// if(basename($_SERVER['REQUEST_URI'])<>"login.html"){ 
// 	$continue=false; 
// 	$falseStr="请正确登录！".basename($_SERVER['REQUEST_URI']);		
// }

if(!$continue){
	header("location:login.html");
//	echo $falseStr;
	exit;
}
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据记录</title>
		
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 		<link rel="stylesheet" type="text/css" href="css/default.css"  media="all" />
 		<!-- <link rel="stylesheet" type="text/css" href="css/public.css"  media="all" />		 -->
		<link rel="stylesheet" type="text/css" href="lib/layui-v2.6.3/css/layui.css"  media="all" />
	</head>
	<style>
		* { margin: 0;padding: 0;}
		.header { width: 100%;height: 60px;background-color: #efefef;box-shadow:0 0 10px rgba(0, 0, 0, 0.5);}
		.content{ width: 100%;height: calc(100vh - 110px);background-color: #FFFFFF;overflow: hidden;margin-top: 10px;}
		.left{width: 12vw;height: 100%;float: left;}
		.right{width: 77vw;height: 100%;float: left;}		
		.footer{width: 100%;height: 40px;background-color: #efefef;}
	</style>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
		
				<div class="header">
					<div class="left">
						
						<div style="display: inline-block;vertical-align: middle;margin-top: 5px;margin-left: 5px;">
							<img src="./images/logo.png" width="40px" height="40px">
						</div>
						<div style="display: inline-block;vertical-align: middle;margin-left: 10px;">
							<label style="font-size: 24px;color: #333333;">数据记录</label>
						</div>												
						
					</div>
					<div class="right">
						
						<!-- 菜单栏 -->
						<ul class="layui-nav" style="float: left;" id="layerDemo">
							<li class="layui-nav-item"><a href="">计划安排</a></li>
							<li class="layui-nav-item">
								<a href="">设置参数</a>
								<dl class="layui-nav-child">
									<a data-method="notice"  id="DRUser" >用户表</a>
									<a data-method="confirmTrans" id="DRMemberList">人员列表</a>
									<a data-method="setTop"  id="DRUnitList">单位列表</a>							
								</dl>
							</li>
						</ul>
					
						
					</div>
				</div>
				<div class="content">			
					
				</div>
				
				<div class="footer"></div>
		
			</div>
		</div>		

		<!-- <script type="text/javascript" src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script> -->
		<script type="text/javascript" src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '当你选择该窗体时，即会在最顶端'
                    , area: ['390px', '260px']
                    , shade: 0
                    , maxmin: true
                    , offset: [ //为了演示，随机坐标
                        Math.random() * ($(window).height() - 300)
                        , Math.random() * ($(window).width() - 390)
                    ]
                    , content: '//layer.layui.com/test/settop.html'
                    , btn: ['继续弹出', '全部关闭'] //只是为了演示
                    , yes: function () {
                        $(that).click();
                    }
                    , btn2: function () {
                        layer.closeAll();
                    }

                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
            , confirmTrans: function () {
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了', '哦']
                });
            }
            , notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    , title: false //不显示标题栏
                    , closeBtn: false
                    , area: '300px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['火速围观', '残忍拒绝']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            , target: '_blank'
                        });
                    }
                });
            }
            , offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();

                layer.open({
                    type: 1
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: '<div style="padding: 20px 100px;">' + text + '</div>'
                    , btn: '关闭全部'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };

        $('#DRUser').on('click', function () {
                layer.open({
                    type: 2
                    , title: '用户管理' //显示标题栏：['用户管理', 'font-size:18px;']
                    , closeBtn: 0
                    , area: ['870px', '700px']   //
                    , shade: 0.3
                    , id: 'LAY_layuipro_DRUser' //设定一个id，防止重复弹出
                    , btn: ['关闭']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: 'DRUserList.html'
                    , success: function (layero) {
						
                        // var btn = layero.find('.layui-layer-btn');
                        // btn.find('.layui-layer-btn0').attr({
                        //     href: 'http://www.xjyt.petrochina/'
                        //     , target: '_blank'
                        // });
						
                    }
                });		
        });

        $('#DRMemberList').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        $('#DRUnitList').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>

	</body>
</html>

　　用户管理主界面：

DRUserList.html文件内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
	<style>
		* { margin: 0;padding: 0;}
	</style>
</head>
<body>
	
<div style="width: 840px;">
	
	<div class="layuimini-container">
		<div class="layuimini-main">

			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
					<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
				</div>
			</script>

			<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

			<script type="text/html" id="currentTableBar">
				<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
			</script>

		</div>
	</div>
</div>

<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
			element=layui.element,
            table = layui.table;
			

        table.render({
            elem: '#currentTableId',
            url: 'DRUserList.php',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports'],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'C01', width: 100, title: '员工编号', sort: true},
                {field: 'C02', width: 100, title: '用户名称'},
                {field: 'C03', width: 100, title: '用户密码', },
                {field: 'C04', width: 100, title: '用户类型'},
                {field: 'C05', width: 200, title: '说明'},
                {title: '操作',width: 160, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5,10],
            limit: 10,
            page: true,
            skin: 'line'
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:false,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'DRUserAdd.html',
                });
				
                $(window).on("resize", function () {
                    layer.full(index);
                });
				
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                // layer.alert(JSON.stringify(data));
				// console.log(JSON.stringify(data));
				for(var i=0;i<data.length;i++){

					$.ajax({
						url:'DRUserDel.php',
						data:"C01="+data[i]['C01'],
						type:'POST',
						success:function (data) {
							$(".layui-laypage-btn")[0].click();
						}
					});



					// console.log(data[i]['C01']);
				}
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
				
				strQuery="?C01="+data.C01+"&C02="+data.C02+"&C03="+data.C03+"&C04="+data.C04+"&C05="+data.C05;
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:false,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'DRUserEdit.html'+strQuery
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
					//删除数据库对应的记录
					$.ajax({
						url:'DRUserDel.php',
						data:"C01="+obj.data.C01,
						type:'POST',
						success:function (data) {
							$(".layui-laypage-btn")[0].click();
						}
					});
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script>

</body>
</html>

··对应的DRUserList.php文件内容：

<?php
$page  = isset($_POST['page']) ? intval($_POST['page']) : 1;
$limit = isset($_POST['limit']) ? intval($_POST['limit']) : 10;

$page=$_GET['page'];
$limit=$_GET['limit'];

$offset = ($page-1)*$limit;

require 'DRlinkConfig.php';

$sql1 = "select * from druserlist";
$res = $mysqli->query($sql1);

$returnArr['code']=0;
$returnArr['msg']="";
$returnArr['count']=mysqli_num_rows($res);

$sql2 = "select * from druserlist order by C01 limit $offset,$limit";
$res = $mysqli->query($sql2);
$result = array();
while ($row = $res->fetch_assoc()){
    array_push($result,$row);
}
$returnArr['data']=$result;
echo json_encode($returnArr);
$res->free();
$mysqli->close();
?>

　　新增加用户界面：

　　添加新用户的DRUserAdd.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
	<form class="layui-form login-bottom">
	
	
    <div class="layui-form-item">
        <label class="layui-form-label required">员工编号</label>
        <div class="layui-input-block">
            <input type="text" name="DC01" id="DC01" lay-verify="required" lay-reqtext="员工编号不能为空"  value="" class="layui-input">
            <tip>填写八位整数的员工编号。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户类型</label>
        <div class="layui-input-block">
            <input type="radio" name="DC04" value="管理员" title="管理员" checked="">
            <input type="radio" name="DC04" value="普通用户" title="普通用户">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名称</label>
        <div class="layui-input-block">
            <input type="text" name="DC02" id="DC02"  lay-verify="required" lay-reqtext="用户名称不能为空"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="DC03"  id="DC03" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea name="DC05"  id="DC05" class="layui-textarea" placeholder="请输入备注信息（不超过100个汉字的）。"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
	
	</div>
</div>
<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
			data = data.field;			
			
			//检查数据
			var canContinue=true;
			var strFalse="";
			
			var jsonData=[];//准备一个空数组			 
			var updateData=new Object();//准备对象
			updateData.strTable="druserlist";
			updateData.strWhere="c01='"+document.getElementById("DC01").value+"'";
			jsonData.push(updateData);
			var json_str=JSON.stringify(jsonData);
			$.ajax({//检查员工编号是否存在
				url:'isExist.php',
				data:json_str,
				type:'POST',
				datetype:'json',
				async:false,
				success:function (data) {
					console.log(data);
					if(data=='YES'){ 
						canContinue=false;
						strFalse="员工编号已经存在！";
					}
				}
			});

			jsonData=[];//数组清空
			updateData.strWhere="c02='"+document.getElementById("DC02").value+"'";
			jsonData.push(updateData);
			var json_str=JSON.stringify(jsonData);
			$.ajax({//检查姓名是否重复
				url:'isExist.php',
				data:json_str,
				type:'POST',
				datetype:'json',
				async:false,
				success:function (data) {
					console.log(data);
					if(data=='YES'){ 
						canContinue=false;
						strFalse="用户姓名已经存在！";
					}
				}
			});

			if(canContinue){
				$.ajax({
						url:'DRUserAdd.php',
						data:"C01="+data.DC01+"&C02="+data.DC02+"&C03="+data.DC03+"&C04="+data.DC04+"&C05="+data.DC05,
						type:'POST',
						success:function (data) {
							var iframeIndex = parent.layer.getFrameIndex(window.name);
							parent.layer.close(iframeIndex);
														
							window.parent.location.reload();						
						}
					});				
			}else{
					layer.alert(strFalse);
					console.log(strFalse);
			}

            return false;
        });

    });
</script>
</body>
</html>

　　对应的DRUserAdd.php：

<?php
error_reporting(0);
session_start();
$continue=true;
$falseStr="";

//获取post的数据
$C01 = $_POST['C01'];
$C02 = $_POST['C02'];
$C03 = $_POST['C03'];
$C04 = $_POST['C04'];
$C05 = $_POST['C05'];

require 'DRlinkConfig.php';

//连接数据库
$sql = "insert into druserlist(C01,C02,C03,C04,C05) values('$C01','$C02','$C03','$C04','$C05')";
$result = mysqli_query($mysqli,$sql);
$phpRes = mysqli_fetch_row( $result );

if($phpRes){
	$continue=false;
	$falseStr="数据记录插入错误！";
}

if($continue){
	//创建会话
	echo "OK";	
}else{
	echo $falseStr;	
}

?>

　　修改界面：

修改界面的DRUserEdit.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
	<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>	
    <link rel="stylesheet" href="css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
	
	<form class="layui-form login-bottom" lay-fiter="DRUserEdit">
		
    <div class="layui-form-item">
        <label class="layui-form-label required">员工编号</label>
        <div class="layui-input-block">
            <input type="text" id="CC01" lay-verify="required" lay-reqtext="员工编号不能为空"  value="" class="layui-input" disabled="true">
            <tip>填写八位整数的员工编号。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户类型</label>
        <div class="layui-input-block" id="UserType">
            <input type="radio" name="CC04" id="CC04_A" value="管理员" title="管理员" checked="">
            <input type="radio" name="CC04" id="CC04_B" value="普通用户" title="普通用户">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名称</label>
        <div class="layui-input-block">
            <input type="text" id="CC02" lay-verify="required" lay-reqtext="用户名称不能为空"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" id="CC03" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea id="CC05" class="layui-textarea" placeholder="请输入备注信息（不超过100个汉字的）。"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
	
    </div>
	
</div>

<script>
	//获取URL后面的value值
	 function GetQueryString(name) {
		  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		  var r = window.location.search.substr(1).match(reg);
		  if (r != null)
			  return decodeURI(r[2]);
		  return null;
	 }
	// console.log( decodeURI(window.location.search.substr(1)) );
	
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
		
		Init_C01=GetQueryString("C01");
		Init_C02=GetQueryString("C02");
		Init_C03=GetQueryString("C03");
		Init_C04=GetQueryString("C04");
		Init_C05=GetQueryString("C05");
		
		document.getElementById("CC01").value=Init_C01;
		document.getElementById("CC02").value=Init_C02;
		document.getElementById("CC03").value=Init_C03;
		document.getElementById("CC05").value=Init_C05;

		if(GetQueryString("C04")=='管理员'){
			$('#CC04_A ').attr("checked", true);
			$('#CC04_B ').attr("checked", false);
		}else{
			$('#CC04_A ').attr("checked", false);			
			$('#CC04_B ').attr("checked", true);
		}
		form.render('radio'); 
		
        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var table = layui.table;
			//判断数据是否更改
			var strUpdate='';

			if(document.getElementById("CC02").value != Init_C02){
				strUpdate=" C02='"+document.getElementById("CC02").value+"'";
			}

			if(document.getElementById("CC03").value != Init_C03){
				if(strUpdate==''){
					strUpdate=" C03='"+document.getElementById("CC03").value+"'";
				}else{
					strUpdate=strUpdate+" , C03='"+document.getElementById("CC03").value+"'";
				}
			}
			
			var strUserType=$('#UserType input[name="CC04"]:checked ').val();
			
			if(!strUserType != Init_C04){
				if(strUpdate==''){
					strUpdate=" C04='"+strUserType+"'";
				}else{
					strUpdate=strUpdate+" , C04='"+strUserType+"'";
				}
			}
			
			if(document.getElementById("CC05").value != Init_C05){
				if(strUpdate==''){
					strUpdate=" C05='"+document.getElementById("CC05").value+"'";
				}else{
					strUpdate=strUpdate+" , C05='"+document.getElementById("CC05").value+"'";
				}
			}
			
			if(strUpdate !=''){
				//提交更改	
				var jsonData=[];//准备一个空数组			 
				var updateData=new Object();//准备对象
				updateData.C01=Init_C01;
				updateData.Update=strUpdate;
				jsonData.push(updateData);
				var json_str=JSON.stringify(jsonData);
				$.ajax({
					url:'DRUserUpdate.php',
					data:json_str,
					type:'POST',
					datetype:'json',
					success:function (data) {
						window.parent.location.reload();
					}
				});
			}
			var iframeIndex = parent.layer.getFrameIndex(window.name);
			parent.layer.close(iframeIndex);

            return false;
        });

    });
</script>

</body>
</html>

　　对应的DRUserUpdate.php：

<?php
error_reporting(0);
session_start();
$continue=true;
$falseStr="";

//获取post的JSON数据
$param= json_decode (isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : file_get_contents("php://input") );

require 'DRlinkConfig.php';
$C01=$param[0]->C01;
$Update=$param[0]->Update;

//连接数据库
$sql = "UPDATE druserlist SET $Update WHERE C01='$C01'";
$result = mysqli_query($mysqli,$sql);
$phpRes = mysqli_fetch_row( $result );

if($phpRes){
	$continue=false;
	$falseStr="数据更新出错！";
}

// if($continue){
// 	echo "OK";	
// }else{
// 	echo $falseStr;	
// }
echo $sql;

?>

DRUserDel.php：

<?php
error_reporting(0);
session_start();
$continue=true;
$falseStr="";

//获取post的数据
$C01 = $_POST['C01'];

require 'DRlinkConfig.php';

//连接数据库
$sql = "delete from druserlist where C01='$C01'";
$result = mysqli_query($mysqli,$sql);
$phpRes = mysqli_fetch_row( $result );

if($phpRes){
	$continue=false;
	$falseStr="数据记录插入错误！";
}

	//创建会话
if($continue){
	echo "OK";	
}else{
	echo $falseStr;	
}

?>

　　IsExist.php文件：

<?php
error_reporting(0);
session_start();
$continue=true;
$falseStr="";

//获取post的JSON数据
$param= json_decode (isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : file_get_contents("php://input") );

require 'DRlinkConfig.php';
$strTable=$param[0]->strTable;
$strWhere=$param[0]->strWhere;

//连接数据库
$sql = "select * from $strTable WHERE $strWhere";
$result = mysqli_query($mysqli,$sql);
$phpRes = mysqli_fetch_row( $result );

if($phpRes){
	echo "YES";	
}else{
	echo "NO";	
}

// echo $sql;
?>

dawn

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
6
评论
LayUI下线了，我却第一次使用LayUI

　　在一个博客上看到了LayUI下线，好像是10月31日后不再更新，但是可以正常使用，看了别人的介绍文章，感觉它的界面很漂亮，是尤雨溪开发的、很方便的前端框架。　　特别是登录界面和主界面很漂亮，刚好要写一个Web页的小程序，决定拿它来练手，星期天下载了它的框架，结果发现我的小程序就几个页面，根本用不上，但不妨碍使用它，因为它的资料很全，查阅起来也很方便。　　LayUI + PHP7.4 + MySQL8，经过三天多的努力，完成得差不多了，也算是完成了第一个Web页面小程序。　　中间遇到了很多的问
复制链接

扫一扫

专栏目录