最近在写一个导航网站的后台，为了方便快捷，我采用了layUI来做后台，这个前段框架还不错，使用简单，就是不够灵活，样式单一。当然咱们也可以写些样式覆盖掉默认的样式，这样做简直浪费时间，不过用来做后台还是可以的，因为后台只有管理员才会看到，好不好看无所谓。
使用layui快速实现登录页面
登录UI如上图所示，服务器端使用PHPsession来记录用户是否登录，代码如下：
<?php
session_start();
if (isset($_POST['user'])) {
$user = $_POST['user'];
$password = $_POST['password'];
if ($user == 'admin' && $password == '123456') {//验证正确
$_SESSION['user'] = $user;
//跳转到首页
header('location:http://127.0.0.1/daohang/admin/index.php');
}else{
echo "<script>alert('登录失败，用户名或密码不正确');</script>";
exit();
}
}
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<style>
.window{
width: 400px;
position: absolute;
margin-left: -200px;
margin-top: -80px;
top: 50%;
left: 50%;
display: block;
z-index: 2000;
background: #fff;
padding: 20 0;
}
</style>
</head>
<body style="background: #f1f1f1;">
<div class="window">
<form class="layui-form" method="post">
<div class="layui-form-item" style="margin-right: 100px;margin-top: 20px;">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-block">
<input type="text" name="user" 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-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<div style="margin-left: 50px;margin-bottom: 10px;" class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>保持登录7天</span><i class="layui-icon"></i></div>
<div style="text-align: center;">
<input type="submit" class="layui-btn" value="登 录"/>
</div>
</div>
</form>
</div>
</body>
</html>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/241459.html