莱芜金点子最新招聘信息兼职,seo3的空间构型,游戏搜索风云榜,视频剪辑培训班目录
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.用户查询…目录
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之动态树
思路
静态页面数据是什么样分析需要什么样的数据我们如何得到这些数据将现有的数据如何转换成我们需要的数据将具有层级关系的数据渲染成树形结构. main.jsp
div classlayui-side layui-bg-blackdiv classlayui-side-scroll!-- 左侧导航区域可配合layui已有的垂直导航 --ul classlayui-nav layui-nav-tree lay-filtertest idlayui_menusli classlayui-nav-item layui-nav-itemeda class hrefjavascript:;menu group 1/adl classlayui-nav-childdda hrefjavascript:; onclickopenTab(,,)menu 1/a/dddda hrefjavascript:;menu 2/a/dddda hrefjavascript:;menu 3/a/dddda hrefthe links/a/dd/dl/lili classlayui-nav-itema hrefjavascript:;menu group 2/adl classlayui-nav-childdda hrefjavascript:;list 1/a/dddda hrefjavascript:;list 2/a/dddda href超链接/a/dd/dl/lili classlayui-nav-itema hrefjavascript:;click menu item/a/lili classlayui-nav-itema hrefthe 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?methodNamemenus,dataType:json,success:function(data){let htmlstr ;let json data.data;$.each(json,function(i,n){htmlstr li classlayui-nav-item layui-nav-itemed;htmlstr a class hrefjavascript:;json[i].text/a;if(json[i].hasChildren){let children json[i].children;$.each(children,function(index,node){htmlstr dl classlayui-nav-child;htmlstr dda hrefjavascript:; onclickopenTab(\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之动态选项卡
思路
选项卡简介动态添加选项卡重复选项卡的限定切换指定选项卡选项卡样式用户登录-结果返回R类的增强 1.选项卡
style.layui-tab-titleli:first-childi{display:none;}.layui-tab.layui-tab-content{padding:0px;}body,html{padding:0px;margin:0px;overflow:hidden;}
/style
main.jsp
div classlayui-body!-- 内容主体区域 --div stylepadding: 15px;div classlayui-tab lay-filteropenTab lay-allowclosetrueul classlayui-tab-titleli classlayui-this lay-id-1首页/li/uldiv classlayui-tab-contentdiv classlayui-tab-item layui-show首页内容/div/div/div/div
main.js
function openTab(title,url,id){let $node $(li[lay-idid]);if($node.length 0){element.tabAdd(openTab, {title: title,content: iframe frameborder0 srcurl scrollingauto stylewidth: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 BaseDaoUser {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;ListUser 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 ModelDriverUser {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之用户管理
思路
用户查询用户角色case when后台处理用户新增用户修改用户删除 1.用户查询
2.case when的处理
UserDao.java
public ListUser list(User user, PageBean pageBean) throws Exception {String sql select * from t_oa_user where 11 ;String name user.getName();if (StringUtils.isNotBlank(name))sql and name like % name %;return super.executeQuery(sql, User.class, pageBean);}public ListMapString, 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);ListMapString, 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 languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
%include file/common/head.jsp%
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
script typetext/javascript src${pageContext.request.contextPath }/static/js/system/userManage.js/script
title用户管理/title
/head
body!-- 搜索栏 --div classlayui-form-itemdiv classlayui-inlinelabel classlayui-form-label用户名/labeldiv classlayui-input-inlineinput typetext idname placeholder请输入用户名 autocompleteoff classlayui-input/div/divdiv classlayui-inlinediv classlayui-input-inlinebutton idbtn_search typebutton classlayui-btn layui-btn-normali classlayui-icon layui-icon-search/i查询/buttonbutton idbtn_add typebutton classlayui-btn新增/button/div/div/div!-- 数据表格及分页 --table idtb lay-filtertb classlayui-table stylemargin-top:-15px;/table!-- 对话框新增和编辑共用一个页面 --script typetext/html idtoolbarbutton classlayui-btn layui-btn-sm lay-eventedit编辑/buttonbutton classlayui-btn layui-btn-sm lay-eventdel删除/buttonbutton classlayui-btn layui-btn-sm lay-eventreset重置密码/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?methodNamelist, //请求地址height: 340, //自定义高度loading: false, //是否显示加载条默认 truecols: [[ //设置表头{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, //是否显示加载条默认 truepage: 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(){rownull;open(新增);});
});//3.对话框
function open(title){layer.open({type: 2, //layer提供了5种层类型。可传入的值有0信息框默认1页面层2iframe层3加载层4tips层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 methodNameadd;if(title编辑)methodNameedit;$.post($(#ctx).val()/user.action?methodNamemethodName,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 languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
%include file/common/head.jsp%
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
script typetext/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 stylepadding:10px;form classlayui-form layui-form-pane lay-filteruserinput typehidden nameid/div classlayui-form-itemlabel classlayui-form-label用户名称/labeldiv classlayui-input-blockinput typetext idname namename autocompleteoff placeholder请输入用户名 classlayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label用户角色/labeldiv classlayui-input-blockselect nameridoption value---请选择---/optionoption value1管理员/optionoption value2发起者/optionoption value3审批者/optionoption value4参与者/optionoption value5会议管理员/option/select/div/divdiv classlayui-form-itemlabel classlayui-form-label登录账号/labeldiv classlayui-input-blockinput typetext nameloginName lay-verifyrequired placeholder请输入账号 autocompleteoff classlayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label登录密码/labeldiv classlayui-input-blockinput typepassword namepwd placeholder请输入密码 autocompleteoff classlayui-input/div/div/form
/div
/body
/html
userEdit.js
let layer,form,$;
layui.use([layer,form,jquery],function(){layerlayui.layer,formlayui.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?methodNamelist, //请求地址height: 340, //自定义高度loading: false, //是否显示加载条默认 truecols: [[ //设置表头{field: id, title: 用户编号, width: 120},{field: name, title: 用户名, width: 120},{field: loginName, title: 登录账号, width: 140},{field: , title: 操作, width: 220,toolbar:#toolbar},]]});//在页面中的table中必须配置lay-filtertb_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{}});}
