杭州专业网站设计,做水果网站首页的图片素材,济南全网推广,外汇期货喊单网站怎么做的目录 引文1.前置条件2.数据接口2.1 UserDao(CRUD)2.2 R工具类 3.HTML 结构3.1 主界面的HTML3.2 用户的查询所有界面的HTML3.3 新增修改通用的的HTML 4.JavaScript 代码4.1 用户的CRUD javaScript 代码(userManage)4.2 新增修改的javaScript代码(userEdit) 5. 运行截图总结 引文… 目录 引文1.前置条件2.数据接口2.1 UserDao(CRUD)2.2 R工具类 3.HTML 结构3.1 主界面的HTML3.2 用户的查询所有界面的HTML3.3 新增修改通用的的HTML 4.JavaScript 代码4.1 用户的CRUD javaScript 代码(userManage)4.2 新增修改的javaScript代码(userEdit) 5. 运行截图总结 引文
本文介绍如何使用 layui 实现一个简单的增删改查会议管理系统。
1.前置条件
在开始之前确保已经引入了以下必要的文件
layui.min.css用于渲染页面样式。
jquery.min.js用于操控页面元素。
layui.min.js用于实现 layui 的组件功能。2.数据接口
首先我们需要准备一个用于 CRUD增删改查操作的后端接口
2.1 UserDao(CRUD)
package com.zking.dao;import java.sql.SQLException;
import java.util.List;
import java.util.Map;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) throws Exception {String sql select * from t_oa_user where loginNameuser.getLoginName() and pwduser.getPwd(); ListUser executeQuery super.executeQuery(sql, User.class, null);if(executeQuery!null executeQuery.size()1) {return executeQuery.get(0);}return null;}public int registered(User user) throws Exception {String sql insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,?); return executeUpdate(sql, user,new String[] {name,loginName,pwd,rid});}public ListMapString, Object userRole(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {String sql select u.*,\r\n (CASE \r\n WHEN u.rid1 THEN\r\n 管理员\r\n WHEN u.rid2 THEN\r\n 发起者\r\n WHEN u.rid3 THEN\r\n 审批者\r\n WHEN u.rid4 THEN\r\n 参与者\r\n WHEN u.rid5 THEN\r\n 会议管理员\r\n ELSE\r\n 其他\r\n END ) rname\r\n from t_oa_user u where 11 ; 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 executeUpdate(sql, user, new String[] {name,loginName,pwd});}public int del(User user) throws Exception {String sql delete from t_oa_user where id user.getId();return executeUpdate(sql, user, new String[] {});}public int edit(User user) throws Exception {String sql update t_oa_user set name ? ,loginName ?,pwd ? where id ?;return executeUpdate(sql, user, new String[] {name,loginName,pwd,id});}}
2.2 R工具类
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;}
}R工具类的使用
public ListMapString, Object userRole(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {String sql select u.*,\r\n (CASE \r\n WHEN u.rid1 THEN\r\n 管理员\r\n WHEN u.rid2 THEN\r\n 发起者\r\n WHEN u.rid3 THEN\r\n 审批者\r\n WHEN u.rid4 THEN\r\n 参与者\r\n WHEN u.rid5 THEN\r\n 会议管理员\r\n ELSE\r\n 其他\r\n END ) rname\r\n from t_oa_user u where 11 ; String name user.getName();if(StringUtils.isNotBlank(name)) {sql and name like %name%;}return super.executeQuery(sql, pageBean);}3.HTML 结构
使用 layui 的样式和组件来构建博客管理页面。
创建一个 HTML 文件并按如下结构编写页面内容
3.1 主界面的HTML
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
!DOCTYPE html PUBLIC
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
/head% include file common/header.jsp %script srcstatic/js/index.js/script
body
div classlayui-layout layui-layout-admindiv classlayui-headerdiv classlayui-logo layui-hide-xs layui-bg-blacklayout demo/div!-- 头部区域可配合layui 已有的水平导航 --ul classlayui-nav layui-layout-left!-- 移动端显示 --li classlayui-nav-item layui-show-xs-inline-block layui-hide-sm lay-header-eventmenuLefti classlayui-icon layui-icon-spread-left/i/li!-- Top导航栏 --li classlayui-nav-item layui-hide-xsa hrefnav 1/a/lili classlayui-nav-item layui-hide-xsa hrefnav 2/a/lili classlayui-nav-item layui-hide-xsa hrefnav 3/a/lili classlayui-nav-itema hrefjavascript:;nav groups/adl classlayui-nav-childdda hrefmenu 11/a/dddda hrefmenu 22/a/dddda hrefmenu 33/a/dd/dl/li/ul!-- 个人头像及账号操作 --ul classlayui-nav layui-layout-rightli classlayui-nav-item layui-hide layui-show-md-inline-blocka hrefjavascript:;img src//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg classlayui-nav-imgtester/adl classlayui-nav-childdda hrefYour Profile/a/dddda hrefSettings/a/dddda hreflogin.jspSign out/a/dd/dl/lili classlayui-nav-item lay-header-eventmenuRight lay-unselecta hrefjavascript:;i classlayui-icon layui-icon-more-vertical/i/a/li/ul/divdiv classlayui-side layui-bg-blackdiv classlayui-side-scroll!-- 左侧导航区域可配合layui已有的垂直导航 --ul idmenu classlayui-nav layui-nav-tree lay-filtermenu/ul/div/divdiv classlayui-bodydiv classlayui-tab lay-filterdemo lay-allowclosetrueul classlayui-tab-titleli classlayui-this lay-id11用户管理/li/uldiv classlayui-tab-contentdiv classlayui-tab-item layui-show iframe frameborder0 srcjsp/system/userManage.jsp scrollingauto stylewidth:100%;height:100%;/iframe/div/div/div/divdiv classlayui-footer!-- 底部固定区域 --底部固定区域/div
/div/body
/html3.2 用户的查询所有界面的HTML
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%% include file /common/header.jsp %
!DOCTYPE html PUBLIC
html
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
script src static/js/system/userManage.js/script
/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 classlayui-hide idtest lay-filtertest/tablescript typetext/html idtoolbarDemodiv classlayui-btn-containerbutton classlayui-btn layui-btn-sm lay-eventgetCheckData获取选中行数据/buttonbutton classlayui-btn layui-btn-sm lay-eventgetCheckLength获取选中数目/buttonbutton classlayui-btn layui-btn-sm lay-eventisAll验证是否全选/button/div
/scriptscript typetext/html idbarDemoa classlayui-btn layui-btn-xs lay-eventedit编辑/aa classlayui-btn layui-btn-danger layui-btn-xs lay-eventdel删除/a
/scriptscript/script/body
/html3.3 新增修改通用的的HTML
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%% include file /common/header.jsp %
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
script typetext/javascript srcstatic/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
/html4.JavaScript 代码
使用 JavaScript 代码实现博客的增删改查功能。
在页面中引入 layui 和 jQueryrow,$并编写如下代码
4.1 用户的CRUD javaScript 代码(userManage)
var table,$,layer;
var row;
layui.use([table,jquery,layer], function(){table layui.table,$ layui.jquery,layer layui.layer;initTable();$(#btn_search).click(function(){query();})$(#btn_add).click(function(){row null;edit(新增页面)})
});function edit(title){layer.open({type: 2, //layer提供了5种层类型。可传入的值有0信息框默认1页面层2iframe层3加载层4tips层title:title,area: [660px, 340px], //宽高skin: layui-layer-rim, //样式类名content: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(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();}});}//2.表格重载
function query() {table.reload(test, {where : { // 设定异步数据接口的额外参数任意设name : $(#name).val()},request : {pageName : page // 页码的参数名称默认page,limitName : rows // 每页数据量的参数名默认limit}});
}
//1.初始化数据
function initTable(){table.render({elem: #test,url:user.action?methodNameuserRole,toolbar: #toolbarDemo //开启头部工具栏并为其绑定左侧模板,defaultToolbar: [filter, exports, print, { //自定义头部工具栏右侧图标。如无需自定义去除该参数即可title: 提示,layEvent: LAYTABLE_TIPS,icon: layui-icon-tips}],title: 用户数据表,cols: [[{type: checkbox, fixed: left},{field:id, title:ID, width:80, fixed: left, unresize: true, sort: true},{field:loginName, title:用户名, width:120, edit: text},{field:name, title:姓名, width:150, edit: text, templet: function(res){return em res.name /em}},{field:pwd, title:密码, width:80, edit: text, sort: true},{field:rname, title:角色名, width:100},{fixed: right, title:操作, toolbar: #barDemo, width:150}]],page: true});//监听行工具事件table.on(tool(test), function(obj){row obj.data;//console.log(obj)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 if(obj.event edit){edit(编辑)}});
}4.2 新增修改的javaScript代码(userEdit)
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);
}5. 运行截图 新增界面 删除界面
总结
通过本文的指导你可以快速上手使用 layui 构建会议管理系统并根据实际需求进行扩展和定制。希望本文对你有所帮助
