本期精彩：使用前端框架Layui制作常用界面，并且實現對應的功能 b（￣▽￣）d　

一、什么是Layui

是一套開源的 Web UI 解決方案，采用自身經典的模塊化規范，并遵循原生 HTML/CSS/JS 的開發方式，極易上手，拿來即用，其風格簡約輕盈，而組件優雅豐盈，從源代碼到使用方法的每一處細節都經過精心雕琢，非常適合網頁界面的快速開發

layui區別于那些基于MVVM 底層的前端框架,卻并非逆道而行,而是信奉返璞歸真之道

準確地說，它更多是面向后端開發者，你無需涉足前端各種工具，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來

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

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

二、Layui、Easyui與Bootstrap的對比

1、layui、easyui、bootstrap的對比

有趣的對比方式👇
easyui=jquery+html4（用來做后臺的管理界面） 半老徐娘，風韻猶存
bootstrap=jquery+html5 ?要錢
layui 清純少女

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

a、歷史發展對比

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

b、適用范圍對比

• layui其實更偏向與后端開發人員使用,在服務端頁面上有非常好的效果，適合做后臺框架
• layui 是提供給后端開發人員最好的ui框架，基于DOM驅動，在實現前端交互上比較麻煩，頁面的增刪改查都需要查詢DOM元素。所以在不需要交互的時候，用layui還是不錯的（說這句話的人，只能說明你對layui不了解）
• bootstrap 在前端響應式方面做得很好，PC端和移動端表現都不錯，適合做網站

如果是類似官網，且需要同時滿足PC端和移動端效果，bootstrap 表現很好，但是如果是要交互的網站，比如商城之類，layui顯然更好，前后端分離

c、大小對比

• layui 輕量級
• bootsrap 因為成熟，所以使用方便，但是同時也是因為成熟，就顯得有些冗余

3、layui和easyui對比

easyui 是非開源的，有需要解決的問題的話，就只能等官方更新了

layui是開源的，社區比較活躍，解決問題還是比較快的

easyui誕生的早些，所以功能相對完善一些，很多功能都能是比較健全的

layui就相對來說少一些了，不過，功能都是像官網說的，精雕細琢

layui更符合現在的審美

三、Layui的使用

使用前的引入?

第一步：?將layui下載到本地

第二步：將其完整地放置到你的項目目錄（或靜態資源服務器）

?第三步：并在頁面中分別引入👇

<!-- 引入 layui.css --><link rel="stylesheet" href="xxx/layui.css"><!-- 引入 layui.js --><script src="xxx/layui.js">

擴展一個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是在根目錄，也可以不用設定別名});//使用testlayui.use('test', function(){var test = layui.test;test.hello('World!'); //彈出Hello World!});

四、登陸界面及功能的制作?

1、導入相關jar包
?

2、代碼的編寫

• 為了方便后續的導入和使用，我們可以將導入Layui的代碼和一些其他的公共方法等封裝在一個通用幫助類CommonUtils中👇?

public class CommonUtils {public static void toJson(String code,String msg,HttpServletResponse resp) {try {ObjectMapper mapper=new ObjectMapper();Map<String,Object> json=new HashMap<String,Object>();json.put("code", code);json.put("msg", msg);mapper.writeValue(resp.getOutputStream(), json);} catch (Exception e) {e.printStackTrace();}} public static void toJson(String code,Object data,HttpServletResponse resp) {try {ObjectMapper mapper=new ObjectMapper();Map<String,Object> json=new HashMap<String,Object>();json.put("code", code);json.put("data", data);mapper.writeValue(resp.getOutputStream(), json);} catch (Exception e) {e.printStackTrace();}} public static void toJson(String code,int total,Object data,HttpServletResponse resp) {try {ObjectMapper mapper=new ObjectMapper();Map<String,Object> json=new HashMap<String,Object>();json.put("code", code);json.put("data", data);json.put("total",total);mapper.writeValue(resp.getOutputStream(), json);} catch (Exception e) {e.printStackTrace();}} /*** 根據ResultSet數據集，利用反射機制動態賦值并返回List<T>* @param rs ResultSet數據集* @param clazz 實體類對象* @return 返回List實體集合* @throws Exception*/public static <T> List<T> toList(ResultSet rs,Class<T> clazz) throws Exception{//定義實體集合List<T> lst=new ArrayList<T>();//獲取ResultSet的metadata列信息ResultSetMetaData metaData = rs.getMetaData();//獲取對象屬性集合Field[] fields=clazz.getDeclaredFields();//循環ResultSetwhile(rs.next()) {//反射機制實例化T obj = clazz.newInstance();for (int i = 0; i < metaData.getColumnCount(); i++) {//獲取列名String columnName=metaData.getColumnLabel(i+1).toUpperCase();for (Field field : fields) {//判斷屬性名與列名是否相同if(field.getName().toUpperCase().equals(columnName)) {//獲取屬性對應的set方法名，方法名首字母大寫String methodName="set"+field.getName().substring(0, 1).toUpperCase()+field.getName().substring(1);//獲取屬性對應的set方法Method method = obj.getClass().getDeclaredMethod(methodName, field.getType());//設置訪問權限method.setAccessible(true);//執行set方法，將數據存儲到對象中的相應屬性中method.invoke(obj, rs.getObject(columnName));break;}}}lst.add(obj);}return lst;}/*** 多表查詢時返回結果集,利用反射機制賦值 * @param rs* @return 返回List<Map<String,Object>>* @throws Exception*/public static List<Map<String,Object>> toList(ResultSet rs) throws Exception{//定義實體集合List<Map<String,Object>> lst=new ArrayList<Map<String,Object>>();//獲取ResultSet的metadata列信息 ResultSetMetaData metaData = rs.getMetaData();Map<String,Object> set=null;while(rs.next()) {set=new HashMap<String,Object>();for (int i = 0; i < metaData.getColumnCount(); i++) {String columnName=metaData.getColumnLabel(i+1);set.put(columnName, rs.getObject(columnName));}lst.add(set);}return lst;} }

• 編寫用戶實體類

public class User {private String name; private String password;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User [name=" + name + ", password=" + password + "]";} }

• 參考并使用Layui官方文檔編寫登陸界面

????????1、先封裝樣式

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <% request.setAttribute("ctx", request.getContextPath()); %> <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="${ctx}/css/iconfont.css" type="text/css" media="all"> <link rel="stylesheet" rev="stylesheet" href="${ctx}/css/login.css" type="text/css" media="all"> <link rel="stylesheet" rev="stylesheet" href="${ctx}/js/layui/css/layui.css" type="text/css" media="all"> <script type="text/javascript" src="${ctx}/js/layui/layui.js"></script> <script type="text/javascript" src="${ctx}/js/config.js"></script> <script> var ctx = "${ctx}"; </script>

? ? ? ? 2、登陸界面代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <html><head><%@include file="/common/head.jsp" %><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">layui.use(['jquery','layer'], function() {let $ = layui.jquery;let layer = layui.layer;$("#login").click(function() {$.ajax({url: ctx + "/loginAction.action?methodName=login",data: {name: $("#username").val(),password: $("#password").val()},type: 'post',dataType: 'json',success: function(resp) {if(resp.code == 1) {layer.alert('酷斃了', {icon: 1});} else {layer.alert('失敗了', {icon: 5});} }})})});</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>

3、最終效果

登陸成功時👇?

登陸失敗時👇?

?

總結

以上是生活随笔為你收集整理的使用Layui制作界面及功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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