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/参考地址（非官网）
三.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"%>
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"%>
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;
}
}
好啦，今天的分享就到这了，希望能够帮到你呢！