Layui精简版，快速入门

目录

LayUI之入门

1.什么是layui

2.layui入门

3.自定义模块

4.用户登录

5.主页搭建

LayUI之动态树

 main.jsp

main.js  

LayUI之动态选项卡

1.选项卡

main.jsp

main.js

2.用户登录

User.java

UserDao.java

UserAction.java

R.java

LayUI之用户管理

1.用户查询

2.case when的处理

UserDao.java

 UserAction.java

userManage.jsp

userManage.js

3.用户新增

UserAction.java

userManage.js

userEdit.jsp

userEdit.js

4.用户修改

5.用户删除

userManage.js

LayUI之入门

1.什么是layui

2.layui入门

3.自定义模块

参考 模块规范

4.用户登录

这里没有与数据库进行交互

5.主页搭建

参考网站布局

LayUI之动态树

思路

  1. 静态页面数据是什么样？
  2. 分析需要什么样的数据？
  3. 我们如何得到这些数据？
  4. 将现有的数据如何转换成我们需要的数据？
  5. 将具有层级关系的数据渲染成树形结构.

 main.jsp

<div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test" id="layui_menus"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;" onclick="openTab('','','')">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">menu group 2</a><dl class="layui-nav-child"><dd><a href="javascript:;">list 1</a></dd><dd><a href="javascript:;">list 2</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">click menu item</a></li><li class="layui-nav-item"><a href="">the links</a></li></ul></div></div>

此处后台代码...

main.js  

let layer,$,element;
layui.use(['jquery', 'layer', 'element'], function(){layer = layui.layer,$ = layui.jquery,element = layui.element;$.ajax({url:'${pageContext.request.contextPath }/permission.action?methodName=menus',dataType:'json',success:function(data){let htmlstr = '';let json = data.data;$.each(json,function(i,n){htmlstr += '<li class="layui-nav-item layui-nav-itemed">';htmlstr += ' <a class="" href="javascript:;">'+json[i].text+'</a>';if(json[i].hasChildren){let children = json[i].children;$.each(children,function(index,node){htmlstr += '<dl class="layui-nav-child">';htmlstr += '<dd><a href="javascript:;" onclick="openTab(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');" >'+children[index].text+'</a></dd>';htmlstr += '</dl>';});}htmlstr += '</li>';})$("#layui_menus").html(htmlstr);}});});

LayUI之动态选项卡

思路

  1. 选项卡简介
  2. 动态添加选项卡
  3. 重复选项卡的限定
  4. 切换指定选项卡
  5. 选项卡样式
  6. 用户登录-结果返回R类的增强

1.选项卡

<style>.layui-tab-title>li:first-child>i{display:none;}.layui-tab>.layui-tab-content{padding:0px;}body,html{padding:0px;margin:0px;overflow:hidden;}
</style>

main.jsp

<div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><div class="layui-tab" lay-filter="openTab" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="-1">首页</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">首页内容</div></div></div></div>

main.js

function openTab(title,url,id){let $node = $("li[lay-id='"+id+"']");if($node.length == 0){element.tabAdd('openTab', {title: title,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id})}element.tabChange('openTab', id); //切换到：用户管理
}

2.用户登录

User.java

package com.zking.entity;public class User {private Long id;private String name;private String loginName;private String pwd;private Long 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;}public User() {super();// TODO Auto-generated constructor stub}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}}

UserDao.java

package com.zking.dao;import java.util.List;import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;public class UserDao extends BaseDao<User> {public User login(User user, PageBean pageBean) throws Exception {String loginName = user.getLoginName();String pwd = user.getPwd();String sql = "select * from t_oa_user where loginname = '" + loginName + "' and pwd = '"+pwd+"'";List<User> users = super.executeQuery(sql, User.class, pageBean);return users == null || users.size() == 0 ? null : users.get(0);}
}

UserAction.java

package com.zking.web;import java.util.List;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.CommonUtils;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriver<User> {private User user = new User();private UserDao userDao = new UserDao();public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u = userDao.login(user, null);if (u != null) {ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));req.getSession().setAttribute("user", u);}else {ResponseUtil.writeJson(resp, R.error(0, "登录失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "登录失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}@Overridepublic User getModel() {return user;}
}

R.java

package com.zking.util;import java.util.HashMap;public class R extends HashMap{public R data(String key, Object value) {this.put(key, value);return this;}public static R ok(int code, String msg) {R r = new R();r.data("success", true).data("code", code).data("msg", msg);return r;}public static R error(int code, String msg) {R r = new R();r.data("success", false).data("code", code).data("msg", msg);return r;}public static R ok(int code, String msg,Object data) {R r = new R();r.data("success", true).data("code", code).data("msg", msg).data("data", data);return r;}public static R ok(int code, String msg, long count, Object data) {R r = new R();r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);return r;}
}

LayUI之用户管理

思路

  1. 用户查询
  2. 用户角色case when后台处理
  3. 用户新增
  4. 用户修改
  5. 用户删除

1.用户查询

2.case when的处理

UserDao.java

public List<User> list(User user, PageBean pageBean) throws Exception {String sql = "select * from t_oa_user where 1=1 ";String name = user.getName();if (StringUtils.isNotBlank(name))sql += " and name like '%" + name + "%'";return super.executeQuery(sql, User.class, pageBean);}public List<Map<String, Object>> listUserRole(User user, PageBean pageBean) throws Exception {String sql = "select *,\r\n" + "(case rid\r\n" + "when 1 then '管理人员'\r\n" + "when 4 then '参与者'\r\n" + "else '其他角色' end) as rname\r\n" + "from t_oa_user ";String name = user.getName();if (StringUtils.isNotBlank(name))sql += " and name like '%" + name + "%'";return super.executeQuery(sql, pageBean);}public int add(User user) throws Exception {String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});}public int edit(User user) throws Exception {String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});}public int del(User user) throws Exception {String sql = "delete from t_oa_user where id = ?";return super.executeUpdate(sql, user, new String[] {"id"});}

 UserAction.java

public String listUserRole(HttpServletRequest req, HttpServletResponse resp) {try {PageBean pageBean = new PageBean();pageBean.setRequest(req);List<Map<String, Object>> users = userDao.listUserRole(user, pageBean);
//			layui 的code 返回一定要是 0，不能是200，否者返回不了数据ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), users));} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "查询失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}

userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userManage.js"></script>
<title>用户管理</title>
</head>
<body><!-- 搜索栏 --><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用户名：</label><div class="layui-input-inline"><input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><div class="layui-input-inline"><button id="btn_search" type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-search"></i>查询</button><button id="btn_add" type="button" class="layui-btn">新增</button></div></div></div><!-- 数据表格及分页 --><table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;"></table><!-- 对话框（新增和编辑共用一个页面） --><script type="text/html" id="toolbar"><button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button><button class="layui-btn layui-btn-sm" lay-event="del">删除</button><button class="layui-btn layui-btn-sm" lay-event="reset">重置密码</button></script>
</body>
</html>

userManage.js

let layer,$,table;
layui.use(['jquery', 'layer', 'table'], function(){layer = layui.layer,$ = layui.jquery,table = layui.table;//初始化数据表格initTable();//绑定查询按钮的点击事件$('#btn_search').click(function(){query();});
});//1.初始化数据表格
function initTable(){table.render({           //执行渲染elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址height: 340,         //自定义高度loading: false,      //是否显示加载条（默认 true）cols: [[             //设置表头{field: 'id', title: '用户编号', width: 120},{field: 'name', title: '用户名', width: 120},{field: 'loginName', title: '登录账号', width: 140},{field: '', title: '操作', width: 220,toolbar:'#toolbar'},]]});}
//2.点击查询
function query(){table.reload('tb', {url: $("#ctx").val()+'/user.action',     //请求地址method: 'POST',                    //请求方式，GET或者POSTloading: true,                     //是否显示加载条（默认 true）page: true,                        //是否分页where: {                           //设定异步数据接口的额外参数，任意设'methodName':'listUserRole','name':$('#name').val()},  request: {                         //自定义分页请求参数名pageName: 'page', //页码的参数名称，默认：pagelimitName: 'rows' //每页数据量的参数名，默认：limit}});
}

3.用户新增

UserAction.java

public String add(HttpServletRequest req, HttpServletResponse resp) {try {int rs = userDao.add(user);if (rs > 0) {ResponseUtil.writeJson(resp, R.ok(200, "用户新增成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户新增失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户新增失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}public String edit(HttpServletRequest req, HttpServletResponse resp) {try {int rs = userDao.edit(user);if (rs > 0) {ResponseUtil.writeJson(resp, R.ok(200, "用户修改成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户修改失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户修改失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}public String del(HttpServletRequest req, HttpServletResponse resp) {try {int rs = userDao.del(user);if (rs > 0) {ResponseUtil.writeJson(resp, R.ok(200, "用户删除成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户删除失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户删除失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}

userManage.js

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){layer = layui.layer,$ = layui.jquery,table = layui.table;//初始化数据表格initTable();//绑定查询按钮的点击事件$('#btn_search').click(function(){query();});//绑定新增按钮的点击事件$('#btn_add').click(function(){row=null;open('新增');});
});//3.对话框
function open(title){layer.open({type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）title:title,area: ['660px', '340px'],   //宽高skin: 'layui-layer-rim',    //样式类名content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面btn:['保存','关闭'],yes: function(index, layero){//调用子页面中提供的getData方法，快速获取子页面的form表单数据let data= $(layero).find("iframe")[0].contentWindow.getData();console.log(data);//判断title标题let methodName="add";if(title=="编辑")methodName="edit";$.post($("#ctx").val()+'/user.action?methodName='+methodName,data,function(rs){if(rs.success){//关闭对话框layer.closeAll();//调用查询方法刷新数据query();}else{layer.msg(rs.msg,function(){});}},'json');},btn2: function(index, layero){layer.closeAll();}});}

userEdit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{max-height:150px;
}
</style>
<body>
<div style="padding:10px;"><form class="layui-form layui-form-pane" lay-filter="user"><input type="hidden" name="id"/><div class="layui-form-item"><label class="layui-form-label">用户名称</label><div class="layui-input-block"><input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用户角色</label><div class="layui-input-block"><select name="rid"><option value="">---请选择---</option><option value="1">管理员</option><option value="2">发起者</option><option value="3">审批者</option><option value="4">参与者</option><option value="5">会议管理员</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">登录账号</label><div class="layui-input-block"><input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">登录密码</label><div class="layui-input-block"><input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div></form>
</div>
</body>
</html>

userEdit.js

let layer,form,$;
layui.use(['layer','form','jquery'],function(){layer=layui.layer,form=layui.form,$=layui.jquery;initData();
});function initData(){console.log(parent.row);if(null!=parent.row){//因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val//parent.row：表格行对象form.val('user',$.extend({}, parent.row||{}));$('#name').attr('readonly','readonly');}
}function getData(){return form.val('user');
}

4.用户修改

5.用户删除

userManage.js

//1.初始化数据表格
function initTable(){table.render({           //执行渲染elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址height: 340,         //自定义高度loading: false,      //是否显示加载条（默认 true）cols: [[             //设置表头{field: 'id', title: '用户编号', width: 120},{field: 'name', title: '用户名', width: 120},{field: 'loginName', title: '登录账号', width: 140},{field: '', title: '操作', width: 220,toolbar:'#toolbar'},]]});//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!table.on('tool(tb)', function (obj) {row = obj.data;if (obj.event == "edit") {open("编辑");}else if(obj.event == "del"){layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){$.post($("#ctx").val()+'/user.action',{'methodName':'del','id':row.id},function(rs){if(rs.success){//调用查询方法刷新数据query();}else{layer.msg(rs.msg,function(){});}},'json');layer.close(index);});}else{}});}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/69550.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Flutter源码分析笔记：Widget类源码分析

Flutter源码分析笔记：Widget类源码分析

Flutter源码分析笔记 Widget类源码分析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/132259681 【介绍】&#x…
阅读更多...
阿里云PolarDB数据库倚天ARM架构详细介绍

阿里云PolarDB数据库倚天ARM架构详细介绍

阿里云云原生数据库PolarDB MySQL版推出倚天ARM架构&#xff0c;倚天ARM架构规格相比X86架构规格最高降价45%&#xff0c;PolarDB针对自研倚天芯片&#xff0c;从芯片到数据库内核全链路优化&#xff0c;助力企业降本增效。基于阿里云自研的倚天服务器&#xff0c;同时在数据库…
阅读更多...
【LeetCode】55. 跳跃游戏 - 贪婪算法

【LeetCode】55. 跳跃游戏 - 贪婪算法

目录标题 2023-8-10 16:27:05 55. 跳跃游戏 2023-8-10 16:27:05 class Solution {public boolean canJump(int[] nums) {int n nums.length;int arrivalLocation 0;for (int i 0; i < n; i) {if (i < arrivalLocation) {arrivalLocation Math.max(arrivalLocation,…
阅读更多...
0143 串

0143 串

目录 4.串 4.1串的定义和实现 4.2串的模式匹配 部分习题 4.串 4.1串的定义和实现 4.2串的模式匹配 部分习题 1.设有两个串S1和S2&#xff0c;求S2在S1中首次出现的位置的运算称为&#xff08;&#xff09; A.求字串 B.判断是否相等 C.模式匹配 D.连…
阅读更多...
【Linux】以太网协议——数据链路层

【Linux】以太网协议——数据链路层

链路层解决的问题 IP拥有将数据跨网络从一台主机送到另一台主机的能力&#xff0c;但IP并不能保证每次都能够将数据可靠的送到对端主机&#xff0c;因此IP需要上层TCP为其提供可靠性保证&#xff0c;比如数据丢包后TCP可以让IP重新发送数据&#xff0c;最终在TCP提供的可靠性机…
阅读更多...
【JAVA】变量的作用域与生存周期

【JAVA】变量的作用域与生存周期

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言变量的作用域变量的生命周期局部变量全局变量 前言 变量&#xff0c;我们学习过程中逃不掉的知识&#xff0c;无论在哪种语言中我们都需要学会去合理的运用它&#xff0c;今…
阅读更多...
Java学习路线来啦！看到就是赚到

Java学习路线来啦！看到就是赚到

“Java学习路线来啦”&#xff0c;Java作为一门常用的编程语言&#xff0c;因其广泛使用和应用&#xff0c;在IT行业中备受青睐。无论是初学者还是有一定基础的开发者&#xff0c;学习Java的路线和步骤都是必须的。下面小编将为大家推荐几个Java学习的必经之路。 一、Java编程基…
阅读更多...
有一种逆袭，是日复一日的自律和努力——社科院杜兰金融管理硕士

有一种逆袭，是日复一日的自律和努力——社科院杜兰金融管理硕士

毕淑敏有言“走出绝境的秘诀是拼命抖掉身上的泥土&#xff0c;使之成为自己的台阶。”当我们身处逆境之时&#xff0c;我们要学会转化和利用&#xff0c;让那些磨难成为我们成功的条件。真正的逆袭&#xff0c;不是一蹴而就的&#xff0c;是日复一日的自律和努力。杜兰大学与社…
阅读更多...
如何使用CSS实现一个纯CSS的滚动条样式？

如何使用CSS实现一个纯CSS的滚动条样式？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现自定义滚动条样式⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣…
阅读更多...
(el-Table)操作(不使用 ts)：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

(el-Table)操作(不使用 ts)：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

Ⅰ、Element-plus 提供的 Table 表格组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Table 组件情况&#xff1a; 其一、Element-ui 自提供的 Table 代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环境…
阅读更多...
【Docker】Docker使用之容器技术发展史

【Docker】Docker使用之容器技术发展史

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0…
阅读更多...
uniapp-微信小程序篇

uniapp-微信小程序篇

uniapp-微信小程序篇 一、创建项目(以Vue3TS 项目为示例) 可以通过命令行的方式创建也可以通过HBuilderX进行创建&#xff08;通过HBuilderX创建的项目建议选择最简单的模板&#xff09;&#xff0c;个人建议使用命令行方式。 (1) 命令行方式&#xff1a; npx degit dcloudio…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023