当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

使用layui快速实现登录页面

最近在写一个导航网站的后台,为了方便快捷,我采用了layUI来做后台,这个前段框架还不错,使用简单,就是不够灵活,样式单一。当然咱们也可以写些样式覆盖掉默认的样式,这样做简直浪费时间,不过用来做后台还是可以的,因为后台只有管理员才会看到,好不好看无所谓。

使用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">密&nbsp;&nbsp;&nbsp;&nbsp;码:</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="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录"/>

    </div>

  </div>

</form>

 </div>

</body>

</html>

感觉很棒!可以赞赏支持我哟~

赞(9) 打赏

评论 1

  1. #1

    现在个人博客还能坚持自己写的,很可贵!

    老张家茶10个月前 (11-15)回复
×

请作者吃根烤肠!

支付宝