LayUI之入门

   

目录

   1.什么是layui

2.layui、easyui与bootstrap的对比

  有趣的对比方式,嘿嘿嘿....  easyui=jquery+html4(用来做后台的管理界面) 半老徐娘  bootstrap=jquery+html5 美女 拜金  layui 清纯少女

      2.1 layui和bootstrap对比(这两个都属于UI渲染框架)

      2.2 layui和easyui对比

3.layui入门

       3.1 路径问题

4.如何扩展一个layui(自定义模块)    参考 模块规范

   3)设定扩展模块所在的目录,然后就可以在别的JS文件中使用

5.构建登录页面

        5.1 dao方法

        5.2 Action

        5.3 mvc搭建

6.主页搭建


1.什么是layui

   layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于    MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

   官方网站:https://www.layui.com/(已下线)
   参考地址:http://layui.org.cn/demo/index.html(已下线,非官网)

   由国人开发(作者贤心),16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。

2.layui、easyui与bootstrap的对比


  有趣的对比方式,嘿嘿嘿....
  easyui=jquery+html4(用来做后台的管理界面) 半老徐娘
  bootstrap=jquery+html5 美女 拜金
  layui 清纯少女

      2.1 layui和bootstrap对比(这两个都属于UI渲染框架)

          1.layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了。比较新,轻量级,样式简单好看(目前官网已下架,开源了)
          2.bootstrap 相对来说是比较成熟的一个框架,现在已经更新到4.X版本。是一个很成熟的框架,这个大部分人一般都用过

          1)适用范围不一样

      
            1.layui 其实更偏向与后端开发人员使用,在服务端页面上有非常好的效果。
      
            2.适合做后台框架

            3.layui是提供给后端开发人员最好的ui框架,基于DOM驱动,在实现前端交互上比较麻烦,页面的增删改查都需要查询DOM元素。所以在不需要交互的时候,用layui还是不错的(说这句话的人,只能说明你对layui不了解)
             
            4.bootstrap 在前端响应式方面做得很好,PC端和移动端表现都不错。
      
            5.适合做网站
             
            6.如果是类似官网,且需要同时满足PC端和移动端效果,bootstrap 表现很好,但是如果是要交互的网站,比如商城之类,layui显然更好,前后端分离

          2)大小不一样
           
             1.layui 轻量级
             2.bootsrap 因为成熟,所以使用方便,但是同时也是因为成熟,就显得有些冗余

      2.2 layui和easyui对比

          1.easyui 是非开源的,有需要解决的问题的话,就只能等官方更新了
          2.layui是开源的,社区比较活跃,解决问题还是比较快的
          3.easyui诞生的早些,所以功能相对完善一些,很多功能都能是比较健全的
          4.layui就相对来说少一些了,不过,功能都是像官网说的,精雕细琢
          5.layui更符合现在的审美

3.layui入门

   将layui下载到了本地,那么可将其完整地放置到你的项目目录(或静态资源服务器),并在页面中分别引入:
   <!-- 引入 layui.css -->
   <link rel="stylesheet" href="xxx/layui.css">
   <!-- 引入 layui.js -->
   <script src="xxx/layui.js"></script> 

       3.1 路径问题

       1) 相对路径/绝对路径
       2) base标签

   入门案例:点击弹出框  

4.如何扩展一个layui(自定义模块)    参考 模块规范

   1)第一步:确认模块名,假设为:test.js文件放入项目任意目录下(注意:不用放入layui目录)

   2)编写test.js
  
   layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
      var obj = {
         hello: function(str){
            alert('Hello '+ (str||'test'));
         }
      };
 
      //输出test接口
      exports('test', obj);
   });   

   3)设定扩展模块所在的目录,然后就可以在别的JS文件中使用

   layui.config({
      base: '/res/js/' //假设这是test.js所在的目录
   }).extend({ //设定模块别名
      test: 'test' //如果test.js是在根目录,也可以不用设定别名
   });
 
   //使用test
   layui.use('test', function(){
      var test = layui.test;
 
      test.hello('World!'); //弹出Hello World!
   });

   案例:
   1)弹出hello方法
   2)日期格式转换

5.构建登录页面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css" type="text/css" media="all">
<style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style>
</head><body class="tx-login-bg"><div class="tx-login-box"><div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div><ul class="tx-form-li row"><li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li><li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li><li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li><li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li><li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li></ul></div><script>
layui.use(['layer', 'jquery'], function(){var layer = layui.layer,form = layui.form,$=layui.jquery;$("#login").click(function(){$.ajax({url:'${pageContext.request.contextPath}/user.action?methodName=login',dataType:'json',data:{loginName:$("#username").val(),pwd:$("#password").val()},method:'post',success:function(data){if(data){layer.alert('恭喜'+data.name+'登录成功', {icon: 1});}else{layer.msg('登录失败', {icon: 5});}}});});});
</script> </body>
</html>

        5.1 dao方法

package com.zking.dao;import java.util.List;import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;public class UserDao extends BaseDao<User> {public List<User> list(User user, PageBean pageBean) throws Exception {String sql="select *from t_oa_user where 1 = 1";return super.executeQuery(sql, User.class, pageBean);}public User login(User user) throws Exception {String sql="select *from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd ='"+user.getPwd()+"' ";List<User> lst = super.executeQuery(sql, User.class, null);if(lst != null && lst.size() ==1) {return lst.get(0);}return null;}
}

        5.2 Action

package com.zking.web;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriver<User> {private User user = new User();private UserDao usedDao = new UserDao();public void login(HttpServletRequest req, HttpServletResponse resp) {try {User u = usedDao.login(user);ResponseUtil.writeJson(resp, u);} catch (Exception e) {e.printStackTrace();}}@Overridepublic User getModel() {return user;}}

        5.3 mvc搭建

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/blog" type="com.zking.web.BlogAction"><forward name="list" path="/blogList.jsp" redirect="false" /><forward name="toList" path="/blog.action?methodName=list"redirect="true" /><forward name="toEdit" path="/blogEdit.jsp" redirect="false" /></action><action path="/user" type="com.zking.web.UserAction"></action><!-- 	<action path="/meetingInfo" type="com.zking.web.MeetingInfoAction"> -->
<!-- 		<forward name="list" path="/meetingInfoList.jsp" redirect="false" /> -->
<!-- 		<forward name="toList" path="/meetingInfo.action?methodName=list" -->
<!-- 			redirect="true" /> -->
<!-- 		<forward name="toEdit" path="/meetingInfoEdit.jsp" redirect="false" /> -->
<!-- 	</action> --><!-- 	<action path="/solrBlog" type="com.test.web.SolrBlogAction"> -->
<!-- 		<forward name="list" path="/solrBlogList.jsp" redirect="false" /> -->
<!-- 		<forward name="toList" path="/solrBlog.action?methodName=list" -->
<!-- 			redirect="true" /> -->
<!-- 		<forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" /> -->
<!-- 	</action> --><action path="/studentBlog" type="com.test.web.StudentBlogAction"><forward name="list" path="/studentBlogList.jsp" redirect="false" /><forward name="toList" path="/studentBlog.action?methodName=list" redirect="true" /><forward name="toEdit" path="/studentBlogEdit.jsp" redirect="false" /></action><action path="/solrBlog" type="com.xiaoli.web.SolrBlogAction"><forward name="list" path="/solrBlogList.jsp" redirect="false" /><forward name="toList" path="/solrBlog.action?methodName=list" redirect="true" /><forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" /></action></config>


6.主页搭建

   参考地址:http://layui.org.cn/demo/admin.html


   

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【EI复现】梯级水光互补系统最大化可消纳电量期望短期优化调度模型(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Multimodal Learning with Transformer: A Survey

Transformer多模态学习 Abstract1 INTRODUCTION2 BACKGROUND2.1 Multimodal Learning (MML)2.2 Transformers: a Brief History and Milestones2.3 Multimodal Big Data 3 TRANSFORMERS: A GEOMETRICALLY TOPOLOGICAL PERSPECTIVE3.1 Vanilla Transformer3.1.1 Input Tokenizat…

旷视科技AIoT软硬一体化走向深处,生态和大模型成为“两翼”?

齐奏AI交响曲的当下&#xff0c;赛道玩家各自精彩。其中&#xff0c;被称作AI四小龙的商汤科技、云从科技、依图科技、旷视科技已成长为业内标杆&#xff0c;并积极追赶新浪潮。无论是涌向二级市场还是布局最新风口大模型&#xff0c;AI四小龙谁都不甘其后。 以深耕AIoT软硬一…

C++:基于浅拷贝/深拷贝对模拟string类的一些优化

文章目录 string类和日期类浅拷贝/深拷贝对于上述代码的深拷贝写法正常版本和优化版本写时拷贝 string类和日期类 前面我们已经实现了string类和日期类&#xff0c;这两个类有没有想过它们有什么不同&#xff1f; 其实答案很明显&#xff0c;不同的地方在于string类中涉及到内…

黑马点评学习笔记2

黑马点评学习笔记 1.缓存穿透1.1 缓存穿透是什么&#xff1f;1.2缓存穿透的解决方案1.2.1 缓存空对象1.2.2 布隆过滤1.2.3 其他解决方案 2.缓存雪崩2.1 缓存雪崩是什么&#xff1f;2.2 缓存雪崩的解决方案 3.缓存击穿3.1缓存击穿是什么&#xff1f;3.2缓存击穿的解决方案3.2.1互…

idea添加翻译插件并配置有道翻译

1、安装Translation插件 2、 创建有道云应用 有道智云控制台 3、设置idea 4、效果&#xff08;选中文本右键翻译&#xff0c;默认快捷键CtrlShiftY&#xff09;

篇二十二:解释器模式:处理语言语法

篇二十二&#xff1a;"解释器模式&#xff1a;处理语言语法" 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料…

CentOS安装Postgresql

PG基本安装步骤 安装postgresql&#xff1a; sudo yum install postgresql-server初始化数据库&#xff1a;安装完毕后&#xff0c;需要初始化数据库并创建初始用户&#xff1a; sudo postgresql-setup initdb启动和停止服务&#xff1a; sudo systemctl start postgresql sudo…

一文详解高并发中的线程与线程池

一切要从CPU说起 你可能会有疑问&#xff0c;讲多线程为什么要从CPU说起呢&#xff1f;原因很简单&#xff0c;在这里没有那些时髦的概念&#xff0c;你可以更加清晰的看清问题的本质。CPU并不知道线程、进程之类的概念。CPU只知道两件事:1. 从内存中取出指令2. 执行指令&…

远景智能PMO负责人严晓婷受邀为第十二届中国PMO大会演讲嘉宾

上海远景科创智能科技有限公司PMO负责人严晓婷女士受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;能源物联网产品标准项目和非标准项目的并行管理。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1…

React 入门学习

React 入门 一、基本认识1.1、前言1.2、什么是1.3、编译<br>1.4、特点1.5、高效 二、React环境和基本使用2.1、环境搭建2.2、脚手架项目基本使用2.2.1、src2.2.2、public2.2.3、package.json 三、JSX的理解和使用四、模块与模块化, 组件与组件化的理解4.1、模块与组件4.2…

nginx基础

nginx 具体就是一个轻量级以及高性能的web服务软件。 nginx特点 1、稳定性高。&#xff08;但不如apache&#xff09; 2、系统资源消耗比较低。&#xff08;处理http请求的并发能力较高&#xff0c;单台处理器可以处理3w-5w的并发请求&#xff09; 注&#xff1a;一般在企…

请解释一下JavaScript中的基本数据类型和引用数据类型,以及它们在内存中的存储方式。

1、请解释一下JavaScript中的基本数据类型和引用数据类型&#xff0c;以及它们在内存中的存储方式。 JavaScript中有两种类型的数据&#xff1a;基本数据类型&#xff08;也称为原始数据类型&#xff09;和引用数据类型。 基本数据类型包括&#xff1a; Number&#xff08;数…

用PointNet分类3D点云

在本教程中&#xff0c;我们将学习如何训练PointNet进行分类。 我们将主要关注数据和训练过程&#xff1b; 展示如何从头开始编码 Point Net 的教程位于此处。 本教程的代码位于这个Github库中&#xff0c;我们将使用的笔记本位于这个Github库中。 一些代码的灵感来自于这个Git…

Java仓库管理系统设计与实现

仓库管理系统 JAVA/数据库 课程设计 仓库管理系统 使用 MySQL和Idea 功能需求 1、问题描述 设计一个仓储管理系统&#xff0c;对仓库货品进行管理&#xff0c;出入库进行记录。 主要功能包括&#xff0c;货品添加修改&#xff0c;出库、入库、库存查询等功能&#xff0c;现…

【密码学】六、公钥密码

公钥密码 1、概述1.1设计要求1.2单向函数和单向陷门函数 2、RSA公钥密码体制2.1加解密2.2安全性分析 3、ElGamal公钥密码体制3.1加解密算法3.2安全性分析 4、椭圆曲线4.1椭圆曲线上的运算4.2ECC 5、SM2公钥密码体制5.1参数选取5.2密钥派生函数5.3加解密过程5.3.1初始化5.3.2加密…

安装linux操作系统

安装虚拟机的步骤&#xff1a; 安装linux系统 之后开启虚拟机 之后重启&#xff0c;打开虚拟机&#xff0c;登录root账号

探索泛型与数据结构:解锁高效编程之道

文章目录 引言第一部分&#xff1a;了解泛型1.1 为什么使用泛型1.2 使用泛型的好处 第二部分&#xff1a;泛型的使用场景2.1 类的泛型2.2 方法的泛型2.3 接口的泛型 第三部分&#xff1a;泛型通配符3.1 通配符3.2 通配符的受限泛型 第四部分&#xff1a;数据结构和泛型的应用4.…

微信小程序开发摇一摇功能_javascript技巧

方法定义&#xff1a; let shakeInfo {openFlag: false,// 是否开启摇一摇&#xff0c;*****注意&#xff1a;如果是小程序全局监听摇一摇&#xff0c;这里默认为trueshakeSpeed: 110,//设置阈值,越小越灵敏shakeStep: 2000,//摇一摇成功后间隔lastTime: 0,//此变量用来记录…

cmake 如何添加依赖库

1 说明 cmake 经常需要添加依赖库&#xff0c;但是不知如何确定依赖的库名称&#xff0c;如何编写 2 环境 ubuntu 机器 3 依赖方法 以 dbus 为例 3.1、确定库的名字 通过dpkg 命令搜索库名&#xff0c;如下所示&#xff0c;确定libdbus-1-dev 为自己需要的版本 usereba…