layui后台框架的搭建详解

layui后台框架的搭建详解

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

layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

一、从官网下载layui(可保存至任意盘符)

下载完成后,可以看到如下架构

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

登录后复制

二、从Git仓库下载layui 的完整开发包,以便于进行二次开发

下载地址:https://github.com/sentsin/layui/

三、 npm 安装(前提是要先安装node.js—–此操作见下节node.js的安装)

1.jpg

一般用于 WebPack 管理

四、完成以上操作后,新建一个项目(这里以MVC为案例)

然后将下载好的layui(完整移动,不要更改文件名以及其他信息)移至项目

2.jpg3.jpg

五、现在已经部署好了layui,可以新建页面查看效果

在MVC中新建布局页(框架中有一部分内容是一样的,所以可以重复使用,故新建布局页,在其他项目中也可以新建母版页,用户控件等等)

地址:http://www.layui.com/demo/admin.html  将后台布局写好

4.jpg

选择获取布局代码,将代码贴至布局页中。

新建布局页和视图页,在布局页中内容主体区域要加@RenderBody()方法,其他项目不如此,如下

5.jpg添加视图–

6.JPG运行视图,可得到如下效果

7.jpg在布局页中给列表一加上跳转链接–

8.jpg

新建FormTable视图(注意要添加布局页),加入其他元素,此处添加的表单元素,地址:http://www.layui.com/demo/form.html,选择查看代码将所要的代码贴至页面–

运行index.cshtml页面后,点击列表一,出现如下效果:

9.jpg

更多layui知识请关注layui使用教程栏目。

以上就是layui后台框架的搭建详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005883.html

(0)
上一篇 2025年3月13日 01:04:27
下一篇 2025年2月27日 07:07:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui框架常用输入框介绍

    一、普通输入框 input     *字段编号                         登录后复制 二、自动完成式输入框 1、确保 layui 引入了 autoComplete 插件。 2、确保初始化代码运行于 layui.use …

    2025年3月13日
    200
  • layui框架分页设置详解

    具体步骤如下: 1、从 官方文档 – 内置模块 – 数据表格 中复制如下: 2、复制到页面、将CSS地址以及JS地址改为自己本地的地址 3、浏览器运行、会出现如下 4、发现提示数据接口请求异常:error。 解决: …

    2025年3月13日 编程技术
    200
  • layui-layer独立组件-弹出层介绍

    【注意事项】 一、使用时,请把文件夹layer整个放置在您站点的任何一个目录,只需引入layer.js即可,除jQuery外,其它文件无需再引入。 二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过la…

    2025年3月13日
    200
  • layui数据表格隐藏列的方法介绍

    在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。  table.render({    elem: ‘#test’    ,url:’${pageContext.re…

    2025年3月13日 编程技术
    200
  • layui时间控件清空之后无法正常使用的问题

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。 共有两种解决方式: 方式一(layui 1.x): html代码: 登录后复制登录后复制 js代码: var start = {istime: true,format:…

    2025年3月13日
    200
  • layui框架form表单使用介绍

    虽然对layui比较熟悉了,但是今天有时间还是将layui的form表单模块重新看一下。 一、更新渲染  layui没有双向绑定机制,但是有经典模块化框架 只需要执行下面的方法即可: form.render(type,filter) 第一个…

    2025年3月13日
    200
  • layui的本地存储方法介绍

    本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。 localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。 s…

    2025年3月13日
    200
  • Django+Layui后台布局介绍

    Layui后台布局: 一、后台布局之顶边栏         layui 后台布局                            控制台            商品管理            用户                   …

    2025年3月13日
    200
  • layui使用iconfont的方法介绍

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。 第一步,通过浏览器打开http://iconfont.cn/ ,访问阿里巴巴矢量图标库。 第二步,通过右上角的用户图标,授权登…

    2025年3月13日
    200
  • layui文件上传、预览及修改方法

    单文件上传 1、HTML 上传客服二维码* @@##@@ 开始上传 温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB 登录后复制 2、js部分 layui.use([‘form’, ‘element’, ‘up…

    2025年3月13日
    200

发表回复

登录后才能评论