前言
之前学过了bootstrap，学过了easyui，此时我们学习layui，相比起其他之前学过的两种ui框架，layui集合了两种框架的好处，功能更强大，组件更加美观
目录
layui国内镜像网站（官方网站已下线）http://layui.org.cn/demo/index.html
layui官方文档下载http://layui.org.cn/index.html
案例：结合自定义mvc框架使用layui前端框架实现登陆注册功能
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文件中
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>在引入了layui的css文件之后，只需要根据官方的文档进行class的修改，就可以改变组件的基本样式了
- 初始化Layui：在引入Layui文件后，在你的JavaScript代码中初始化Layui。
<script>
// 初始化Layui
layui.use([]);
</script>案例：结合自定义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<T> {
/**
* @author W
*
* 通用版分页查询
* @param sql sql语句
* @param clas 指定对象类类
* @param pageBean 分页工具类
* @return list 结果集
* @throws Exception
*/
public List<T> executeQuery (String sql,Class clas,PageBean pageBean) throws Exception{
Connection conn = null;//连接对象
PreparedStatement ps = null;//执行对象
ResultSet rs = null;//结果集对象
List<T> list= new ArrayList<T>();//集合
/**
* 是否分页？
*/
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配置文件
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/user" type="com.wh.web.UserAction">
</action>
</config>web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>T269_mvc_crud</display-name>
<servlet>
<servlet-name>mvc</servlet-name>
<servlet-class>com.zking.framework.DispatchServlet</servlet-class>
<init-param>
<param-name>configurationLocation</param-name>
<param-value>/mvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>mvc</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>
</web-app>登陆界面
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="common/head.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;
$("#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});
}
}
})
})
});
</script>
</head>
<body class="tx-login-bg " style="margin-top: -50px; margin-left:400px; ">
<div class="tx-login-box">
<div class="login-avatar layui-bg-gray">
<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 layui-bg-orange">登录</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>
</body>
</html>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<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;
}
}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<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;
}
}
}注册
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="common/head.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;
$("#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});
}
}
})
})
});
</script>
</head>
<body class="tx-login-bg " style="margin-top: -80px; margin-left:400px; ">
<div class="tx-login-box">
<div class="login-avatar layui-bg-gray">
<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="login" class=" layui-bg-orange 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>
</body>
</html>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<User> {
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<User> {
//注册
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);
// }
}
3537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
