1.什么是layui
layui（諧音：類 UI) 是一套開源的 Web UI 解決方案，采用自身經(jīng)典的模塊化規(guī)范，并遵循原生 HTML/CSS/JS 的開發(fā)方式，極易上手，拿來即用。其風(fēng)格簡約輕盈，而組件優(yōu)雅豐盈，從源代碼到使用方法的每一處細節(jié)都經(jīng)過精心雕琢，非常適合網(wǎng)頁界面的快速開發(fā)。layui 區(qū)別于那些基于 MVVM 底層的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說，它更多是面向后端開發(fā)者，你無需涉足前端各種工具，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。
官方網(wǎng)站：https://www.layui.com/（已下線）
參考地址：http://layui.org.cn/demo/index.html（已下線，非官網(wǎng)）
由國人開發(fā)（作者賢心），16年出廠的框架，其主要提供了很多好看、方便的樣式，并且基本拿來即用，和Bootstrap有些相似，但該框架有個極大的好處就是定義了很多前后端交互的樣式接口，如分頁表格，只需在前端配置好接口，后端則按照定義好的接口規(guī)則返回數(shù)據(jù)，即可完成頁面的展示，極大減少了后端人員的開發(fā)成本。
2.layui、easyui與bootstrap的對比
有趣的對比方式，嘿嘿嘿…
easyui=jquery+html4（用來做后臺的管理界面） 半老徐娘
bootstrap=jquery+html5 美女 拜金
layui 清純少女
2.1 layui和bootstrap對比（這兩個都屬于UI渲染框架）
1.layui是國人開發(fā)的一套框架，2016年出來的，現(xiàn)在已更新到2.X版本了。比較新，輕量級，樣式簡單好看（目前官網(wǎng)已下架，開源了）
2.bootstrap 相對來說是比較成熟的一個框架，現(xiàn)在已經(jīng)更新到4.X版本。是一個很成熟的框架，這個大部分人一般都用過
1）適用范圍不一樣
1.layui 其實更偏向與后端開發(fā)人員使用，在服務(wù)端頁面上有非常好的效果。
2.適合做后臺框架
3.layui是提供給后端開發(fā)人員最好的ui框架，基于DOM驅(qū)動，在實現(xiàn)前端交互上比較麻煩，頁面的增刪改查都需要查詢DOM元素。所以在不需要交互的時候，用layui還是不錯的（說這句話的人，只能說明你對layui不了解）
4.bootstrap 在前端響應(yīng)式方面做得很好，PC端和移動端表現(xiàn)都不錯。
5.適合做網(wǎng)站
6.如果是類似官網(wǎng)，且需要同時滿足PC端和移動端效果，bootstrap 表現(xiàn)很好，但是如果是要交互的網(wǎng)站，比如商城之類，layui顯然更好，前后端分離
2）大小不一樣
1.layui 輕量級
2.bootsrap 因為成熟，所以使用方便，但是同時也是因為成熟，就顯得有些冗余
2.2 layui和easyui對比
1.easyui 是非開源的，有需要解決的問題的話，就只能等官方更新了
2.layui是開源的，社區(qū)比較活躍，解決問題還是比較快的
3.easyui誕生的早些，所以功能相對完善一些，很多功能都能是比較健全的
4.layui就相對來說少一些了，不過，功能都是像官網(wǎng)說的，精雕細琢
5.layui更符合現(xiàn)在的審美
3.layui入門
將layui下載到了本地，那么可將其完整地放置到你的項目目錄（或靜態(tài)資源服務(wù)器），并在頁面中分別引入：
3.1 路徑問題
1） 相對路徑/絕對路徑
2） base標(biāo)簽
入門案例：點擊彈出框
4.如何擴展一個layui(自定義模塊) 參考 模塊規(guī)范
1）第一步:確認模塊名，假設(shè)為：test.js文件放入項目任意目錄下（注意：不用放入layui目錄）
2）編寫test.js
layui.define(function(exports){ //提示：模塊也可以依賴其它模塊，如：layui.define(‘layer’, callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||‘test’));
}
};
//輸出test接口
exports('test', obj);
});
3）設(shè)定擴展模塊所在的目錄，然后就可以在別的JS文件中使用
layui.config({
base: ‘/res/js/’ //假設(shè)這是test.js所在的目錄
}).extend({ //設(shè)定模塊別名
test: ‘test’ //如果test.js是在根目錄，也可以不用設(shè)定別名
});
//使用test
layui.use(‘test’, function(){
var test = layui.test;
test.hello('World!'); //彈出Hello World!
});
案例：
1）彈出hello方法
2）日期格式轉(zhuǎn)換
4.構(gòu)建登錄頁面
登錄的JSP頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file = "common/header.jsp" %>
<!DOCTYPE html PUBLIC >
<html>
<head>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>會員登錄-演示網(wǎng)站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
<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">
<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="#" 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>
<script>
//一般直接寫在一個js文件中
layui.use(['layer', 'jquery'], function(){
var layer = layui.layer
,$ = layui.jquery;
$("#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("登錄成功",{icon:6});
}else{
layer.alert("登錄失敗，賬號密碼錯誤",{icon:5});
}
}
})
})
});
</script>
</body>
</html>
用戶實體類
package com.zking.entity;
public class User {
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;
}
private long id ;
private String name ;
private String loginName ;
private String pwd ;
private long rid ;
public User() {
// TODO Auto-generated constructor stub
}
public User(String name, String loginName, String pwd, long rid) {
super();
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;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
}
}
用戶的dao方法(增加，查詢)
package com.zking.dao;
import java.util.List;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class UserDao extends BaseDao<User> {
public User login(User user) throws Exception {
String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
List<User> executeQuery = super.executeQuery(sql, User.class, null);
if(executeQuery!=null && executeQuery.size()==1) {
return executeQuery.get(0);
}
return null;
}
public int registered(User user) throws Exception {
String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,?)";
return executeUpdate(sql, user,new String[] {"name","loginName","pwd","rid"});
}
public static void main(String[] args) {
try {
System.out.println(new UserDao().registered(new User("1", "1", "1", 4)));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
用UserAction類
package com.zking.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
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 u = ud.login(user);
ResponseUtil.writeJson(resp, u);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void registered(HttpServletRequest req, HttpServletResponse resp) {
try {
int n = ud.registered(user);
if(n>0) {
ResponseUtil.writeJson(resp, n);
}
ResponseUtil.writeJson(resp, null);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
public User getModel() {
return user;
}
}
5.構(gòu)建注冊頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file = "common/header.jsp" %>
<!DOCTYPE html PUBLIC >
<html>
<head>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>會員登錄-演示網(wǎng)站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
<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">
<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="name" placeholder="姓名" class="tx-input"></p></li>
<li class="col-24 col-m-24"><p><input type="text" id="rid" placeholder="職位選擇" class="tx-input"></p></li>
<li class="col-24 col-m-24"><p><input type="text" id="loginName" 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="#" 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>
<script>
//一般直接寫在一個js文件中
layui.use(['layer', 'jquery'], function(){
var layer = layui.layer
,$ = layui.jquery;
$("#login").click(function(){
$.ajax({
url:"${pageContext.request.contextPath }/user.action?methodName=registered",
dataType:'json',
data:{
name:$("#name").val(),
loginName:$("#loginName").val(),
pwd:$("#password").val() ,
rid:$("#rid").val()
},
method:'post',
success:function(data){
if(data){
layer.alert("注冊成功",{icon:6});
}else{
layer.alert("注冊失敗",{icon:5});
}
}
})
})
});
</script>
</body>
</html>
(注冊的方法和UserAction在上方哦)文章來源：http://www.zghlxwxcb.cn/news/detail-566790.html
6.總結(jié)
總而言之，Layui為開發(fā)人員提供了一套簡單而強大的工具和樣式，使得登錄和注冊功能的實現(xiàn)變得高效、美觀和易用。它的豐富功能和良好的交互體驗可以提升用戶的登錄和注冊體驗，為網(wǎng)站或應(yīng)用程序的用戶身份驗證等關(guān)鍵功能提供可靠支持。文章來源地址http://www.zghlxwxcb.cn/news/detail-566790.html
到了這里，關(guān)于“Layui用戶認證：實現(xiàn)安全高效的登錄和注冊體驗”的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
