Layui之入门

news2024/9/24 19:24:34

目录

一、layui介绍

1.是什么

2.谁开发的

3.特点

二、layui,easyui和bootstrap的区别

1.layui、easyui与bootstrap的对比

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

 3. layui和easyui对比

三、基础使用

四、登录注册实例讲解

1.登录

 2.注册

 五、如何扩展一个layui(自定义模块)


一、layui介绍

1.是什么

layui是一个基于Web的前端UI框架,它专注于提供简洁、易用的界面元素和交互效果。它采用了模块化的设计,允许开发者根据需要选择性地引入其组件,从而提高开发效率和网站性能。layui的特点包括简单易用、扩展性强、兼容性好、文档丰富等,因此在许多Web开发项目中都被广泛使用。

2.谁开发的

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

3.特点

  1. 简单易用: layui提供了简洁明了的界面元素和交互效果,使开发者能够快速构建美观的用户界面。

  2. 模块化设计: layui的模块化设计使得开发者可以根据项目需求选择性地引入需要的组件,减少了不必要的资源加载,提高了网站的性能。

  3. 扩展性强: layui提供丰富的组件和插件,同时也支持自定义扩展,开发者可以根据自己的需求进行定制和扩展。

  4. 兼容性好: layui兼容大多数主流浏览器,保证了在不同平台上的稳定运行。

  5. 文档丰富: layui拥有详细的官方文档和示例,提供了丰富的使用教程和API说明,方便开发者学习和使用。

  6. 生态丰富: layui拥有庞大的生态系统,有许多基于layui的插件和扩展可供选择,满足不同项目的需求。

二、layui,easyui和bootstrap的区别

1.layui、easyui与bootstrap的对比

1.设计风格:

  • layui:layui的设计风格简洁、扁平化,注重用户体验和响应式布局。
  • EasyUI:EasyUI的设计风格相对传统,注重功能的全面性和可定制性。
  • Bootstrap:Bootstrap的设计风格现代、简洁,注重响应式布局和移动设备适配。

2.功能和组件:

  • layui:layui提供丰富的常用UI组件、表单元素、弹窗、导航等功能模块,易于上手和扩展。
  • EasyUI:EasyUI提供了大量的可定制的UI组件和表单元素,功能全面,适合构建复杂的企业级应用程序。
  • Bootstrap:Bootstrap提供了用于快速构建响应式网站和Web应用所需的各种组件,包括网格系统、导航、按钮、表单等。

3.构建方式和兼容性:

  • layui:layui采用模块化的构建方式,具有良好的兼容性,并且可以按需引入,减少资源加载。
  • EasyUI:EasyUI采用jQuery插件的形式,依赖jQuery库,因此对jQuery的兼容性较好。
  • Bootstrap:Bootstrap使用HTML、CSS和JavaScript构建,也可以按需引入,同时对各种浏览器的兼容性较好。

4.文档和社区支持:

  • layui:layui拥有详细的官方文档和示例,社区活跃度较高,有许多插件和扩展可供选择。
  • EasyUI:EasyUI的官方文档较为全面,并有大量的示例和教程可供参考,社区支持相对较好。
  • Bootstrap:Bootstrap拥有丰富的官方文档、示例和模板,社区支持非常活跃,有大量的资源和插件可用。

选择适合的UI框架取决于项目需求、个人喜好和开发经验,layui适用于快速构建简洁的界面和Web应用,EasyUI适用于构建复杂的企业级应用,Bootstrap适用于构建现代、响应式的网站和Web应用。

  2. 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 因为成熟,所以使用方便,但是同时也是因为成熟,就显得有些冗余

 3. layui和easyui对比

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

三、基础使用

我们先需进入layui网站

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

 然后,我们点击文档,找到码云,点击进行下载,

这样更方便我们引入一些文件,也能更好地查阅它的组件及开源代码

将layui下载到了本地,那么可将其完整地放置到你的项目目录(或静态资源服务器),并在页面中分别引入:

  <!-- 引入 layui.css -->
   <link rel="stylesheet" href="xxx/layui.css">
   <!-- 引入 layui.js -->
   <script src="xxx/layui.js"></script> 

像这样引入后,就可以直接使用啦!!! 

四、登录注册实例讲解

导入mvc配置文件和自定义mvcjar包以及一些工具类jar包

用户实体--User

package com.ctb.entity;
/**
 * 用户实体
 * @author biao
 *
 * 2023年7月10日
 */
public class User {
	
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	public User() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
	public User(long id, String name, String loginName, String pwd, long rid) {
		super();
		this.id = id;
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
		this.rid = rid;
	}
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getLoginName() {
		return loginName;
	}
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public long getRid() {
		return rid;
	}
	public void setRid(long rid) {
		this.rid = rid;
	}

}

BaseDao--通用增删改及分页模糊查询

package com.zking.util;

import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 所有Dao层的父类 
 * 
 * @author biao
 *
 * @param <T>
 */
public class BaseDao<T> {

	/**
	 * 适合多表联查的数据返回
	 * @param sql
	 * @param pageBean
	 * @return
	 * @throws SQLException
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 */
	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean)
			throws SQLException, InstantiationException, IllegalAccessException {

		List<Map<String, Object>> list = new ArrayList<>();
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = null;
		ResultSet rs = null;

		/*
		 * 是否需要分页? 无需分页(项目中的下拉框,查询条件教员下拉框,无须分页) 必须分页(项目中列表类需求、订单列表、商品列表、学生列表...)
		 */
		if (pageBean != null && pageBean.isPagination()) {
			// 必须分页(列表需求)
			String countSQL = getCountSQL(sql);
			pst = con.prepareStatement(countSQL);
			rs = pst.executeQuery();
			if (rs.next()) {
				pageBean.setTotal(String.valueOf(rs.getObject(1)));
			}

			// 挪动到下面,是因为最后才处理返回的结果集
			// -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
			// -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
			// -- countSql=select count(1) from (sql) t 符合条件的总记录数
			String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
			pst = con.prepareStatement(pageSQL);
			rs = pst.executeQuery();
		} else {
			// 不分页(select需求)
			pst = con.prepareStatement(sql);// 符合条件的所有数据
			rs = pst.executeQuery();
		}

		// 获取源数据
		ResultSetMetaData md = rs.getMetaData();
		int count = md.getColumnCount();
		Map<String, Object> map = null;
		while (rs.next()) {
			map = new HashMap<>();
			for (int i = 1; i <= count; i++) {
//				map.put(md.getColumnName(i), rs.getObject(i));
				map.put(md.getColumnLabel(i), rs.getObject(i));
			}
			list.add(map);
		}
		return list;

	}

	/**
	 * 
	 * @param sql
	 * @param attrs
	 *            map中的key
	 * @param paMap
	 *            jsp向后台传递的参数集合
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, Map<String, String[]> paMap) throws SQLException,
			NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			pst.setObject(i + 1, JsonUtils.getParamVal(paMap, attrs[i]));
		}
		return pst.executeUpdate();
	}

	/**
	 * 批处理
	 * @param sqlLst
	 * @return
	 */
	public static int executeUpdateBatch(String[] sqlLst) {
		Connection conn = null;
		PreparedStatement stmt = null;
		try {
			conn = DBAccess.getConnection();
			// 设置不自动提交
			conn.setAutoCommit(false);
			for (String sql : sqlLst) {
				stmt = conn.prepareStatement(sql);
				stmt.executeUpdate();
			}
			conn.commit();
		} catch (Exception e) {
			try {
				conn.rollback();
			} catch (SQLException e1) {
				e1.printStackTrace();
				throw new RuntimeException(e1);
			}
			e.printStackTrace();
			throw new RuntimeException(e);
		} finally {
			DBAccess.close(conn, stmt, null);
		}
		return sqlLst.length;
	}

	/**
	 * 通用的增删改方法
	 * 
	 * @param book
	 * @throws Exception
	 */
	public int executeUpdate(String sql, T t, String[] attrs) throws Exception {
		// String[] attrs = new String[] {"bid", "bname", "price"};
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		// pst.setObject(1, book.getBid());
		// pst.setObject(2, book.getBname());
		// pst.setObject(3, book.getPrice());
		/*
		 * 思路: 1.从传进来的t中读取属性值 2.往预定义对象中设置了值
		 * 
		 * t->book f->bid
		 */
		for (int i = 0; i < attrs.length; i++) {
			Field f = t.getClass().getDeclaredField(attrs[i]);
			f.setAccessible(true);
			pst.setObject(i + 1, f.get(t));
		}
		return pst.executeUpdate();
	}

	/**
	 * 通用分页查询
	 * 
	 * @param sql
	 * @param clz
	 * @return
	 * @throws Exception
	 */
	public List<T> executeQuery(String sql, Class<T> clz, PageBean pageBean) throws Exception {
		List<T> list = new ArrayList<T>();
		Connection con = DBAccess.getConnection();
		
		PreparedStatement pst = null;
		ResultSet rs = null;

		/*
		 * 是否需要分页? 无需分页(项目中的下拉框,查询条件教员下拉框,无须分页) 必须分页(项目中列表类需求、订单列表、商品列表、学生列表...)
		 */
		if (pageBean != null && pageBean.isPagination()) {
			// 必须分页(列表需求)
			String countSQL = getCountSQL(sql);
			pst = con.prepareStatement(countSQL);
			rs = pst.executeQuery();
			if (rs.next()) {
				pageBean.setTotal(String.valueOf(rs.getObject(1)));
			}

			// 挪动到下面,是因为最后才处理返回的结果集
			// -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
			// -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
			// -- countSql=select count(1) from (sql) t 符合条件的总记录数
			String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
			pst = con.prepareStatement(pageSQL);
			rs = pst.executeQuery();
		} else {
			// 不分页(select需求)
			pst = con.prepareStatement(sql);// 符合条件的所有数据
			rs = pst.executeQuery();
		}

		while (rs.next()) {
			T t = clz.newInstance();
			Field[] fields = clz.getDeclaredFields();
			for (Field f : fields) {
				f.setAccessible(true);
				f.set(t, rs.getObject(f.getName()));
			}
			list.add(t);
		}
		return list;
	}

	/**
	 * 将原生SQL转换成符合条件的总记录数countSQL
	 * 
	 * @param sql
	 * @return
	 */
	private String getCountSQL(String sql) {
		// -- countSql=select count(1) from (sql) t 符合条件的总记录数
		return "select count(1) from (" + sql + ") t";
	}

	/**
	 * 将原生SQL转换成pageSQL
	 * 
	 * @param sql
	 * @param pageBean
	 * @return
	 */
	private String getPageSQL(String sql, PageBean pageBean) {
		// (this.page - 1) * this.rows
		// pageSql=sql limit (page-1)*rows,rows
		return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
	}
}

1.登录

dao方法

package com.ctb.dao;

import java.util.List;

import com.ctb.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
/**
 * 
 * @author biao
 *
 * 2023年7月10日
 */
public class UserDao extends BaseDao<User> {
	//查询所有
	public List<User> list( User user, PageBean pageBean) throws Exception {
  String sql="select * from t_oa_user";
		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> list=	super.executeQuery(sql, User.class, null);
		  if(list!=null && list.size()==1) {
			  return list.get(0);
		  }else {
			  return null;
		  }
			}
}

UserAction

package com.ctb.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ctb.dao.UserDao;
import com.ctb.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;
/**
 * 
 * @author biao
 *
 * 2023年7月10日
 */
public class UserAction extends ActionSupport implements ModelDriver<User> {
	private User user = new User();
	private UserDao ud = new UserDao();

	//登录
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User login = ud.login(user);
			ResponseUtil.writeJson(resp, login);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	

	@Override
	public User getModel() {
		return user;
	}

}

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="common/header.jsp"%>
<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 " style="margin-top: 100px;">

	<center>
		<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="register.jsp" 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>
	</center>
	<script type="text/javascript">
		layui.use(['jquery','layer','form'], function() {
		    let $ = layui.jquery;
		    let layer = layui.layer;
		    let form =layui.form;
		    $("#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: 6});
		    			} else {
		    				layer.alert('账号密码有误', {icon: 5});
		    			} 
		    		}
		    	})
		    })
		    
		 });
		</script>
</body>
</html>

配置mvc.xml

<action path="/user" type="com.ctb.web.UserAction">
	</action>

 结果演示:

 

 2.注册

dao方法

package com.ctb.dao;

import java.util.List;

import com.ctb.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
/**
 * 
 * @author biao
 *
 * 2023年7月10日
 */
public class UserDao extends BaseDao<User> {
	//查询所有
	public List<User> list( User user, PageBean pageBean) throws Exception {
  String sql="select * from t_oa_user";
		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> list=	super.executeQuery(sql, User.class, null);
		  if(list!=null && list.size()==1) {
			  return list.get(0);
		  }else {
			  return null;
		  }
			}
	
	//注册
		public int register(User user) throws Exception {
	 String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,0);";// 定义sql语句
			return super.executeUpdate(sql,user,new String[] {"name","loginName","pwd"});
		}
	
	
//	public static void main(String[] args) throws Exception {
//		UserDao u = new UserDao();
//		int register = u.register(new User(12, "彪", "ctb", "123", 0));
//		
//		System.out.println(register);
//	}
	
	
	
}

UserAction

package com.ctb.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ctb.dao.UserDao;
import com.ctb.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;
/**
 * 
 * @author biao
 *
 * 2023年7月10日
 */
public class UserAction extends ActionSupport implements ModelDriver<User> {
	private User user = new User();
	private UserDao ud = new UserDao();

	//登录
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User login = ud.login(user);
			ResponseUtil.writeJson(resp, login);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	//注册
	public void register(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int register = ud.register(user);
			if (register > 0) {
				ResponseUtil.writeJson(resp, "OK");
			} else {
				ResponseUtil.writeJson(resp, "NO");
			}

		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public User getModel() {
		return user;
	}

}

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="common/header.jsp"%>
<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>


<script type="text/javascript">
		layui.use(['jquery','layer','form'], function() {
		    let $ = layui.jquery;
		    let layer = layui.layer;
		    let form =layui.form;
		    $("#register").click(function() {
		    	$.ajax({
		    		url:"${pageContext.request.contextPath}/user.action?methodName=register",
		    		dataType:'json',
		    		data: {
		    			name:$("#relname").val(),
		    			loginName: $("#username").val(),
		    			pwd: $("#password").val()
		    		},
		    		method: 'post',
		    		success: function(data) {
		    			if(data=="OK") {
		    				layer.alert('注册成功', {icon: 6});
		    				location.href="login.jsp";
		    			} else {
		    				layer.alert('注册失败', {icon: 5});
		    			} 
		    		}
		    	})
		    })
		    
		 });
		</script>
</head>
<body class="tx-login-bg " style="margin-top: 100px;">

	<center>
		<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="relname" placeholder="姓名"
							class="tx-input">
					</p></li>
				<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="register" class="tx-btn tx-btn-big bg-black">注册</button>
					</p></li>
				<li class="col-12 col-m-12"><p>
						<a href="login.jsp" class="f-12 f-gray">返回登录</a>
					</p></li>
			</ul>
		</div>
	</center>
</body>
</html>

结果演示: 

 五、如何扩展一个layui(自定义模块)

        1.创建一个新的JavaScript文件,命名为"myLayui.js"(或其他你喜欢的名称)。

        注:不用放入layui目录

        2.在该文件中,使用layui.define函数定义一个自定义模块。可以使用layui的其他内置模块或第三方库来辅助开发自定义模块。例如:

layui.define(['jquery'], function(exports){
    var $ = layui.jquery;
    
    // 定义自定义模块的方法
    var myModule = {
        sayHello: function(str){
             alert('Hello '+ (str);
        },
        // 添加其他自定义方法...
    };
    
    // 导出模块接口
    exports('myLayui', myLayui);
});

以上示例中,我们使用layui.define函数定义了一个名为"myLayui"的自定义模块,并在其中定义了一个名为"sayHello"的方法。这个示例中使用了layui的内置模块jquery作为依赖,所以确保在使用自定义模块前,已经正确引入了jQuery库。

        3.在HTML页面中引入layui和自定义模块的JavaScript文件:

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

注:确保在引入该模块之前,先引入layui.js

        4.在需要使用自定义模块的地方,使用layui.use函数来引入并调用该模块。例如:

layui.use(['myLayui'], function(){
    var myLayui = layui.myLayui;
    
    // 使用自定义模块的方法
    myLayui.sayHello(' Word!!!');//弹出Hello World!!!
});

在示例中,我们使用layui.use函数引入了"myLayui"模块,并通过layui.myLayui获取了对该模块的实例。然后,我们可以调用自定义模块的方法,例如sayHello()。

好啦,layui入门就分享到这啦!!!💕

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

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

相关文章

医院陪诊小程序开发|陪诊小程序定制|陪诊服务app成品

陪诊小程序的功能开发对于陪诊行业有以下好处&#xff1a;   提高服务效率&#xff1a;陪诊小程序可以提供在线预约功能&#xff0c;方便用户随时预约合适的陪诊人员&#xff0c;减少了繁琐的人工沟通和安排工作&#xff0c;提高了服务效率。   增加服务范围&#xff1a;通…

基于matlab将图像标记器多边形转换为标记的块图像以进行语义分割(附源码)

一、前言 此示例演示如何将存储在对象中的多边形标签转换为适用于语义分割工作流的标记阻止图像。 可以使用计算机视觉工具箱中的图像标记器应用来标记太大而无法放入内存和多分辨率图像的图像。有关详细信息&#xff0c;请参阅在图像标记器&#xff08;计算机视觉工具箱&…

uniapp zjy-calendar日历,uni-calendar日历增强版

一、zjy-calendar简介 zjy-calendar日历是对uniapp uni-calendar日历的增强&#xff0c;支持圆点和文字自定义颜色。 二、使用方法 源使用说明&#xff1a;https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html 1、下载导入 https://ext.dcloud.net.cn/plugin?…

web-php

目录 基础 注释 php程序的组成 php的数据类型 php代码的运行 代码 显示时间 输出账户名和密码 后端对前端的数据进行验证处理代码 连接数据库的代码 前后端代码相结合验证&#xff0c;实现登录接口验证 login.html login.php register.html register.php error…

大模型调用工具魔搭GPT——一键调用魔搭社区上百个AI模型的API

为了让模型开发变得更容易,阿里云在发布会现场推出了一款令开发者耳目一新的工具:ModelScopeGPT(魔搭GPT)。它能够通过担任“中枢模型”的大语言模型一键调用魔搭社区其他的AI模型,实现大模型和小模型协同完成复杂任务。 这类智能调用工具被业界普遍看好。ModelScopeGP…

Android Handler被弃用,那么以后怎么使用Handler,或者类似的功能

Android API30左右&#xff0c;Android应用在使用传统写法使用Handler类的时候会显示删除线&#xff0c;并提示相关的方法已经被弃用&#xff0c;不建议使用。 Handler handler new Handler(){Overridepublic void handleMessage(NonNull Message msg) {super.handleMessage(…

分配操作菜单

目录 概述介绍数据库后端前端效果展示 概述 在写后台管理系统时, 我们可以根据不同的登录人,给予不同的功能菜单 如 :给楼栋管理员登录时分配(楼栋管理,宿舍管理) 所以在数据库就要创建: 1.登录人与角色表, 2再给角色表分配操作菜单 登录时查询对应的操作菜单,将数据响应给前端…

ASPICE软件工具链之Jira教程

Jira使用教程 一、什么是Jira? 二、Jira的使用教程 功能介绍: 创建工作流 工作流方案 设置字段流程 字段配置 界面方案 界面方案创建流程 问题类型界面方案 将项目与预先创建的方案关联 配置总流程 创建项目 设置项目 添加工作流 添加界面配置方案 设置Scrum 看板泳道图 一…

物联网行业的革命:Web3 技术如何改变我们的日常生活

物联网 (IoT) 是一个充满创新和潜力的领域&#xff0c;它将物理设备、传感器和互联网连接起来&#xff0c;实现智能化和自动化。 在过去几年中&#xff0c;从智能家居、智能城市到工业自动化&#xff0c;物联网技术已经渗透到了各个领域。然而&#xff0c;随着物联网设备和系统…

Spring源码系列-第1章-Spring源码纵览

必读 源码是循循渐进的&#xff0c;前面我会省略中间很多目前不需要深入的代码&#xff0c;所以会看起来代码比较少。省略的地方我会打上这样的标识 // ... 或者 // ...如果没打也不代表我没省略&#xff0c;可能是忘记了&#xff0c;不要看懵了。 第1章-Spring源码纵…

golang数据库操作相应内容--推荐【比较全】

Go为开发数据库驱动定义了一些标准接口&#xff0c;开发者可以根据定义的接口来开发相应的数据库驱动&#xff0c;只要是按照标准接口开发的代码&#xff0c; 以后需要迁移数据库时&#xff0c;不需要任何修改。 一、database/sql接口 1.1sql.Register 这个存在于database/s…

数分面试题:酒坛问题

问题&#xff1a;你有一个八升的酒坛&#xff0c;装满了酒&#xff0c;此外还有3升和5升的两个空酒坛&#xff0c;请在一个酒坛里装上刚好四升酒 关键&#xff1a;8拆分为3个正整数的加和&#xff0c;且3个正整数不能大于8&#xff0c;5&#xff0c;3 组合方式&#xff1a; 4…

【力扣算法02】之寻找两个正序数组的中位数 - python

文章目录 问题描述示例 1示例2提示 解题思路代码分析完整代码运行效果及示例代码示例代码1效果图 示例代码2效果图 完结 问题描述 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间…

机器学习洞察 | 分布式训练让机器学习更加快速准确

机器学习能够基于数据发现一般化规律的优势日益突显&#xff0c;我们看到有越来越多的开发者关注如何训练出更快速、更准确的机器学习模型&#xff0c;而分布式训练 (Distributed Training) 则能够大幅加速这一进程。 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源…

限制远程访问,保障服务器安全,如何指定某台电脑远程本服务器?

好多人都在问&#xff0c;如何限制某台电脑远程访问本服务器是一个必须要解决的问题。下面&#xff0c;我将为大家介绍几种限制远程访问的方法&#xff0c;帮助大家保障服务器的安全性。 1&#xff0e;修改远程桌面端口号 默认情况下&#xff0c;Windows服务器的远程桌面端口号…

时序预测 | Matlab+Python实现基于高斯混合模型聚类结合CNN-BiLSTM-Attention的风电场短期功率预测

时序预测 | MatlabPython实现基于高斯混合模型聚类结合CNN-BiLSTM-Attention的风电场短期功率预测 目录 时序预测 | MatlabPython实现基于高斯混合模型聚类结合CNN-BiLSTM-Attention的风电场短期功率预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 基于高斯混…

1.Git使用技巧-常用命令3

1.Git使用技巧-常用命令3 文章目录 1.Git使用技巧-常用命令3一、版本分支介绍二、版本控制常用命令例子 三、git 仓库如何使用总结 一、版本分支介绍 分支介绍&#xff1a; Master &#xff1a; 稳定压倒一切&#xff0c;禁止尚review和测试过的代码提交到这个分支上&#xff…

1.2 向量基础

什么是向量 向量的定义 ①向量是有大小和方向的有向线段。 ②向量没有位置&#xff0c;只有大小和方向 ③向量的箭头是向量的结束&#xff0c;尾是向量的开始 ④向量魔术的位移能被认为是宇宙平行的唯一序列 &#xff08;向量的数组不是向量的位置&#xff0c;而是向量在各个维…

C++多线程学习(十七、简单实现线程池)

目录 线程池 设计线程池的关键问题 代码 可能出现的疑问 queue> task; 总结&#xff1a; template auto InsertQueue(T&& t, Args&& ...args)->future;(t(args...))> 总结&#xff1a; ThreadPool(size_t size);构造函数 总结&#xff1…

在SpringBoot中搭建微服务的项目(19版)

1.创建SpringBoot项目 2.删除不需要的,留一个pom文件 3.掉地SpringBoot的版本: <version>2.1.6.RELEASE</version> 4.导入该pom文件 <dependencies> <!-- SpringBoot启动器--><dependency><groupId>org.springframework.boot</g…