layui的一个简洁后台

最新推荐文章于 2024-10-30 22:37:01 发布
原创 最新推荐文章于 2024-10-30 22:37:01 发布 · 220 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这是一个使用layui框架构建的简单后台界面示例，包含头部导航、侧边栏和表格数据展示。页面中展示了layui的面包屑导航、输入框、按钮以及表格元素，同时也涉及到layui的CSS和JS文件的引入。

这是index.html

<!DOCTYPE html>

<html class="no-js">

 

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<script src="js/layui/layui.js"></script>

</head>

 

<body>

<header class="layui-bg-black" style="display: flex;justify-content:space-between; align-items: center; padding: 0 20px;">

<h5>LOGO</h5>

<ul class="layui-nav" lay-filter="">

<li class="layui-nav-item"><a href="">最新活动</a></li>

<li class="layui-nav-item layui-this"><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>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</header>

<div style="height:calc(100vh - 60px); display:flex;">

<nav class="layui-bg-black" style="width:200px;">

<ul class="layui-nav layui-nav-tree" lay-filter="test">

<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->

<li class="layui-nav-item layui-this">

<a href="javascript:;">默认展开</a>

<dl class="layui-nav-child">

<dd><a href="javascript:;">选项1</a></dd>

<dd><a href="javascript:;">选项2</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 href="">移动模块</a></dd>

<dd><a href="">后台模版</a></dd>

<dd><a href="">电商平台</a></dd>

</dl>

</li>

<li class="layui-nav-item"><a href="javascript:;">产品</a></li>

<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>

</ul>

</nav>

<article style="flex: 1;padding:20px;">

<div>

<span class="layui-breadcrumb">

<a href="">首页</a>

<a href="">国际新闻</a>

<a href="">亚太地区</a>

<a><cite>正文</cite></a>

</span>

</div>

<div style="display: flex; justify-content: space-between;">

<div style="height: 30px;padding:15px;">

<label>姓名</label>

<input type="text" class="layui input" placeholder="姓名查询">

</div>

<div style="height: 30px;padding:15px;">

<label>学号</label>

<input type="text" class="layui input" placeholder="学号查询">

</div>

<div style="height: 30px;padding:15px;">

<label>班级</label>

<input type="text" class="layui input" placeholder="班级查询">

</div>

<div>

<button type="button" class="layui-btn" style="padding:-10px;"></i>添加用户</button>

</div>

</div>

<table class="layui-table">

<thead>

<tr>

<th>学号</th>

<th>姓名</th>

<th>性别</th>

<th>班级</th>

<th>身份证号</th>

<th>院系</th>

<th>宿舍号</th>

<th>个人手机号</th>

<th>家庭手机号</th>

<th>家庭住址</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>111</td>

<td>

<button type="button" class="layui-btn layui-btn-sm">

<i class="layui-icon layui-icon-search"></i>

</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">

<i class="layui-icon layui-icon-edit"></i>

</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">

<i class="layui-icon layui-icon-delete"></i>

</button>

</td>

</tr>

</tbody>

</table>

</article>

</div>

 

</body>

 

<script>

layui.use(['element', 'jquery'], function() {

var element = layui.element;

var $ = layui.jquery

$.get("k261498c83.zicp.vip:33058/newcomersSystem/student/show?card_id=412326199909233316", Request => {

console.log(Request);

})

});

</script>

 

</html>

这是目录，下载layui直接放文件夹里就行，用的时候直接引入就可以了

hnzyycsdn
关注
TP5+layui 后台自动化开发框架
11-25
基于TP5+layui 手工添加控制器，通过model方法指定模型。 手工添加模型。模型内方法： search --列表搜索栏自动生成参数 coll --模型自动生成参数,未指定直接以表注释或表字段生成。 batch --列表页顶部操作按钮 op --列表页单项操作按钮 数据类型： string --文字类型 date --日期类型 datetime --日期时间类型 time --时间戳类型 image --图片类型 images --多图片类型 table --关联表类型 text --文本域类型 richtext --富文本类型 其他的我忘了，自己看，自己加
基于ThinkPHP5.0与H+、Layui的通用型后台管理系统设计源码
09-25
它不仅能够帮助开发者快速搭建出一个基本的后台管理框架，还可以通过ThinkPHP5.0强大的扩展性和Layui丰富的组件来实现系统功能的扩展和定制。系统的灵活性和可扩展性使其能够适用于多种后台应用场景，如内容管理系统...
基于layui的简易后台管理系统，后期会更新
heerey525
06-25 4129
直接上代码，效果图在最下面 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scala
Layui-极简模块化前端UI组件库----快速上手
Emporor的博客
10-23 504
Layui 是一套前端 UI 组件库，其设计风格极简化且模块化。遵循原生的 HTML/CSS/JS 开发方式，使得开发者可以更容易地上手使用。此外，Layui 提供了丰富的内置模块，例如：表格、表单、按钮等等。用户可以通过访问官方网站下载到最新版的 Layui，该版本已经过自动化构建，更加适合用于生产环境。总的来说，Layui 是一个开源且易于使用的 Web UI 解决方案，适用于各种前端开发需求。
tp5+layui后台.zip
06-03
基于TP5.1和layui开发的管理后台，内含模板页面和功能页面，有权限管理和后台导航添加的功能，具体功能需要自行开发。
基于最新layui的tp5的后台
05-01
基于最新layui和thinkphp5做的后台，功能强大，界面好看，适合用于开发，拿来就可以直接写功能模块了
(源码)基于layui框架的简洁后台管理模板.zip
03-09
# 基于layui框架的简洁后台管理模板 ## 项目简介 本项目是基于layui框架开发的简洁后台管理模板，提供了简洁、清爽且易用的后台框架，适合快速搭建后台管理系统。项目会不定时更新。 ## 项目的主要特性和功能 1. ...
基于 layui 编写的最简洁、易用的后台框架模板
02-21
本框架模板充分利用 layui 的特性，旨在为开发者提供一个简洁、易用的后台界面设计方案，使得后台管理系统的开发工作变得更加高效和便捷。 首先，我们来深入了解一下 layui 框架。layui 是一款模块化的前端框架，它...
基于layui的通用型后台管理模板系统
02-21
本项目是基于layui构建的通用型后台管理模板系统，旨在为开发者提供一个快速开发后台管理界面的基础，减少重复劳动，提升开发效率。 1. layui框架详解： layui的核心设计理念是“轻量、模块化”，它提供了丰富的...
管理系统系列--基于 Laravel, Layui 构建的 RBAC 后台管理系统。.zip
02-25
【标题】中的“管理系统系列--基于 Laravel, Layui 构建的 RBAC 后台管理系统”揭示了这个项目的核心：它是一个使用 Laravel 框架和 Layui 前端库开发的角色权限控制（RBAC）后台系统。Laravel 是一个广泛使用的 ...
tp5+layui后台基础框架.zip
05-27
最新版本下载地址https://github.com/taoyonbin/php-layui-admin 基本的后台管理框架系统，可以在该基础上进行二次开发，也可以自行改装，内置权限管理/菜单管理/角色管理/管理员管理/系统信息/管理员信息修改/图片上传。 需要注意点：1端口设置，xampp版本没有测过，之前出现版本问题也会导致运行不了 2.数据库的名字和配置文件的名字 3.图片的端口地址
完整的Thinkphp5+LayUI开源后台管理系统源码.rar
08-05
完整的Thinkphp5+LayUI开源后台管理系统源码包含数据库表结构和信息,极大的节省了开发时间。采用的是thinphp5.0版本,安装后记得开启伪静态处理。
始于2021年4月29日 tp5+layui编写后台踩坑日记
php的绯闻女友
04-29 404
1.在layui的表格中将时间戳转换为时间： 2.tp5获取三天以后的时间戳： 3.tp5使某一列的值自增1 4.ajax传值时源代码总是不对劲 查看源代码时： 发现源代码变成这样子，其实只要去掉else后面的注释内容就可以了。 ...
layui菜鸟教程--乐字节前端
dirft_din的博客
06-16 2万+
主要内容 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。 ​ 官网：https://ww.
Layui上传系列之三（插件封装，简化开发）
龙井茶的Sky
10-08 1642
虽然实现了多文件分块上传，但是每个页面用到上传都要写那么多代码，还是不爽啊，而且还要绑定文件列表，那就再封装一下吧，开发用起来也就简单了，把layui的uploader都给他屏蔽掉。 有了前面的基础，那就继续走一波了。 //上传控件 function uploader() { this.option = null; } //上传控件初始化 uploader.init = function (option) { //定义上传控件对象，初始化后返回对象 var uploaderO
layui实现后台管理系统界面
爱吃五花肉EMin的博客
10-30 2574
layui框架版本：2.5.8。
调用layui.use中function的正确姿势
热门推荐
Jonny的博客
11-22 3万+
适用于 obj.click() 行内onclick 代码如下 &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="layui/css/layui.css" media="all"&gt; &lt;/head&gt; &lt;body&gt; &lt;a class=&q
layui左侧导航栏切换实现局部刷新（针对iframe）
清音的博客
03-27 2万+
在选项卡的界面添加layui.use里加入： element.on('tab(demo)', function(data){ var src=$(".layui-tab-item.layui-show").find("iframe").attr("src"); $(".layui-tab-item.layui-show").find("iframe").attr(...
Lua非空判断方法[源码]
最新发布
11-24
本文详细介绍了在Lua中进行非空判断的几种方法，特别是针对table类型的变量。首先，文章指出了直接对nil值进行索引会导致异常的问题，并给出了一个简单的例子来说明如何避免这种情况。接着，文章讨论了如何判断一个table是否为空，指出不能简单地使用`#table == 0`的方式，而是应该使用`next(t) == nil`的方法。此外，文章还提到了`next`指令在LuaJIT中的优化问题，建议在非必要情况下少用。最后，文章简要介绍了如何判断一个字符串是否全部由空格组成，使用了正则匹配的方法。这些内容对于Lua开发者来说非常实用，能够帮助他们避免常见的错误。
Layui清爽简洁后台管理模板发布
综上所述，本压缩包中的"Layui后台管理模板-iframe版"是一个HTML格式的源码资源，提供了一套清爽简洁的后台管理界面模板。它利用了Layui框架的模块化设计，支持多种现代浏览器，同时，通过iframe标签实现离线使用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值