當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Layui的用途——用户登录界面为案例（源码）

發布時間：2023/12/20 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Layui的用途——用户登录界面为案例（源码）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 1.什么是layui

? ?layui（諧音：類 UI) 是一套開源的 Web UI 解決方案，采用自身經典的模塊化規范，并遵循原生 HTML/CSS/JS 的開發方式，極易上手，拿來即用。其風格簡約輕盈，而組件優雅豐盈，從源代碼到使用方法的每一處細節都經過精心雕琢，非常適合網頁界面的快速開發。layui 區別于那些基于 ? ?MVVM 底層的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，它更多是面向后端開發者，你無需涉足前端各種工具，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

? ?官方網站：https://www.layui.com/（已下線）
? ?參考地址：http://layui.org.cn/demo/index.html（非官網）

LayUI的開發：? ?由國人開發（作者賢心），16年出廠的框架，其主要提供了很多好看、方便的樣式，并且基本拿來即用，和Bootstrap有些相似，但該框架有個極大的好處就是定義了很多前后端交互的樣式接口，如分頁表格，只需在前端配置好接口，后端則按照定義好的接口規則返回數據，即可完成頁面的展示，極大減少了后端人員的開發成本。

?2.layui、easyui與bootstrap的對比
? ? ? 有趣的對比方式，嘿嘿嘿....
? ? ? easyui=jquery+html4（用來做后臺的管理界面）半老徐娘
? ? ? bootstrap=jquery+html5 美女拜金
? ? ? layui 清純少女

? ? ?2.1 layui和bootstrap對比（這兩個都屬于UI渲染框架）

? ? ? ? ? 1.layui是國人開發的一套框架，2016年出來的，現在已更新到2.X版本了。比較新，輕量級，樣式簡單好看（目前官網已下架，開源了）
? ? ? ? ? 2.bootstrap 相對來說是比較成熟的一個框架，現在已經更新到4.X版本。是一個很成熟的框架，這個大部分人一般都用過

?適用范圍不一樣

?? ? ? 1.layui 其實更偏向與后端開發人員使用，在服務端頁面上有非常好的效果。

???????2.適合做后臺框架

? ? ? ?3.layui是提供給后端開發人員最好的ui框架，基于DOM驅動，在實現前端交互上比較麻煩，頁面的增刪改查都需要查詢DOM元素。所以在不需要交互的時候，用layui還是不錯的（說這句話的人，只能說明你對layui不了解）
? ? ? ? ? ? ?
???????4.bootstrap 在前端響應式方面做得很好，PC端和移動端表現都不錯。
? ? ??
? ? ? ?5.適合做網站
? ? ? ? ? ? ?
? ?6.如果是類似官網，且需要同時滿足PC端和移動端效果，bootstrap 表現很好，但是如果是要交互的網站，比如商城之類，layui顯然更好，前后端分離

? ? ? ? ? 大小不一樣
? ? ? ? ? ?1.layui 輕量級
? ? ? ? ?? 2.bootsrap 因為成熟，所以使用方便，但是同時也是因為成熟，就顯得有些冗余?

? ? layui和easyui對比

?? ? ?1.easyui 是非開源的，有需要解決的問題的話，就只能等官方更新了
?? ? ?2.layui是開源的，社區比較活躍，解決問題還是比較快的
?? ? ?3.easyui誕生的早些，所以功能相對完善一些，很多功能都能是比較健全的
?? ? ?4.layui就相對來說少一些了，不過，功能都是像官網說的，精雕細琢
?? ? ?5.layui更符合現在的審美

? ?3.layui入門

? ?將layui下載到了本地，那么可將其完整地放置到你的項目目錄（或靜態資源服務器），并在頁面中分別引入：
? ?
? ?<link rel="stylesheet" href="xxx/layui.css">
? ?
? ?<script src="xxx/layui.js">

? ? ? 路徑問題

? ? ? ?1）相對路徑/絕對路徑
? ? ? ?2） base標簽

? ?入門案例：點擊彈出框 ?

layer.msg(rs.msg,{icon:5},function(){});（錯誤提醒彈框+抖動框function(){}）

? ?4.如何擴展一個layui(自定義模塊)

? ?1）第一步:確認模塊名，假設為：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）設定擴展模塊所在的目錄，然后就可以在別的JS文件中使用

? ?layui.config({
? ? ? base: '/res/js/' //假設這是test.js所在的目錄
? ?}).extend({ //設定模塊別名
? ? ? test: 'test' //如果test.js是在根目錄，也可以不用設定別名
? ?});
?
? ?//使用test
? ?layui.use('test', function(){
? ? ? var test = layui.test;
? ? ? test.hello('World!'); //彈出Hello World!
? ?});

? ?5.構建登錄頁面

? ?使用MD5對用戶密碼進行加密處理

代碼案例如下：（登錄的jsp頁面）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <html><head><%@include file="/common/head.jsp"%><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"><meta http-equiv="Content-Language" content="zh-CN"><link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all"><link rel="stylesheet" rev="stylesheet" href="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(images/bg.jpg) no-repeat 0 0;}</style><script type="text/javascript" src="js/login.js"></script></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></body> </html>

?登錄界面的js代碼：

let layer,form,$; layui.use(['layer','form','jquery'],function(){layer=layui.layer,form=layui.form,$=layui.jquery;$('#login').click(function(){$('#login').attr('disabled','disabled').css({'background':'#cccccc'});//獲取賬號let username=$('#username').val();//獲取密碼let password=$('#password').val();console.log('username=%s,password=%s',username,password);$.post('userAction.action',{'methodName':'userLogin','loginName':username,'pwd':password},function(rs){console.log(rs);if(rs.success){layer.msg('登陸成功',{icon:6},function(){location.href='index.jsp';});}else{layer.msg(rs.msg,{icon:5},function(){});$('#login').removeAttr('disabled','disabled').css({'background':'#009688'});}},'json');}); });

在Dao方法中調用MD5的方法：

/*** 新增用戶* @param user*/public void addUser(User user) {String sql="insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,?)";super.executeUpdate(sql, new Object[] {user.getName(),user.getLoginName(),new MD5().getMD5ofStr(user.getPwd()),user.getRid()});}

?在Action中實現：

/*** 用戶登錄* @param req* @param resp* @return* @throws ServerException* @throws IOException*/public String userLogin(HttpServletRequest req, HttpServletResponse resp) throws ServerException, IOException {if (StringUtils.isNullOrEmpty(user.getLoginName()) || StringUtils.isNullOrEmpty(user.getPwd())) {CommonUtils.toJson(false, "賬號或密碼不能為空", resp);} else {User u = userDao.userLogin(user);if (u == null) {CommonUtils.toJson(false, "賬號不存在", resp);} else {// 3.將前端輸入的密碼轉換成密文密碼進行比較String pwd = new MD5().getMD5ofStr(user.getPwd());if (!pwd.equals(u.getPwd())) {CommonUtils.toJson(false, "密碼錯誤！", resp);} else {HttpSession session=req.getSession();session.setAttribute("u",u); // System.out.println(u);CommonUtils.toJson(true, "ok！", resp);}}}return null;}

?登錄界面如圖所示：

? ?6.主頁搭建

? ?參考地址：http://layui.org.cn/demo/admin.html

總結

以上是生活随笔為你收集整理的Layui的用途——用户登录界面为案例（源码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。