在一个博客上看到了LayUI下线，好像是10月31日后不再更新，但是可以正常使用，看了别人的介绍文章，感觉它的界面很漂亮，是尤雨溪开发的、很方便的前端框架。
特别是登录界面和主界面很漂亮，刚好要写一个Web页的小程序，决定拿它来练手，星期天下载了它的框架，结果发现我的小程序就几个页面，根本用不上，但不妨碍使用它，因为它的资料很全，查阅起来也很方便。
LayUI + PHP7.4 + MySQL8，经过三天多的努力，完成得差不多了，也算是完成了第一个Web页面小程序。
中间遇到了很多的问题，通过看原文档和在CSDN上搜索得到了解决。
登录界面：
login.html文件代码：
数据记录-登陆
.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;}
}
数据记录
![]()
立即登录
信息档案管理站编制 V0.1
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;
});
});
生成验证码的captcha.php文件：
login.php文件代码：
主界面：
index.php文件代码：
数据记录
* { 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;}
![]()
数据记录
- 计划安排
-
设置参数
用户表
人员列表
单位列表
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('大部分参数都是可以公用的合理搭配，展示不一样的风格', {
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: '你知道吗？亲！layer ≠ layuilayer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layeruilayer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。我们此后的征途是星辰大海 ^_^'
, 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: '' + text + ''
, 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) : '';
});
});
用户管理主界面：
DRUserList.html文件内容：
layui
* { margin: 0;padding: 0;}
添加
删除
编辑
删除
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新增加用户界面：
添加新用户的DRUserAdd.html：
layui
body {
background-color: #ffffff;
}
员工编号
填写八位整数的员工编号。
用户类型
用户名称
密码
备注信息
确认保存
对应的DRUserAdd.php：
修改界面：
修改界面的DRUserEdit.html：
layui
body {
background-color: #ffffff;
}
员工编号
填写八位整数的员工编号。
用户类型
用户名称
密码
备注信息
确认保存
对应的DRUserUpdate.php：
DRUserDel.php：
IsExist.php文件：
