LayUi基础入门【附有案例从0到1详解】

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于LayUi的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.LayUi的创作背景

二.LayUi是什么

三.LayUi下载地址

四.为什么要使用

五.怎么使用Layui

六.案例详解

表结构

实体类

工具类

配置文件

公共页面（引入的文件）

1.登录

jsp页面

dao

servlet

2.注册

jsp界面

dao

servlet

一.LayUi的创作背景

Layui是一款轻量级的前端UI框架，它提供了丰富的组件和简洁易用的API，帮助开发者快速构建美观的网页界面

1. 诞生：Layui是中国深圳前端开发者贤心（韩峥）开发的开源项目，第一版发布于2016年2. 设计理念：Layui的设计理念是“助力前端工程师”，它致力于提供简洁、易用、灵活的前端UI解决方案，帮助开发者节省时间和精力3. 特点：Layui的特点之一是轻量级，整体代码量很小，压缩后仅约100KB左右。它也有很好的兼容性，支持主流浏览器，并且提供了丰富的自定义主题功能4. 组件和模块：Layui提供了众多常见的UI组件，如按钮、表单、导航、进度条等，以及常用的模块，如弹层、模块化开发、请求模块等，方便开发者快速搭建网页界面5. 文档和社区：Layui有完善的官方文档，其中包含详细的API说明和示例代码。此外，Layui拥有庞大的开发者社区，开发者可以在社区中交流和分享经验

总之，Layui是一款受欢迎的前端UI框架，它的简洁易用和丰富功能使得开发者可以快速构建出漂亮的界面

二.LayUi是什么

Layui（传统版）是一款开源的前端框架，用于快速构建Web界面。它由封装了常用的CSS、JavaScript组件和模块化开发的功能构成

Layui的设计理念是“低耦合，高内聚”，即各个组件之间相互独立，但又可以很方便地组合和调用。它支持自定义皮肤和模块的灵活配置，可以根据项目的需求进行定制和扩展Layui被广泛应用于各类Web项目中，特别是中小型项目和后台管理系统。它的特点是轻量、简洁、易用，并且具有良好的兼容性。无论是新手还是有经验的前端开发者，都可以快速上手并开发出美观、功能完善的界面

⭐⭐总的来说，Layui的特点是简单、轻量、易用，提供了丰富的UI组件和模块化开发方式，适用于快速构建Web界面和后台管理系统。无论是新手还是有经验的开发者，都可以轻松上手并开发出高质量的前端界面

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

三.LayUi下载地址

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

点击直接下载即可，下载完成后是一个压缩包，解压后导入项目中使用即可

四.为什么要使用

特点：

1. 简洁轻量：Layui的设计目标是让前端开发变得简单、便捷，因此它的代码量很小，文件体积轻量，加载速度快，同时也有利于网页的性能优化2. 模块化开发：Layui采用了模块化的开发方式，将各个组件封装成独立的模块，通过简单的配Layui置和引入即可使用，方便开发者按需加载和组合，提高代码的可维护性和可扩展性3. 完善的文档和示例：Layui提供了详细的文档和丰富的示例，开发者可以快速学习和掌握各个组件的使用方法，快速搭建界面4. 丰富的UI组件：Layui提供了大量常用的UI组件，如表格、表单、按钮、弹窗、日期选择器等，这些组件都经过精心设计和优化，风格统一美观，使用方便5. 强大的扩展性：Layui支持自定义皮肤和模块的扩展，开发者可以根据项目需求自定义样式和功能，满足特定的UI需求6. 兼容性良好：Layui支持主流的浏览器，包括IE6+，Chrome、Firefox等，兼容性良好，可以在不同的浏览器和平台上正常运行

这些优点就是使用Layui的原因！！

五.怎么使用Layui

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

2. 初始化Layui：在引入Layui文件后，在你的JavaScript代码中初始化Layui。

3. 使用Layui组件和模块：在初始化Layui之后，你就可以开始使用Layui提供的组件和模块了。Layui有很多可用的组件，例如按钮、表单、导航等。你可以根据需要选择合适的组件，并按照官方文档中的示例代码进行使用

这是一个按钮 4. 自定义主题：Layui提供了自定义主题的功能，你可以根据自己的需求修改Layui的默认主题。详情可以参考Layui官方文档中的"自定义主题"部分5. 参考文档和社区：如果你想深入了解Layui的更多功能和使用方法，可以查看Layui的官方文档。此外，Layui拥有活跃的开发者社区，你可以在社区中提问、分享和交流

六.案例详解

其中有用到自定义mvc框架，不懂的小伙伴可以点击下方链接查看

自定义MVC框架【上篇】--原理http://t.csdn.cn/giVlE自定义MVC框架【中篇】--框架实现http://t.csdn.cn/ul7Eu自定义MVC框架【下篇】--运用框架完成增删改查http://t.csdn.cn/mbxV5

表结构

实体类

package com.wh.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 + "]";

}

}

工具类

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();

}

}

package com.zking.util;

import java.io.InputStream;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.Properties;

/**

* 提供了一组获得或关闭数据库对象的方法

*

*/

public class DBAccess {

private static String driver;

private static String url;

private static String user;

private static String password;

static {// 静态块执行一次，加载 驱动一次

try {

InputStream is = DBAccess.class

.getResourceAsStream("config.properties");

Properties properties = new Properties();

properties.load(is);

driver = properties.getProperty("driver");

url = properties.getProperty("url");

user = properties.getProperty("user");

password = properties.getProperty("pwd");

Class.forName(driver);

} catch (Exception e) {

e.printStackTrace();

throw new RuntimeException(e);

}

}

/**

* 获得数据连接对象

*

* @return

*/

public static Connection getConnection() {

try {

Connection conn = DriverManager.getConnection(url, user, password);

return conn;

} catch (SQLException e) {

e.printStackTrace();

throw new RuntimeException(e);

}

}

public static void close(ResultSet rs) {

if (null != rs) {

try {

rs.close();

} catch (SQLException e) {

e.printStackTrace();

throw new RuntimeException(e);

}

}

}

public static void close(Statement stmt) {

if (null != stmt) {

try {

stmt.close();

} catch (SQLException e) {

e.printStackTrace();

throw new RuntimeException(e);

}

}

}

public static void close(Connection conn) {

if (null != conn) {

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

throw new RuntimeException(e);

}

}

}

public static void close(Connection conn, Statement stmt, ResultSet rs) {

close(rs);

close(stmt);

close(conn);

}

public static boolean isOracle() {

return "oracle.jdbc.driver.OracleDriver".equals(driver);

}

public static boolean isSQLServer() {

return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);

}

public static boolean isMysql() {

return "com.mysql.cj.jdbc.Driver".equals(driver);

}

public static void main(String[] args) {

Connection conn = DBAccess.getConnection();

System.out.println(conn);

DBAccess.close(conn);

System.out.println("isOracle：" + isOracle());

System.out.println("isSQLServer：" + isSQLServer());

System.out.println("isMysql：" + isMysql());

System.out.println("数据库连接(关闭)成功");

}

}

package com.zking.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

/*

*jaso格式数据的转换与回显

*/

public class ResponseUtil {

public static void write(HttpServletResponse response,Object o)throws Exception{

response.setContentType("text/html;charset=utf-8");

PrintWriter out=response.getWriter();

out.println(o.toString());

out.flush();

out.close();

}

public static void writeJson(HttpServletResponse response,Object o)throws Exception{

ObjectMapper om = new ObjectMapper();

// om.writeValueAsString(o)代表了json串

write(response, om.writeValueAsString(o));

}

}

配置文件

#oracle9i

#driver=oracle.jdbc.driver.OracleDriver

#url=jdbc:oracle:thin:@localhost:1521:ora9

#user=test

#pwd=test

#sql2005

#driver=com.microsoft.sqlserver.jdbc.SQLServerDriver

#url=jdbc:sqlserver://localhost:1423;DatabaseName=test

#user=sa

#pwd=sa

#sql2000

#driver=com.microsoft.jdbc.sqlserver.SQLServerDriver

#url=jdbc:microsoft:sqlserver://localhost:1433;databaseName=unit6DB

#user=sa

#pwd=888888

#mysql5

#driver=com.mysql.jdbc.Driver

#url=jdbc:mysql://127.0.0.1:3306/mybatis_ssm?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT

#user=mybatis_ssm

#pwd=xiaoli

#mysql8

driver=com.mysql.cj.jdbc.Driver

url=jdbc:mysql://127.0.0.1:3306/mybatis_ssm?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT&useSSL=true

user=root

pwd=123456

T269_mvc_crud

mvc

com.zking.framework.DispatchServlet

configurationLocation

/mvc.xml

mvc

*.action

公共页面（引入的文件）

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

1.登录

界面

登录成功

登录失败

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@include file="common/head.jsp"%>

href="${pageContext.request.contextPath}/static/css/login.css"

type="text/css" media="all">

dao

package com.wh.dao;

import java.util.List;

import com.wh.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;

}

}

}

servlet

package com.wh.web;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.wh.dao.UserDao;

import com.wh.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;

}

}

2.注册

注册成功

jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@include file="common/head.jsp"%>

href="${pageContext.request.contextPath}/static/css/login.css"

type="text/css" media="all">

dao

package com.wh.dao;

import java.util.List;

import com.wh.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);

// }

}

servlet

package com.wh.web;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.wh.dao.UserDao;

import com.wh.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;

}

}

好啦，今天的分享就到这了，希望能够帮到你呢！😊😊