如何快速使用LayUI MINI框架
是什么
LayUI MINI是基于LayUI框架开发的一套最简洁、易用的后台框架模板,它已经是一个非常完整的脚手架,有现成的页面模板可以参考甚至是直接使用。
通常来说,如果我们准备开发一套管理系统的WEB界面,一定是需要基于某个前端技术或框架来做的。实际上,可供选择的组件也比较多,比如最原始的HTML+CSS+JavaScript三件套,或者直接使用某个Bootstrap框架,如:AdminLTE,又或者是某个MVC框架,如:AngularJS,Vue 。
选择不同的框架是需要根据实际的需求而定的,不同框架实现技术不同,使用难易程度不同,适用的场景也不同。有的框架直接是一个脚手架项目,可以直接基于它就能快速地开发出业务系统的WEB界面,有的框架仅仅提供的了满足各种需求的组件,还需要开发者自己基于此搭建起不同风格的整体界面。
LayUI MINI比LayUI更易于使用的地方在于:它已经是一个现成且完整的后台管理系统框架模板,直接拿来使用即可;而LayUI本身只是提供了一些封装好的组件模块,完整的界面框架还是需要使用者根据具体需求来实现。不论如何,在涉及到具体的UI组件使用上,还是LayUI框架提供的。
由于一些未知的原因,LayUI框架的官网已经不在继续维护了,作者将LayUI完全托管于Gitee,镜像在线文档地址。
LayUI MINI的官网是正常运行的,详见:http://layuimini.99php.cn/ 。
如何做
使用Lay MINI框架模板可以有2种方式:
方式一:作为独立的前端项目运行,数据通过REST接口从后端获取,需要API接口解决跨域访问问题。
方式二:如果后台管理系统是Java Web项目,可以将LayUI MINI作为静态页面部分;当然,如果是基于其他语言的Web项目,也是类似的。
上述两种使用方式都各有利弊,根据使用情况选择即可。
方式一:管理系统界面作为独立的前端项目运行
这种方式其实就是完全的前后端分离的开发模式,管理后台的数据部分由API提供,而前端界面部分独立布署,例如可以直接布署在Nginx中。
在这种模式下,由于前端和数据API部分是不能运行在相同的域名和端口的,所以前端在访问数据时会遇到跨域限制的问题,该问题需要API来解决,具体实现参考解决浏览器跨域限制方案之CORS 。这种方式的好处在于,数据与界面完全分离,互不影响。当然,与之相对应的是增加了布署工作量和复杂度。
该方式下使用LayUI MINI框架的方式非常简单,直接下载LayUI MINI的压缩包,如:layuimini-2.0.4.3-iframe.tar.gz,然后解压到指定目录,根据需要重新命名下目录名称,然后就可以开始在该框架模板的基础上开发了,根据需要创建新的页面即可。
前端开发可以使用静态服务器进行调试,参考:前端开发利器之静态服务器 。
方式二:作为Java Web项目的静态页面部分
此时基于LayUI MINI框架模板开发的静态页面部分,本质上使用了Servlet容器(如:Tomcat,Jetty)作为HTTP服务器。
以使用Spring Boot作为Java Web项目的开发框架为例:将LayUI MINI压缩包中解压出来的所有静态文件直接拷贝到项目目录src/main/resources/static下,启动Java Web项目,访问:http://host:post/index.html就可以访问到页面了。

这种方式最终是将静态页面跟数据代码一起打包为一个完整的可运行jar包运行,非常方便,这通常也是广大后端开发人员在基于LayUI MINI开发后台管理系统时常用的方式。
该方式是一种非常传统的Java Web项目开发模式,可使用一些模板引擎技术进行数据渲染,如:freemarker。
如果希望修改前端界面之后无需重启程序就能生效,可以通过参数spring.web.resources.static-locations指定静态资源目录即可。

总结
LayUI MINI框架完全做到了拿来即用的目标,非常简单,但是很强大,甚至比AdminLTE还更加简洁和方便。
LayUI MINI框架的基础LayUI框架,所以其中涉及的各种组件的用法直接参考LayUI框架文档即可。
【参考】
layui学习笔记
如何快速使用LayUI MINI框架的更多相关文章
- 快速入门系列--WebAPI--03框架你值得拥有
接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5.单页应用程序SPA等技术和理念很好的结合在一起.所谓ASP.NET WebAPI ...
- FoxOne---一个快速高效的BS框架--WEB控件属性编辑器
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- FoxOne---一个快速高效的BS框架--(4)
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- FoxOne---一个快速高效的BS框架--(2)
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- FoxOne---一个快速高效的BS框架
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- FoxOne---一个快速高效的BS框架--数据访问(Dao)
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- FoxOne---一个快速高效的BS框架--生成增删改查
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...
- 利用layui前端框架实现对不同文件夹的多文件上传
利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...
- layui前端框架
项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动) html代码 要给这个标签绑定click方法 <a href='javascript:;' data-me ...
- 基于TILE-GX实现快速数据包处理框架-netlib实现分析【转】
最近在研究suricata源码,在匹配模式的时候,有tilegx mpipe mode,转载下文,了解一下. 原文地址:http://blog.csdn.net/lhl_blog/article/de ...
随机推荐
- [转帖]深入理解mysql-第五章 InnoDB记录存储结构-页结构
前言: 页是InnoDB管理存储空间的基本单位,上一章我们主要分析了页中的主要的构成行的存储结构-行格式,其中简单提了一下页的概念.这章我们详细讲解一下页的存储结构. 一.数据页结构 前边我们简单提了 ...
- [转帖]使用s3(minio)为kubernetes提供pv存储
http://www.lishuai.fun/2021/12/31/k8s-pv-s3/#/%E8%A6%81%E6%B1%82 我们可以通过csi使用s3为kubernetes提供pv存储,当我们申 ...
- [转帖]《Linux性能优化实战》笔记(十五)—— 磁盘IO的工作原理
前一篇介绍了文件系统的工作原理,这一篇来看看磁盘IO的工作原理 一. 磁盘 1. 按存储介质分类 磁盘是可以持久化存储的设备,根据存储介质的不同,常见磁盘可以分为两类:机械磁盘和固态磁盘. 机械磁盘, ...
- [转帖] 传参base64时的+号变空格问题
https://www.cnblogs.com/codelogs/p/17255425.html 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 问题发生# 上 ...
- 周末拾遗 xsos 的学习与使用
周末拾遗 xsos 的学习与使用 摘要 周末陪儿子上跆拳道课. 自己一个人傻乎乎的开着笔记本想着学习点东西. 上午看到了一个sosreport的工具. 本来想学习一下. 发现xsos 应该是更好的一个 ...
- [转帖]Docker限制容器的资源
docker在默认运行容器的情况下,是不会对运行的容器进行资源限制的,在自己的实验环境的话是随便你怎么弄的,不过在生产中是一定会对docker运行的容器进行资源限制的,如果不限制的话在生产中会带来 ...
- Bitmap、RoaringBitmap原理分析
作者:京东科技 曹留界 在人群本地化实践中我们介绍了人群ID中所有的pin的偏移量可以通过Bitmap存储,而Bitmap所占用的空间大小只与偏移量的最大值有关系.假如现在要向Bitmap内存入两个p ...
- 【网络流,dp】Gym102220A Apple Business
Problem Link 有一棵 \(n\) 个点的完全二叉树(点 \(i\) 的父亲是 \(\lfloor i/2\rfloor\)),第 \(i\) 个点有 \(a_i\) 个苹果.现在有 \(m ...
- 范德蒙德矩阵行列式 & 循环矩阵行列式的证明
范德蒙德矩阵的行列式 \[\begin{vmatrix} 1 & 1 & 1 & \dots & 1 \\ x_1 & x_2 & x_3 & ...
- React中受控组件与非受控组件的使用
受控组件 受控组件的步骤: 1.在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源) 2.给表单元素绑定change事件,将表单元素的值设置为state的值(这样就可以控制表 ...