精华内容
下载资源
问答
  • 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*/
    
    展开全文
  • layui实现登录

    千次阅读 2019-03-29 16:47:00
    其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发. 获得layui 你可以在LayUI官网首页下载到 layui 的最新版,它经过了自动化...

    一、layui简介

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发.

    获得layui

    你可以在LayUI  官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:

     

    1. ├─css //css目录
    2. │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
    3. │ │ ├─laydate
    4. │ │ ├─layer
    5. │ │ └─layim
    6. │ └─layui.css //核心样式文件
    7. ├─font //字体图标目录
    8. ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
    9. │─lay //模块核心目录
    10. │ └─modules //各模块组件
    11. │─layui.js //基础核心库
    12. └─layui.all.js //包含layui.js和所有模块的合并文件

    二、实现登录

    2.1.环境

    本文是在eclipse下springboot1.5.15+mybatis+springMVC+LayUI2.4.5实现登录

    2.2. 起步依赖

    2.2.1. 创建一个Maven工程

    由于这里主讲layui,springboot如何集成mybatis,springMVC

    2.2.2 获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

     

    1. layui/css/layui.css
    2. layui/layui.js ,此处可换成:./layui/layui.all.js

    项目结构如下:

    引入代码可以这样写:

    <link rel="stylesheet" href="${path}/js/layui/css/layui.css">
    <script src="${path}/js/layui/layui.js"></script>
    

    2.3、前台页面login.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!-- 自适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Insert title here</title>
    <!--导入这两个文件根据自己的路径进行修改-->
    <link rel="stylesheet" href="${path}/js/layui/css/layui.css">
    <script src="${path}/js/layui/layui.js"></script>
    </head> <body> <form class="layui-form" action="login" ><!--提交给这个controller--> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" 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="pass" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> </div> </div> </form> <script type="text/javascript"> //layui.user(加载使用的模块),我们这里只使用了form,还可以加载table,jquery等等 layui.use('form',function(){ var form=layui.form; //监听form的提交 监听lay-filter form.on(submit('formDemo'),function(data){ console.log(); //alert(data.field); }) }) </script> </body> </html>

      这里的form表单拷贝layui的官网form,根据自己需求修改.

    2.4 新建Controller类LoginController

    package com.jiyun.springboot.controller;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.jiyun.springboot.bean.User;
    import com.jiyun.springboot.service.UserService;
    
    @RestController
    public class LoginController {
    	@Autowired
    	private UserService userService;
    	@RequestMapping("login")
    	public ModelAndView login(User user){
    		System.out.println("user=="+user);
    		ModelAndView model = new ModelAndView();
    		
    		User re=userService.selectByNamePass(user);
    		System.out.println("re======="+re);
    		if(re!=null){
    			//登录成功,返回success.jsp
    			model.addObject("username", user.getUsername());
    			model.setViewName("success");
    		}else{
    			//失败,返回登录页面
    		}
    		return model;
    		
    		
    		
    	}
    
    }
    

     创建UserService,UserDao,UserMapper.xml,查询数据库,会返回User对象.

    2.6新建success.jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>主页面</title>
      <link rel="stylesheet" href="${path}/js/layui/css/layui.css">
      
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">公司介绍</a></li>
          <li class="layui-nav-item"><a href="">热力资源部</a></li>
          <li class="layui-nav-item"><a href="">请假申请</a></li>
          
          <li class="layui-nav-item">
            <a href="javascript:;">其它系统</a>
            <dl class="layui-nav-child">
              <dd><a href="">邮件管理</a></dd>
              <dd><a href="">消息管理</a></dd>
              <dd><a href="">授权管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
             
    			${username}
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>
      
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">员工管理</a>
              <dl class="layui-nav-child">
                <dd><a class="site-demo-active"   data-id="员工信息" data-title="员工信息" data-url="/getAllEmp" data-type="tabAdd">员工信息</a></dd>
                <dd><a class="site-demo-active" data-id="新增员工" href="javascript:;">新增员工</a></dd>
                <dd><a class="site-demo-active" data-id="删除清零" href="javascript:;">删除清零</a></dd>
                <!-- <dd><a href="">超链接</a></dd> -->
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">部门管理</a>
              <dl class="layui-nav-child">
                <dd><a class="site-demo-active" data-id="部门信息" href="javascript:;">部门信息</a></dd>
                <dd><a class="site-demo-active" data-id="新增部门" href="javascript:;">新增部门</a></dd>
                <dd><a class="site-demo-active" data-id="部门清零" href="javascript:;">部门清零</a></dd>
              </dl>
            </li>
           
          </ul>
        </div>
      </div>
      
      <!-- 选项卡面板 -->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true"
    			style="margin-left: 200px;">
    			<ul class="layui-tab-title">
    				
    			</ul>
    			<div class="layui-tab-content"></div>
    </div>
    
    
    
      
     <!--  <div class="layui-footer">
        底部固定区域
        © layui.com - 底部固定区域
      </div> -->
    </div>
    <script src="${path}/js/layui/layui.js"></script>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
      var $ = layui.jquery;
      var active = {
              //在这里给active绑定几项事件,后面可通过active调用这些事件
    		tabAdd: function(url,id,name) {
    			
    			alert(url+id+name);
    			
                  //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                  //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
    			element.tabAdd('demo', {
                      title: name,
                      content: '<iframe data-frameid="'+id+'" scrolling="no" frameborder="0" src="'+url+'" style="width:100%;"></iframe>',
                      id: id //规定好的id
    			})
                  element.render('tab');
    
              },
              tabChange: function(id) {
                  //切换到指定Tab项
    			element.tabChange('demo', id); //根据传入的id传入到指定的tab项
    		  },
              tabDelete: function (id) {
                  element.tabDelete("demo", id);//删除
              },
              tabDeleteAll: function (ids) {//删除所有
    			$.each(ids, function (i,item) {
                      element.tabDelete("demo", item); //ids是一个数组,里面存放了多个id,调用tabDelete方法分别删除
    			})
              }
          };
    
    
          //当点击有site-demo-active属性的标签时,即左侧菜单栏中内容 ,触发点击事件
    $('.site-demo-active').on('click', function() {
    			alert("hello");
              var dataid = $(this);
    			//alert(dataid);
    			
    			//alert($(".layui-tab-title li[lay-id]").length)
              //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
    	if ($(".layui-tab-title li[lay-id]").length <= 0) {
                  //如果比零小,则直接打开新的tab项
    		active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
         } else {
                  //否则判断该tab项是否以及存在
    
    		var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
    		$.each($(".layui-tab-title li[lay-id]"), function () {
                      //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
    			if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                          isData = true;
                 }
             })
             if (isData == false) {
                      //标志为false 新增一个tab项
    			active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
              }
         }
              //最后不管是否新增tab,最后都转到要打开的选项页面上
    	active.tabChange(dataid.attr("data-id"));
     });
    
      
      
    });
    </script>
    </body>
    </html>
    

      这个页面使用的是layUI提供的后台布局。

    大家有问题可以留言。

     

    转载于:https://www.cnblogs.com/Altwoman/p/10622331.html

    展开全文
  • # 都很简单 不再解释了 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. 总结

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

    展开全文
  • layui如何实现登录功能发布时间:2020-06-17 09:10:11来源:亿速云阅读:548作者:Leahlayui如何实现登录功能?相信很多新手小白还没学会这个技能,通过这篇文章的总结,希望你能学会学会这个技能。以下资料是实现的...

    layui如何实现登录功能

    发布时间:2020-06-17 09:10:11

    来源:亿速云

    阅读:548

    作者:Leah

    layui如何实现登录功能?相信很多新手小白还没学会这个技能,通过这篇文章的总结,希望你能学会学会这个技能。以下资料是实现的步骤。一、layui框架的文件结构如下:

    f694066ad5cf86575c223cb291cd11cb.png

    内置方法config的使用

    可以在使用模块之前,全局化配置一些参数,如下:layui.config(

    {

    dir : '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视

    ,

    version : false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610

    ,

    debug : false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面

    ,

    base : '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展

    }

    );

    //这里我主要来理解下base参数,当我自定义了一个模块,如user.js,放在/static/js/目录下,即不是layui里有的,那么我可以通过如下方法使用自定义模块里的方法:

    layui.config(

    {

    base : "/static/js/"

    }

    ).use(['user'], function ()

    {

    var user = layui.user;

    user.findUsrByUserName(username);

    }

    );

    ]

    登录页面的实现

    (1)登陆,我主要用了layui的轮播和提交功能,语言太惨白i,直接贴代码:

    登录

    ![输入图片说明](https://static.oschina.net/uploads/img/201709/03092118_VUPK.png "在这里输入图片标题")< script type = "text/javascript" >

    //

    layui.use(['form', 'layer', 'jquery', 'carousel'], function ()

    {

    var $ = layui.jquery,

    form = layui.form,

    carousel = layui.carousel;

    /**背景图片轮播*/

    carousel.render(

    {

    elem : '#login_carousel',

    width : '100%',

    height : '100%',

    interval : 2000,

    arrow : 'none',

    anim : 'fade',

    indicator : 'none'

    }

    );

    /**监听登陆提交*/

    form.on('submit(login)', function (data)

    {

    //弹出loading

    var loginLoading = top.layer.msg('登陆中,请稍候',

    {

    icon : 16,

    time : false,

    shade : 0.8

    }

    );

    //记录ajax请求返回值

    var ajaxReturnData;

    //登陆验证

    $.ajax(

    {

    url : '/login/login',

    type : 'post',

    async : false,

    data : data.field,

    success : function (data)

    {

    ajaxReturnData = data;

    }

    }

    );

    //登陆成功

    if (ajaxReturnData.rendercode == 0)

    {

    window.location.href = "/";

    top.layer.close(loginLoading);

    return false;

    }

    else

    {

    top.layer.close(loginLoading);

    top.layer.msg(ajaxReturnData.errmsg,

    {

    icon : 5

    }

    );

    return false;

    }

    }

    );

    }

    );

    //]]>

    < / script >

    上文描述的就是layui实现登录功能,具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容,欢迎关注亿速云行业资讯频道!

    展开全文
  • 项目一项目二项目三更多项目方案项目四项目五项目六咨询我们登录注销其他选项个人中心收藏历史记录查看编辑删除演示说明日期分页上传滑块在这里,你将以最直观的形式体验 layui!在编辑器中可以执行 layui 相关的...
  • var $ = layui.jquery, upload = layui.upload; var loadingIndex; upload.render({ elem: '#uploadImg' , url: '?m=News&a=newsDeal&act=upImg&fromImg=0' , multiple: true , accept: 'file'.
  • body class="layui-bg-gray"> <div class="layui-fluid"> <ul class="layui-nav layui-bg-green"> <li class="layui-nav-item layui-this"><a href="">项目一</a></li> ...
  • 基于 layui 实现的单页面控台, 类似于 layuiAdmin 后台管理模板. 功能待后续完善, 主要是看单页面实现原理
  • layui实现增加页面

    千次阅读 2019-06-09 22:00:00
    1、在后台首页面增加一个教室信息列表,代码如下: 结果如下: 2、在教室信息列表中实现增加增加和修改等功能: ...3、实现界面如下: 4、遇到一个问题:Classes没有被定义,如下所示: 目前没有得到解决。 ...
  • layui登录界面

    万次阅读 2018-10-12 21:13:12
    刚学了layui,写了个简单的登录界面,由于自己的菜导致出现了一些问题,现在总结下过程中碰到的问题: 1.样式导错了样式 2.输入框太长导致不好看 3.form表单的位置不对,没有在中间的位置 解决的方法: 问题1:...
  • Layui登录界面

    2019-04-15 10:02:30
    Layui登录界面+主页面登录界面粒子特效;ajax传值到后台验证用户名密码;设备管理主页面
  • 用途:把父页面的数据表格中的指定行数据传递到子页面,在子页面中把数据传递到父页面。内有项目一个,说明文本一个。
  • Layui实现input输入和选择的方法:HTML代码:移交单位*111222333444555其中input的几个style样式简单说一下。position:absolute 在这里是让input和select在同一位置。z-index:2 是为了让input在select上面。width:80...
  • layui实现简单的登录注册

    千次阅读 2018-12-01 20:59:10
    layui官网下载layui基本样式 layui官网:www.layui.com 然后用&lt;link&gt;&lt;/link&gt;标签引入相应的*.css,如果不了解的layui的一些标签属性的话,建议去layui的官网学习一下 因为下面用到...
  • 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现。 如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考。 使用心得...
  • 如下图,点击编辑按钮,弹出修改信息的框,将信息修改后,点击确定按钮,实现后台数据库和前台页面同时修改成我们在框内重新写的值: 修改功能的前后台代码如下 : 前台页面:Index.html {% extends 'common....
  • 主要为大家详细介绍了layUI实现列表查询功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现。 如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考。 使用心得:...
  • 效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...link rel="stylesheet" href="css/layui.css" media="all"> --> <link rel="stylesheet" href="/
  • 本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下 官网layui table演示页面 示例截图: 页面引入layui.css、 layui.js <table class=layui-table id=layui_table_id lay-filter=test> ...
  • 描述:在商城首页点击“退出登录”,浏览器发送请求到后台,controller方法进行处理退出功能,然后重定向页面回到商城首页 二. 解决方案 ==最最最关键的是使用return "redirect:/xxx.html"; @RequestMapping(value...
  • Layui实现轮播

    2021-07-17 14:32:49
    layui它可以给我们实现的东西有很多,它也可以为我们少写很多的代码; 这次我要给大家分享的是用layui实现轮播; 首先打开VS创建新项目进去后再创建控制器然后添加视图成功后那个页面跟DW的基本一样; ...
  • 基于Layui实现的树形菜单页面具体方法实现方法一:针对Layui模板的前后端统一更新1. 删除2. 添加3. 后端方法二:基于Dtree实现的纯前端树形增删改文中的组件地址 具体方法实现 实现树形菜单,本文将给出两种实现方式...
  • layui实现树菜单

    2020-04-15 20:33:19
    layui实现树菜单 页面HTML <div class="layui-fluid"> <div class="layui-card"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <lege...
  • Layui实现无限极菜单

    千次阅读 2019-06-04 14:47:27
    使用Layui实现无限层级菜单。 第一步 修改fsMenu.js文件 /** * @Description: 菜单配置 * @Copyright: 2017 wueasy.com Inc. All rights reserved. * @author: fallsea * @version 1.8.4 * @License:MIT */ ...
  • layui实现分页

    千次阅读 2017-11-07 12:57:28
    分页在页面上的显示<div id="demo2"></div>后台需要传过来两个参数,一个是count,数据总数;一个是page,当前页 var nums = 10; var count = $('#count').val(); layui.use('laypage',function () { var laypage =...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,567
精华内容 3,826
关键字:

layui实现登录页面