本期精彩：使用前端框架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是在根目录，也可以不用设定别名
});
//使用test
layui.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();
//循环ResultSet
while(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;
}
@Override
public 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、最终效果
登陆成功时👇
登陆失败时👇
7210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
