精华内容
下载资源
问答
  • layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

    5bfe818bb8747e3dceb7a8431fe924e1.png

    获得 layui

    1. 官网首页下载 https://www.layui.com/

    将下载完的包解压后放入项目中。

    7890683283d2dc0784e560907377fcb9.png

    注:1.Springboot环境搭建 2.Redis集成 3.shiro集成 均可访问之前的文章 此处不做详解

    编写一个测试的Controller

    @Controller (此处不能用RestController标签 @RestController注解相当于@ResponseBody + @Controller合在一起的作用。)

    public class UserController {

    @RequestMapping("/index")

    // @ResponseBody(此处不能加@ResponseBody标签,因为加上后就当做字符串返回页面了)

    public String index(){

    return "/user/index";

    }

    编写index.html

    默认情况下:

    spring-boot项目静态文件目录:/src/java/resources/static (比如:js、css、img等静态资源)

    spring-boot项目模板文件目录:/src/java/resources/templates

    e742711a9e339514ce9f4f1f84668230.png

    Springboot本身不支持Jsp 所以这边使用Thymeleaf Thymeleaf对页面验证比较严格 尤其是html元素的结束标签

    如果结束标签没有容易报错(加粗字体)

    />

    Insert title here

    />

    • 控制台
    • 商品管理
    • 用户
    • 其它系统

      邮件管理
      消息管理
      授权管理
    • a4e1371eb7f561dce328a5c5a4756351.png

      贤心

      基本资料
      安全设置
    • 退了
    • 所有商品

      列表一
      列表二
      列表三
      超链接
    • 解决方案

      列表一
      列表二
      超链接
    • 云市场
    • 发布商品
    内容主体区域

    当然,也可以在application.properties中,去掉

    #thymeleaf模板使用

    #关闭thymeleaf缓存

    spring.thymeleaf.cache=false

    #去掉thymeleaf的严格的模板校验

    spring.thymeleaf.mode=LEGACYHTML5

    启动服务,访问主页

    e03367347652fdc82c7d3f6cae5aa5c2.png

    由于集成了shiro框架,我们在未登陆的情况下是不能直接访问主页的 系统会自动跳转到登陆界面

    b3969e6acff40f9986775a2bfd699731.png

    输入账号密码后

    b10363722f3131b761d5cd5cd6a65cb8.png
    展开全文
  • layui 跳转页面时的传参和取值问题

    千次阅读 2021-03-31 09:25:44
    layui 跳转页面时的传参和取值问题前言一、跳转页面1.弹框按钮2.调用弹框方法二、取值1.取值的方法2.调用方法总结 前言 layui 如何在当前页面点击按钮弹框,弹出的框内容为新页面,将值传到该页面中,并进行取值,...


    前言

    layui 如何在当前页面点击按钮弹框,弹出的框内容为新页面,将值传到该页面中,并进行取值,是本篇文章主要记录的问题。


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、跳转页面

    点击弹框按钮,弹出新页面,用一下方法,layer.open即弹出一个窗口
    示例如下:

    1.弹框按钮

    <button class="layui-btn layui-btn-normal" id="eject"
    	type="button" lay-submit="" lay-filter="eject">弹框</button>
    

    2.调用弹框方法

    form.on('submit(eject)',function(){
    //我这里定义了一个参数id
       		var id="123456";
    		//跳转一个新的页面
    			layer.open({
    				type: 2,
    				area: ['85%', '80%'],
    				shadeClose: true,
    				shade: 0.8,
    				maxmin: true,
    				//这里进行页面的跳转,并在跳转时进行传参,传参方式用?拼接的方式
    				content: '${pageContext.request.contextPath}/jsp/demo/test.jsp?id='+id,
    				success: function(layero, index){
    
    				}
    			});
    		});
    	});
    

    二、取值

    1.取值的方法

    代码如下:

    /**
     * 获取query参数后面的属性
     * @param {String} name 需要获取的参数
     */
    
    var gtGetQueryString = function(name){
       var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
       var url = window.location.href
       var search = url.substring(url.lastIndexOf('?') + 1)
       var r = search.match(reg)
       if (r != null) return decodeURI(r[2])
       return null
       window.gtGetQueryString = gtGetQueryString;
    };
    

    取值时调用该方法即可。

    2.取值方法的第二种写法(与上述代码只是语法不同,效果一样都可用)

    可将其提成公共方法,将以下代码添加到js文件中,例如gt.js。这样需要取值时,只需要引入该js文件即可。

    /**
     * 获取query参数后面的属性
     * @param {String} name 需要获取的参数
     */
    (function() {
        const gtGetQueryString = (name) => {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
            const url = window.location.href
            const search = url.substring(url.lastIndexOf('?') + 1)
            const r = search.match(reg)
            if (r != null) return decodeURI(r[2])
            return null
        }
        window.gtGetQueryString = gtGetQueryString;
    }());
    

    3.调用方法

    代码如下:

    //调用方法进行取值
    var id=gtGetQueryString("id");
    //打印值
    console.log(id);
    

    输出结果:
    打印结果


    总结

    以上就是今天要讲的内容,其中调用取值方法时,方法中传入的名称要和参数名一致,这样才能取到对应的值。
    展开全文
  • 最近,接手了一个layui框架做的系统,现在需要实现接口登录超时,自动跳转到登录页的操作。          方案:后台判断是否超时,前端根据接口返回的code码,实现自动跳转至...

    前言:
            最近,接手了一个layui框架做的系统,现在需要实现接口登录超时,自动跳转到登录页的操作。
             方案:后台判断是否超时,前端根据接口返回的code码,实现自动跳转至登录页面。
             问题点:前端重定向经常使用的是----window.location,href,如果你恰好使用了这个的话,恭喜你,已经踩了一个小坑,因为用了之后你会发现他是在子窗口跳转到登录页,而不是整个系统跳转,如下图。(原因:大概和layui整体页面的布局有关系吧,页面右下部分的内容是镶嵌在iframe标签里面的,所以,跳转是在子窗口跳转,没有跳转至父级窗口)。
    在这里插入图片描述

            然后,在网上找到了很多解决方法,在此汇总一下。
    一、解决方法
            ①使用top.location.href:

    top.location.href = '/physical/login/login';
    

            ②使用window.parent.frames.location.href:

    <script language="javascript">
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('长时间未操作,系统自动判定为已下线!', {icon: 0,time: 3000}, function(){window.parent.frames.location.href="/Menber/login"});
            });
    </script>
    

            ③使用 window.parent.location.replace(“toLogin.do”):

    
    // 在公用文件common.js中,声明一下代码:
     
    var lastTime = new Date().getTime();
    var currentTime = new Date().getTime();
    var timeOut = 15 * 60 * 1000; //设置超时时间: 15分
     
    $(function(){
        /* 鼠标移动事件 */
        $(document).mouseover(function(){
            lastTime = new Date().getTime(); //更新操作时间
     
        });
    });
     
    function toLoginPage(){
        currentTime = new Date().getTime(); //更新当前时间
        if(currentTime - lastTime > timeOut){ //判断是否超时
        	window.close();//关闭当前页
            window.parent.location.replace("toLogin.do");//刷新父级页面;
        }
    }
     
    /* 定时器  
     * 间隔1秒检测是否长时间未操作页面  
     */
    window.setInterval(toLoginPage, 1000);
    

    参考博客:
    ①layui框架如何在停止服务用户操作任何步骤自动跳转登录页 https://www.cnblogs.com/shenwh/p/13692270.html
    ②登录超时(js_layui) https://www.cnblogs.com/xrxiaolong/articles/14469639.html
    ③前端 session过期后防止登录页面显示在layui的弹出框里 https://blog.csdn.net/benpaodelulu_guajian/article/details/87736290
    ④web页面长时间未操作后,自动退出到登录页面 https://blog.csdn.net/ysh598923879/article/details/88846774

    展开全文
  • springboot启动正常且页面跳转正确后,出现layui前端页面显示空白情况,其中标题title正常加载出现。如下图所示 解决方法 引入资源路径问题 经过发现是在index.html中引入static下的layui框架资源的路径有误,会...

    问题

    springboot启动正常且页面跳转正确后,出现layui前端页面显示空白情况,其中标题title正常加载出现。如下图所示

    空白页面

    解决方法

    引入资源路径问题
    经过发现是在index.html中引入static下的layui框架资源的路径有误,会出现cannot resolve directory提示

    <link rel="stylesheet" href="E:/lh/programs/springboot/demo1/src/main/resources/static/layui/css/layui.css">

    应该修改为

    <link rel="stylesheet" href="/static/layui/css/layui.css">

    页面正确显示

    补充知识点

    HTML的a标签href属性指定相对路径与绝对路径的用法讲解
    Layui开发使用文档

    展开全文
  • layui框架弹出窗口,点击确定跳转指定地址@TOC layui框架弹出窗口,点击确定跳转指定地址 function saveSbumit() { $.ajax({ type: 'post', url: '你的url地址', data: $("#form1").serialize(), ...
  • 目录标题1、layui官方公告2、为什么要使用layui框架layui框架的好处3、layui框架的使用3.1、导入Layui的资源3.2、项目中的资源引入,我们项目中的webapp文件下,直接将资源的layui文件复制进去即可3.3、技术文档的...
  • Layui框架引入

    2020-07-11 07:41:10
    使用步骤:在后台首页index.html下引入layui.js和layui.css 然后在html下写以下脚本 <script> layui.use("options",function(){}); </script> 第一个参数是一个数组,是使用哪些模块,例如,[‘form’,...
  • layui后台布局+实现页面的内部跳转(iframe)

    万次阅读 多人点赞 2019-08-25 20:18:57
    最近想使用layui框架作为毕业设计的前端页面,先在layui官网上下载源码包(步骤省略) 打开layui官网,用的是免费的一套后台布局: 把页面源码下载下来部署到自己项目上: 那么怎么实现页面的内部跳转呢?(黑色...
  • 今天小编就为大家分享一篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 项目我用的是layui框架页面切换用的是layui路由,碰到的问题: 1、切换到页面按回车会再次刷新页面 2、打开弹框里的表单,里面只有一个input 输入框的时候按回车会刷新页面 尝试解决: 1、去掉form标签或者在...
  • layui使用
  • 职责划分 在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器链来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面。 但是在前后端分离...
  • 主要介绍了TP5框架页面跳转样式操作,结合实例形式分析了TP5框架移动设备支持及页面跳转样式定义相关操作技巧,需要的朋友可以参考下
  • Layui子页面触发父页面方法跳转页面并添加tab列 子页面调动父页面方法 提示: parent.AddTab(链接,ID,标题); // 该方法名在页面的layui.config外面 父页面实现Layui添加tab方法 注意事项 //url 跳转链接 // ...
  • 实现layui左侧菜单右侧显示页面内容的静态文件,可查看对应的教程地址
  • 后台security代码 ...。。 .formLogin() .loginPage("/login") //登录的时候你要跳转到哪里 .failureUrl("/login?error") //失败页面 .permitAll() //登录任意访问 .and() //注销行为任意访问
  • LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 ​ layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,...即可完成页面的展示,极大减少了后端人员的开发成本
  • 一、新建index页面代码如下: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, ...
  • Layui数据表格跳转到指定页

    万次阅读 2018-01-11 13:06:09
    1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 ...$(".layui-laypage-skip").find("input").val(目标跳转页面页码 ); 3.触发跳转按钮的click事件 $(".layui-laypage-btn").click();
  • 系统依旧处于登录状态没有跳转到登录页面,导致后端公钥已经改变,但前端依旧用的是旧的后端公钥,所有导致加解密失败;解决:在访问index首页时也获取一下后端公钥,这样在开发的时候idea热部署后刷新页面就可以了...
  • Layui框架学习

    千次阅读 2020-09-11 15:18:24
    从官方解释简单来说就是在页面中有一些动态的效果,当然不是我们说的动态网页那个动态,这些动态效果呢,就是通过我们去加载element模块以后,默认为页面的这些元素添加的一些动态效果,比如layui文档顶部的导航下部...
  • 在我的客户页面,调整到 我的合同页面: <div>请去【<a style="color:green" class="toPage" data-type="toPage" >合同管理—我的合同<... top.layui.index.openTabsPage("order/myOrdersList.jsp
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:...
  • 在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面。 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius...
  • SSM框架下引用前端layui框架

    千次阅读 2019-11-04 08:51:17
    comi single blog ... 目录结构 在是 springmvc.xml 文件下开启过滤静态资源 ...页面引用 <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"> 最终效果
  • layui的iframe模板中,因为页面都是通过iframe方式引入的,所以在子(iframe)页面中使用location.href = "../user/login.html"后,跳转页面依然显示在内联框架中,而不是父页面跳转; //parent.location.href = 要...
  • layui框架整理

    2021-01-14 15:53:18
    layui使用form表单实现post请求页面跳转 https://blog.csdn.net/souloflove21g/article/details/80346690 如果想用form表单进行post请求跳转,只能用这个方式了。所需要的参数在input里面加好,然后在上面做赋值就...
  • 本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本。 还可点击...
  • //跳转到【工作管理】--人员管理页面 function navigateToTeamPersonModule() { window.parent.layui.element.tabAdd('layuiminiTab', { tabId: "/page/team-person", href: "/page/team-person", title
  • layui 页面传值

    千次阅读 2019-03-18 16:31:40
    var iframe = window['layui-layer-iframe' + index]; iframe.child(data) 传值方法 父类 setTimeout(function() { layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,185
精华内容 474
关键字:

layui框架跳转页面