精华内容
下载资源
问答
  • layui实现登录页面

    万次阅读 多人点赞 2019-09-29 17:37:50
    首先给看下效果图吧! html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></sc...

    首先给看下效果图吧!

    在这里插入图片描述

    html、js

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <script src="./js/res_js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="./js/layui/css/layui.css">
        <link rel="stylesheet" href="./css/adminLogin.css">
    </head>
    <body>
        <div class="wrap">
            <img src="images/back.jpg" class="imgStyle">
            <div class="loginForm">
                <form>
                    <div class="logoHead">
                        <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>用户名:</label>
                        </div>
                        <div class="usernameDiv">
                            <i class="layui-icon layui-icon-username adminIcon"></i>
                            <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>密码:</label>
                        </div>
                        <div class="passwordDiv">
                            <i class="layui-icon layui-icon-password adminIcon"></i>
                            <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>验证码:</label>
                        </div>
                        <div class="cardDiv">
                            <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                        </div>
                        <div class="codeDiv">
                            <input id="loginCode" class="layui-input codeInput"  type="button">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="submitLabel">
                            <label>没有账号?<a href="#" id="loginRegister">点击注册</a></label>
                        </div>
                        <div class="submitDiv">
                            <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script src="./js/layui/layui.js" type="text/javascript"></script>
        <script>
            layui.use(['layer'],function () {
                var layer = layui.layer;
            })
            $(function () {
                // 页面初始化生成验证码
                window.onload = createCode('#loginCode');
                // 验证码切换
                $('#loginCode').click(function () {
                    createCode('#loginCode');
                });
                // 登陆事件
                $('#loginBtn').click(function () {
                    login();
                });
                // 注册事件
                $('#loginRegister').click(function () {
                    register();
                });
            });
            // 生成验证码
            function createCode(codeID) {
                var code = "";
                // 验证码长度
                var codeLength = 4;
                // 验证码dom元素
                var checkCode = $(codeID);
                // 验证码随机数
                var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                    'S','T','U','V','W','X','Y','Z'];
                for (var i = 0;i < codeLength; i++){
                    // 随机数索引
                    var index = Math.floor(Math.random()*36);
                    code += random[index];
                }
                // 将生成的随机验证码赋值
                checkCode.val(code);
            }
            // 校验验证码、用户名、密码
            function validateCode(inputID,codeID) {
                var inputCode = $(inputID).val().toUpperCase();
                var cardCode = $(codeID).val();
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                    layer.alert("用户名不能为空");
                    return false;
                }
                if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                    layer.alert("密码不能为空");
                    return false;
                }
                if (inputCode.length<=0){
                    layer.alert("验证码不能为空");
                    return false;
                }
                if (inputCode != cardCode){
                    layer.alert("请输入正确验证码");
                    return false;
                }
                return true;
            }
            // 登录流程
            function login() {
                if (!validateCode('#loginCard','#loginCode')){
                    //阻断提示
                }else {
                    var loginUsername = $('#loginUsername').val();
                    var loginPassword = $('#loginPassword').val();
                    var params = {};
                    params.loginUsername = loginUsername;
                    params.loginPassword = loginPassword;
                    var loginLoadIndex = layer.load(2);
                    $('#loginBtn').val("正在登录...");
                    $.ajax({
                        type:'post',
                        url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
                        dataType:'html',
                        data:JSON.stringify(params),
                        contentType:'application/json',
                        success:function (data) {
                            layer.close(loginLoadIndex);
                            var jsonData = JSON.parse(data);
                            if (jsonData.code == '999'){
                                window.location.href = './static/templates/main.html';
                            }
                        },
                        error:function () {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                        }
                    });
                }
    
            }
            // 注册流程
            function register() {
                layer.open({
                    type:'1',
                    content:$('.registerPage'),
                    title:'注册',
                    area:['430px','400px'],
                    btn:['注册','重置','取消'],
                    closeBtn:'1',
                    btn1:function (index,layero) {
                        //注册回调
                        layer.close(index);
                        var registerUsername = $('#registerUsername').val();
                        var registerPassword = $('#registerPassword').val();
                        var registerWellPassword = $('#registerWellPassword').val();
                        var selectValue = $('#roleSelect option:selected').val();
                        var params = {};
                        params.registerUsername = registerUsername;
                        params.registerPassword = registerPassword;
                        params.registerWellPassword = registerWellPassword;
                        params.selectValue = selectValue;
                        var registerLoadIndex = layer.load(2);
                        $.ajax({
                            type:'post',
                            url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
                            dataType:'json',
                            data:JSON.stringify(params),
                            contentType:'application/json',
                            success:function (data) {
                                layer.close(registerLoadIndex);
                                layer.msg(data);
                            },
                            error:function () {
                                layer.close(registerLoadIndex);
                                layer.alert("请求超时!")
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //重置回调
                        var registerUsername = $('#registerUsername').val("");
                        var registerPassword = $('#registerPassword').val("");
                        var registerWellPassword = $('#registerWellPassword').val("");
                        // 防止注册页面关闭
                        return false;
                    },
                    btn3:function (index,layero) {
                        //取消回调
                    }
                })
            }
        </script>
    
    </body>
    <div class="registerPage">
        <div class="registerDiv">
            <form>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>确认密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>角色类型:</label>
                    </div>
                    <div class="passwordDiv">
                        <select id="roleSelect" class="layui-select">
                            <option value="">请选择...</option>
                            <option value="0">经纪人</option>
                            <option value="1">房东</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </html>
    

    css

    /*登陆表单样式 start*/
    .wrap{
        width: 100%;
        height: 100%;
        background: url("../images/back.jpg") no-repeat;
        background-size: cover;
    }
    .loginForm{
        margin-left: 35%;
        margin-top: 10%;
        /*background-color: #cccccc;*/
        background-color: #e7e7e7;
        width: 400px;
        height: 400px;
        float: left;
        z-index: 9999;
        position: fixed;
        opacity: 0.75;
    }
    .usernameDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 30px;
    
    }
    .adminInput{
        width: 200px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em;
        /*margin-left: auto;*/
        /*border: 1px solid #cccccc;*/
    }
    .passwordDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 28px;
    }
    .cardDiv{
        width: 120px;
        height: 40px;
        padding-top: 28px;
        padding-left: 14px;
        float: left;
    }
    .cardInput{
        width: 124px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em 0em 0em 0.5em;
    }
    .codeDiv{
        width: 100px;
        height: 40px;
        padding-top: 28px;
        padding-right: 20px;
        float: left;
    }
    .codeInput{
        width: 80px;
        height: 40px;
        font-size: 15px;
        border-radius: 0em 0.5em 0.5em 0em;
        /*验证码样式*/
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        /*border: 0;*/
        letter-spacing: 2px;
        cursor: pointer;
    }
    i{
        position: absolute;
    }
    .adminIcon{
        font-size: 22px;
        margin-top: 8px;
        margin-left: 165px;
    }
    .logoHead{
        width: 250px;
        height: 60px;
        padding-left: 90px;
        padding-top: 25px;
    }
    .usernameLabel{
        width: 60px;
        height: 30px;
        font-size: 16px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
    }
    .submitLabel{
        width: 160px;
        height: 30px;
        font-size: 13px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
        cursor: pointer;
    }
    .usernameWrapDiv{
        width: 400px;
        height: 70px;
    }
    .submitDiv{
        width: 150px;
        height: 40px;
        padding-left: 10px;
        padding-top: 28px;
        float: left;
    }
    .submit{
        width: 100px;
        height: 40px;
        border-radius: 0.5em;
    }
    img{
        position: absolute;
    }
    .imgStyle{
        width: 100%;
        height: 100%;
    }
    /*登陆表单样式 end*/
    
    /*注册页面样式 start*/
    .registerPage{
        width: 100%;
        height: 100%;
        /*background-color: #cccccc;*/
        display: none;
        opacity: 0.75;
    }
    .registerDiv{
        width: 100%;
        height: 100%;
        z-index: 9999;
        opacity: 0.75;
    }
    /*注册页面样式 end*/
    
    展开全文
  • # 都很简单 不再解释了 spring.thymeleaf.cache=false spring.mvc.static-path-pattern= /static/** 导入静态文件 导入layui,直接将整个文件夹放在static下面即可 导入jquery、页面样式文件css等等 效果图如下: ...

    正文

    1. 创建一个Spring Boot项目,勾选Web、Thymeleaf即可

    2. pom文件中导入图片验证码的依赖

      <dependency>
          <groupId>com.github.whvcse</groupId>
          <artifactId>easy-captcha</artifactId>
          <version>1.6.2</version>
      </dependency>
      

    3. 配置application.properties属性文件

      # 都很简单 不再解释了
      spring.thymeleaf.cache=false
      spring.mvc.static-path-pattern= /static/**
      

    4. 导入静态文件

      1. 导入layui,直接将整个文件夹放在static下面即可

      2. 导入jquery、页面样式文件css等等

      3. 效果图如下:

        效果

    5. 编写页面跳转和验证码生成类(为了简化就放在一个类里面了)

      package byb;
      
      ......
          
      @Controller
      public class PageController {
      
          @RequestMapping("/")
          public String login() {
              return "login";
          }
      
          @GetMapping("/user/captcha")
          @ResponseBody
          public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
              // 设置请求头为输出图片类型
              response.setHeader("Pragma", "No-cache");
              response.setContentType("image/gif");
              response.setDateHeader("Expires", 0);
              response.setHeader("Cache-Control", "no-cache");
              // 三个参数分别为宽、高、位数
              SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4);
              specCaptcha.setFont(Captcha.FONT_1);
              // 设置类型,纯数字、纯字母、字母数字混合
              specCaptcha.setCharType(Captcha.TYPE_ONLY_NUMBER);
              // 验证码存入session
              request.getSession().setAttribute("captcha", specCaptcha.text().toLowerCase());
              // 输出图片流
              specCaptcha.out(response.getOutputStream());
          }
      }
      

    6. 在templates下创建login页面,再完善亿点点细节…

      注意: 这里我只是获取到用户输入的数据,如果对接后台的话,需要自己添加Ajax(提交到后台判断即可)

      <!DOCTYPE html>
      <html lang="en" xmlns:th="http://www.thymeleaf.org">
      <head>
          <meta charset="UTF-8">
          <title>登陆/注册</title>
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <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" th:href="@{/static/css/style.css}">
          <link rel="stylesheet" th:href="@{/static/css/login.css}">
          <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
          <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon"/>
          <!--[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]-->
      </head>
      <body>
      <div class="layui-container">
          <!--登录页面-->
          <div class="admin-login-background layui-anim layui-anim-upbit" id="login-form" style="display: block">
              <div class="layui-form login-form">
                  <form class="layui-form" action="">
                      <div class="layui-form-item logo-title">
                          <h1>后台系统登录页</h1>
                      </div>
                      <div class="layui-form-item">
                          <label class="layui-icon layui-icon-username"></label>
                          <input type="text" id="username" name="username" required lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-item">
                          <label class="layui-icon layui-icon-password"></label>
                          <input type="password" id="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-item">
                          <div class="layui-inline">
                              <div class="layui-input-inline" style="width: 178px;">
                                  <label class="layui-icon layui-icon-vercode"></label>
                                  <input type="text" id="code" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                              </div>
                              <img id="codeImage" src="http://localhost:8080/user/captcha" width="120px" height="48px" style="margin-top: -5px"  alt="点我更换" onclick="this.src='http://localhost:8080/user/captcha?'+Math.random()"/>
                          </div>
                      </div>
                      <div class="layui-form-item" style="margin-top: -15px;">
                          <input type="checkbox" name="rememberMe" lay-skin="primary" title="记住我">
                      </div>
                      <div class="layui-form-item">
                          <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
                      </div>
                      <hr class="layui-bg-green"/>
                      <p><a href="javascript:void(0);" onclick="register()" class="fr">立即注册</a></p><br>
                  </form>
              </div>
          </div>
          <!--注册页面-->
          <div class="admin-login-background layui-anim layui-anim-upbit" id="register-form" style="display: none">
              <div class="layui-form login-form">
                  <form class="layui-form" action="" method="post">
                      <div class="layui-form-item logo-title">
                          <h1>注册页</h1>
                      </div>
                      <div class="layui-form-item">
                          <div class="layui-inline" style="float: left">
                              <label class="layui-icon layui-icon-username"></label>
                              <input style="width: 280px" type="text" id="user" name="username" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                          </div>
                          <div class="layui-inline" style="float: left;margin-top: 7px">
                              <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
                          </div>
                          <div class="layui-inline" style="float: left">
                              <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden></i>
                          </div>
                      </div>
                      <div class="layui-form layui-form-item">
                          <div class="layui-inline" style="float: left">
                              <label class="layui-icon layui-icon-password"></label>
                              <input style="width: 280px" type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                          </div>
                          <div class="layui-inline" style="float: left;margin-top: 7px">
                              <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
                          </div>
                          <div class="layui-inline" style="float: left">
                              <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden></i>
                          </div>
                      </div>
                      <div class="layui-form-item">
                          <div class="layui-inline" style="float: left">
                              <label class="layui-icon layui-icon-auz"></label>
                              <input style="width: 280px" type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                          </div>
                          <div class="layui-inline" style="float: left;margin-top: 7px">
                              <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
                          </div>
                          <div class="layui-inline" style="float: left">
                              <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden></i>
                          </div>
                      </div>
                      <div class="layui-form-item">
                          <button style="width: 320px" type="submit" lay-submit lay-filter="submit" class="layui-btn">注册</button>
                      </div>
                      <hr class="layui-bg-orange"/>
                      <p><a href="javascript:void(0);" onclick="login()" class="fr">已有账号?立即登录</a></p><br>
                  </form>
              </div>
          </div>
      </div>
      
      <script th:src="@{/static/js/jquery-3.4.1.js}"></script>
      <script th:src="@{/static/layui/layui.js}"></script>
      <script th:src="@{/static/js/jquery.particleground.min.js}"></script>
      <script type="text/javascript">
      
          // 动态切换
          function register() {
              var login = document.getElementById("login-form");
              var register = document.getElementById("register-form");
              login.style.display = 'none';
              register.style.display = 'block';
          }
          function login() {
              var login = document.getElementById("login-form");
              var register = document.getElementById("register-form");
              login.style.display = 'block';
              register.style.display = 'none';
          }
      
          // 粒子线条背景
          $(document).ready(function(){
              $('.layui-container').particleground({
                  dotColor:'#5cbdaa',
                  lineColor:'#5cbdaa'
              });
          });
      
          //登录
          layui.use(['form','layer','jquery'], function () {
              var form = layui.form;
              var layer = layui.layer;
              var $ = layui.jquery;
      
              form.on('submit(login)',function (data) {
                  // 获取数据
                  console.log(data.field);
                  layer.alert(JSON.stringify(data.field));
                  // Ajax传到后台判断即可 具体略...
                  return false;
              });
          });
      
          //注册
          layui.use(['form','jquery','layer'], function () {
              var form   = layui.form;
              var $      = layui.jquery;
              var layer  = layui.layer;
      
              //添加表单失焦事件 并验证数据
              $('#user').blur(function() {
                  var user = $(this).val();
                  // 为用户名添加正则验证
                  var reg = /^[\w]{3,12}$/;
                  if(!($('#user').val().match(reg))){
                      $('#wr').removeAttr('hidden');
                      $('#ri').attr('hidden','hidden');
                      layer.msg('请输入3到12位合法用户名');
                  }
              });
      
              // 为密码添加正则验证
              $('#pwd').blur(function() {
                  var reg = /^[\w]{6,12}$/;
                  if(!($('#pwd').val().match(reg))){
                      $('#pwr').removeAttr('hidden');
                      $('#pri').attr('hidden','hidden');
                      layer.msg('请输入6到12位合法密码');
                  }else {
                      $('#pri').removeAttr('hidden');
                      $('#pwr').attr('hidden','hidden');
                  }
              });
      
              // 验证两次密码是否一致
              $('#rpwd').blur(function() {
                  var reg = /^[\w]{6,12}$/;
                  if(!($('#rpwd').val().match(reg))) {
                      $('#rpwr').removeAttr('hidden');
                      $('#rpri').attr('hidden', 'hidden');
                      layer.msg('请输入6到12位合法密码');
                  } else if($('#pwd').val() !== $('#rpwd').val()){
                      $('#rpwr').removeAttr('hidden');
                      $('#rpri').attr('hidden','hidden');
                  } else {
                      $('#rpri').removeAttr('hidden');
                      $('#rpwr').attr('hidden','hidden');
                  }
              });
      
              //添加表单监听事件,提交注册信息
              form.on('submit(submit)', function(data) {
                  console.log(data.field);
                  if (data.field.password !== data.field.repassword ) {
                      layer.msg('两次输入密码不一致');
                      return false;
                  }
      
                  layer.alert(JSON.stringify(data.field));
                  // Ajax传到后台注册即可 具体略...
                  return false;
              });
          });
      </script>
      </body>
      </html>
      

    7. 效果展示

      1. 登录图:点击验证码图片可以实现换一个功能
        登录

      2. 注册图:
        注册

      3. 登录与注册切换:
        切换

    8. 总结

      简简单单的小例子,可以应用到一些小项目中…就酱吧(>_<)!

    展开全文
  • 描述:在商城首页点击“退出登录”,浏览器发送请求到后台,controller方法进行处理退出功能,然后重定向页面回到商城首页 二. 解决方案 ==最最最关键的是使用return "redirect:/xxx.html"; @RequestMapping(value...

    一. 问题背景

    后台:SSM框架
    前端:layui框架

    描述:在商城首页点击“退出登录”,浏览器发送请求到后台,controller方法进行处理退出功能,然后重定向页面回到商城首页

    二. 解决方案

    • ==最最最关键的是使用return "redirect:/xxx.html";
    @RequestMapping(value="/logout")
    	public String logout(HttpServletRequest request){
    		ModelAndView mav = new ModelAndView();
    		HttpSession session = request.getSession();
    		session.removeAttribute("user");
    		return "redirect:/templates/layuimini/mallIndex.html";
    	}
    

    解释: 注意不要使用@ResponseBody注解,redirect后面的路径不用拼接项目名,springmvc会自动从项目名开始拼接

    展开全文
  • 原文:https://blog.csdn.net/ccy1995414/article/details/80638685自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么简单。1.首先自然是连接和创建数据库这部分我写在model.php中$...

    9061e2cd5a6e415b2a6182a1e6860c7b.png

    原文:https://blog.csdn.net/ccy1995414/article/details/80638685

    自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么简单。

    1.首先自然是连接和创建数据库

     这部分我写在model.php中

    $userName='root';$passWord='';$host='localhost';$dataBase='login';//创建连接$conn=mysqli_connect($host,$userName,$passWord,$dataBase);

    2.写前台页面,为了熟练前端框架,用了layui框架使界面,前面有一段js代码,来判断用户名密码输入是否为空

    <html><script src="layui.js";>script><link rel="stylesheet" href="layui.css" ;><head>    <meta charset="UTF-8">    <title>注册登录title>head><script language=JavaScript>    function InputCheck(){        if (Login.username.value == "")            {             alert("请输入用户名!");             Login.username.focus();             return (false);             }        if (Login.password.value == "")             {               alert("请输入密码!");               Login.password.focus();            return (false);             }         }script><body style="background: #1E9FFF"><div style="position: absolute; left: 50%; top: 50%;width: 500px; margin-left:-250px; margin-top: -200px">    <div style="background: #FFFFFF; padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444" >        <div>            <form action="login.php" method="post" name="Login" οnsubmit="return InputCheck()">                <div style="color: gray">                    <h2>注册登录系统h2>                div>                <hr>                <div>                    <label>用户名label>                    <div>                        <input type="text" name="username" id="username" placeholder="用户名" autocomplete="off">                    div>                div>                <div>                    <label>密    码label>                    <div>                        <input type="password" name="password" id="password" placeholder="密码" autocomplete="off">                    div>                div>                <div>                    <div;>                        <input type="submit" value="登录">                        <input type="button" value="注册">                    div>                div>            form>        div>    div>div>body>html>

    3.login.php 用来判断用户名密码的正确性,关于这一点我看了网上的很多方法,五花八门,在我没遇到障碍之前,我决定先用简单的形式,就是用sql语句查询用户名配上密码的结果集,结果集为空,则不存在该用户。 

    <?php  //数据库连接require_once 'model.php';//从登录页接受来的数据$name=$_POST['username'];$pwd=$_POST['password'];$sql="select id,username,password from user where username='$name' AND password='$pwd';";$result=mysqli_query($conn,$sql);$row=mysqli_num_rows($result); if(!$row){         echo ";     }    else{         echo ";    };

    4.文件目录

    d2409b7ea6234ac7de695f2e4573f3b5.png

    5.效果

    fc2f37e40dc9dece8fe9f9447152fac4.png

    d5d91a63b3e40979ad3d2b877d556e2e.png

    6.小结

    总体上不是特别困难,因为功能十分简单,下一步的任务是加入注册功能,以及验证码功能。

    67bead672d83804dba7c985f969ec17b.pngENDdce0dec07aecac727f23a71b8489be59.pngPHP开源社区

    扫描关注  进入”PHP资料“

    免费获取进阶

    面试、文档、视频资源

    展开全文
  • SSM实现简单登录现有的项目已经很多了,这边主要是为了自己的回顾,使用的是IDEA SSM整合请看系列九与系列八 完整项目结构 预实现功能 数据库中admin用户,页面登录,后台判断用户与密码,成功则转后台页面 后台代码...
  • 最近在用SSM+layUI做自己的一个小项目,用到要根据登录信息显示不同页面的问题,和大家分享下,如有不足,欢迎指出。在开始之前先给大家看下效果用户登录之前,登录位置显示的是登录。下面是系统的登录界面用户登录...
  • idea下ssm+pagehelper+layui实现分页,页面用的是html,用thymeleaf对登录用户回显,用md5工具类进行加密,实现用户的增删改查、批量删除功能,后面会加入角色权限管理
  • Layui JS实现验证码

    2020-12-08 17:23:30
    在用Layui框架的时候 会发现登录页面的验证是一个图片… 所以在查找后,记录了下来 可能样式会乱 自己适当调整一下 html代码 <div> <input id="input-val" type="text" name="captcha" placeholder="请...
  • 开始自然是从最简单的功能起步,我第一个任务选择了做一个...2、写前台页面,为了熟练前端框架,使用layui框架界面,前面有一段js代码,来判断用户名密码输入是否为空。 <!DOCTYPE html> <html> <scrip
  • 官方模板(参考链接 : layui 官方出品的单页面后台管理模板系统) 官方文档我找不到关于这类型控件如何实现,然后看到了这个(感谢这位老哥) 参考链接:在input里放入字体图标,如何设置让图标和输入框看起来...
  • SpringBoot 集成 Shiro 实现动态uri权限,由前端vue在页面配置uri,Java后端动态刷新权限,不用重启项目,以及在页面分配给用户 角色 、 按钮 、uri 权限后,后端动态分配权限,用户无需在页面重新登录才能获取最新...
  • Ajax实现登录,点击登录按钮后不跳转页面而是网页直接显示返回的JSON内容。 原因分析: 登录按钮button标签type用的是submit,这影响了Ajax交互的实现。 问题解决: 将登录按钮button标签type改成button。 <...
  • 登录页面 用户管理 修改密码 菜单管理 角色管理 数据源监控 Api-swagger 自动生成代码 注:有什么问题或需要帮助的可以评论或者微信扫描右边二维码联系我。 ...
  • 今天写代码,页面用的layui框架,要实现的功能是加载首页的时候,根据登录用户的id异步去数据库查找该用户拥有的权限,然后生成导航栏,导航栏有两级,但是最后发现只有一级菜单,二级菜单无法显示。 但是F12查页面...
  • 基于X-admin2.2的后台管理系统登录实现 Spring Boot+JPA微服务中数据更新问题(update) Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法 LayUi搜索时,如何只刷新表格内容,其他内容...
  • 不过使用这些标签做出来的都是静态页面,动态页面是没办法实现的。如果想要做出一个动态页面,我们就需要借助表单来实现。表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息,然后...
  • 首页是用户登录后要展示的页面。最终想实现的功能是:点击首页,就会自动查询数据库,显示文章;如果文章较多,我们可以实现分页。一、查询文章功能1.1 Controller我们首先修改home_controller.go文件,在Get()方法...
  • 登录注册2.1 绘制login页面的基本结构2.2 实现登录和注册的按需切换2.3 绘制登录表单的基本结构2.4 美化登录表单的样式2.5 绘制文本框前面的小图标2.6 快速绘制注册的表单2.7 实现登录表单的验证2.8 自定义校验规则...
  • 基于X-admin2.2的后台管理系统登录实现Spring Boot+JPA微服务中数据更新问题(update)Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法LayUi搜索时,如何只刷新表格内容,其他内容不变?...
  • php实现登录功能

    2020-09-24 16:54:13
    自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么简单。 1.首先自然是连接和创建数据库 ...2.写前台页面,为了熟练前端框架,用了layui框架使界面,前面有一段js.
  • 页面登录操作

    2019-06-05 16:41:46
    一、页面登录操作 在这个登录里面要用到的一个js文件引用这个文件layui 图1 首先是写一个方法,在这个方法里面写它所有要实现的操作功能 $(function () { Var获取到它layer var layer; //加载初始化这个文件里面...
  • 准备:经过一番百度等了解dom常用的事件,js的计时器基本使用, LayUI.layer的基本使用 /** * 全局监听用户操作,一段时间内无任何点击等操作将提示退出登录,清空缓存 * 监听页面的点击、输入等事件,并重置起始...
  • layer弹框内部自定义按钮关闭弹框(实现简单的登录条款) 你好! 这是你第人生的转折点,你已经将layer弹框收入囊下 这个链接是layer弹框开发使用文档 链接: https://layer.layui.com/ 或者你打开Layui开发使用文档...
  • 技术实现(二)初步搭建Django环境(三)页面布局&Django模板(四)SQL+Pandas初步处理数据(五)前端表单交互(六)Ajax异步传参与加载(七)前端数据格式的处理(八)DataTables接管前端表格(九)Pyecharts...
  • 实现注册功能

    千次阅读 2019-04-27 22:55:54
    实现注册功能 ... 那么这一个网站的注册是...开始我们可以·先构建好登录页面、注册页面和首页 页面的搭建可以运用bootstrap、layui等插件实现快速的搭建 最后把搭建好的页面写上相应的代码把这个页面该实现什么什...
  • Java实现的简单网盘

    千次阅读 2019-09-10 13:57:45
    独立动手写的一个小东西。记录一下 开发工具:IDEA 构建工具:Maven 后端框架springBoot+mybatis 前端使用 layui+Jquery 实现功能: 1.单文件的上传下载 ...1.登录页面 2.github账号登录 3.文件的上...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

layui实现登录页面