layui的入门使用（保姆级教学）

2023-07-12 14:28| 来源: 网络整理| 查看: 265

前言

之前学过了bootstrap，学过了easyui，此时我们学习layui，相比起其他之前学过的两种ui框架，layui集合了两种框架的好处，功能更强大，组件更加美观

前言

layui前端框架的特性

layui的入门使用

下载layui

layui国内镜像网站（官方网站已下线）http://layui.org.cn/demo/index.html

layui官方文档下载http://layui.org.cn/index.html

使用layui

案例：结合自定义mvc框架使用layui前端框架实现登陆注册功能

实体类

basedao

config.xml配置文件

web.xml配置文件

登陆界面

jsp页面

Useraction

dao层

jsp页面

userAction

dao层

layui前端框架的特性

Layui（流畅）是一种适用于构建Web界面的现代化前端框架，具有以下几个好处：

简单易用：Layui采用简洁的API设计，提供了丰富的组件和接口，使开发人员能够快速上手，并且可以减少代码量。

轻量灵活：Layui的代码量很小，整个框架仅有几十KB的体积，可以帮助提高页面的加载速度。同时，Layui支持模块化开发，开发人员可以根据项目需求灵活选择所需的组件。

多样化的UI组件：Layui提供了丰富的UI组件，包括按钮、表单、导航、表格等，可以满足大部分常见页面的需求。这些组件具有良好的交互效果和视觉效果，为用户提供优秀的使用体验。

可扩展性强：Layui提供了强大的扩展机制，开发人员可以通过扩展模块的方式，自定义和拓展框架的功能。这样可以根据具体的需求进行灵活的调整和定制。

良好的社区支持：Layui有一个活跃的社区，开发人员可以在社区中获取到各种问题的解答、教程和示例代码。这样可以更快地解决问题，节省开发时间。

总而言之，Layui框架具有简单易用、轻量灵活、丰富的UI组件、可扩展性强和良好的社区支持等优势，能够快速提升开发效率，并为用户带来良好的使用体验。

layui的入门使用下载layui layui国内镜像网站（官方网站已下线）

http://layui.org.cn/demo/index.html layui官方文档下载

http://layui.org.cn/index.html 使用layui 下载和引入Layui：你可以从Layui官方网站（https://www.layui.com/）下载最新版本的Layui。下载完成后，将Layui的CSS和JavaScript文件引入到你的HTML文件中

在引入了layui的css文件之后，只需要根据官方的文档进行class的修改，就可以改变组件的基本样式了

初始化Layui：在引入Layui文件后，在你的JavaScript代码中初始化Layui。 // 初始化Layui layui.use([]); 案例：结合自定义mvc框架使用layui前端框架实现登陆注册功能实体类 package com.wenhao.entity; 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 } 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 User(String name, String loginName, String pwd, long rid) { super(); this.name = name; this.loginName = loginName; this.pwd = pwd; this.rid = rid; } public User(String name, String loginName, String pwd) { super(); this.name = name; this.loginName = loginName; this.pwd = pwd; } 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; } @Override public String toString() { return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", 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.SQLException; import java.util.ArrayList; import java.util.List; /* * 通用的增删改以及查询 */ public class BaseDao { /** * @author W * * 通用版分页查询 * @param sql sql语句 * @param clas 指定对象类类 * @param pageBean 分页工具类 * @return list 结果集 * @throws Exception */ public List executeQuery (String sql,Class clas,PageBean pageBean) throws Exception{ Connection conn = null;//连接对象 PreparedStatement ps = null;//执行对象 ResultSet rs = null;//结果集对象 List list= new ArrayList();//集合 /** * 是否分页？ */ if(pageBean!=null&&pageBean.isPagination()) {//如果分页的工具类传进来了【不为空】，并且分页工具类的是否分页的方法的返回值是true时 //那么便定义分页的sql语句和符合条件的总记录数 String countSql=getCountSql(sql);//符合条件的总记录数的sql conn = DBAccess.getConnection();//获取连接对象 ps = conn.prepareStatement(countSql);//执行sql语句 rs=ps.executeQuery();//获取结果集对象 if(rs.next()) { pageBean.setTotal(rs.getObject("n").toString());//结果集查询的结果设置到分页工具类的总记录的方法中 } String pageSql=getPageSql(sql,pageBean);//分页的sql conn = DBAccess.getConnection();//获取连接对象 ps = conn.prepareStatement(pageSql);//执行sql语句 rs=ps.executeQuery();//获取结果集对象 }else { conn = DBAccess.getConnection();//获取连接对象 ps = conn.prepareStatement(sql);//执行sql语句 rs=ps.executeQuery();//获取结果集对象 } while(rs.next()) { T t= (T) clas.newInstance();//类类 Field[] fields = clas.getDeclaredFields();//拿到特定实体的所有的属性 for (Field field : fields) {//遍历所有的属性 field.setAccessible(true);//打开权限通道，可以拿到私有的属性 field.set(t, rs.getObject(field.getName()));//为指定的实体对象更改指定的属性 } list.add(t);//将其加入到集合中 } return list;//返回集合 } /** * 符合条件的总记录数 * @param sql 查询的sql语句 * @return 符合条件的总记录数的sql语句 */ private String getCountSql(String sql) { return " select count(1) as n from ( "+sql+" ) t";//sql语句 } /** * 分页的sql语句 * @param sql 查询的sql语句 * @param pageBean 分页工具类 * @return 分页的sql语句 */ private String getPageSql(String sql, PageBean pageBean) { return sql+" limit "+pageBean.getStartIndex()+", "+pageBean.getRows();//sql语句 } /** * @author W * 通用的增删改 */ public int executeUpdate (T t,String sql,String [] attr) throws Exception{ Connection conn = DBAccess.getConnection();//获取连接对象 PreparedStatement ps =conn.prepareStatement(sql);//执行sql语句 for (int i = 0; i < attr.length; i++) {//遍历装有对象属性的数组 Field field = t.getClass().getDeclaredField(attr[i]);//动态实例化并拿到此对象中所有属性 field.setAccessible(true);//打开获取私有属性的通道 ps.setObject(i+1, field.get(t));//为占位符赋值 } return ps.executeUpdate(); } } config.xml配置文件 web.xml配置文件 T269_mvc_crud mvc com.zking.framework.DispatchServlet configurationLocation /mvc.xml mvc *.action 登陆界面 jsp页面 body { color: #; } a { color: #; } a:hover { color: #; } .bg-black { background-color: #; } .tx-login-bg { background: url(static/images/bg.jpg) no-repeat 0 0; } 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: 1}); } else { layer.alert('哦豁，密码错误，结界尚未打开呢', {icon: 5}); } } }) }) });

新用户注册

忘记密码

Useraction package com.wenhao.web; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.wenhao.dao.UserDao; import com.wenhao.entity.User; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.PageBean; import com.zking.util.ResponseUtil; public class UserAction extends ActionSupport implements ModelDriver { 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; } } dao层 package com.wwenhao.dao; import java.util.List; import com.wenhao.entity.User; import com.zking.util.BaseDao; import com.zking.util.PageBean; public class UserDao extends BaseDao { //查询所有 public List 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 list= super.executeQuery(sql, User.class, null); if(list!=null&&list.size()==1) { return list.get(0); }else { return null; } } } 注册 jsp页面 body { color: #; } a { color: #; } a:hover { color: #; } .bg-black { background-color: #; } .tx-login-bg { background: url(static/images/bg.jpg) no-repeat 0 0; } 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=register", dataType:'json', data: { name:$("#relname").val(), loginName: $("#username").val(), pwd: $("#password").val() }, method: 'post', success: function(data) { if(data=="OK") { layer.alert('注册成功啦！', {icon: 1}); } else { layer.alert('注册失败了', {icon: 5}); } } }) }) });

新用户注册

忘记密码

userAction package com.wenhao.web; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.wenhao.dao.UserDao; import com.wenhao.entity.User; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.PageBean; import com.zking.util.ResponseUtil; public class UserAction extends ActionSupport implements ModelDriver { private User user = new User(); private UserDao ud= new UserDao(); //注册 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; } } dao层 package com.wenhao.dao; import java.util.List; import com.wenhao.entity.User; import com.zking.util.BaseDao; import com.zking.util.PageBean; public class UserDao extends BaseDao { //注册 public int register(User user) throws Exception { String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,0);";// 定义sql语句 return super.executeUpdate(user, sql,new String[] {"name","loginName","pwd"}); } // public static void main(String[] args) throws Exception { // UserDao u = new UserDao(); // int register = u.register(new User("王辉", "是辉辉啦", "123")); // // System.out.println(register); // } }

【本文地址】

公司简介

联系我们