🥳🥳Welcome Huihui's Code World ! !🥳🥳
接下来看看由辉辉所写的关于OA项目的相关操作吧
目录
🥳🥳Welcome Huihui's Code World ! !🥳🥳
一.主要功能点介绍
二.效果展示
三.前端代码
jsp
js
四.后端代码
实体类
dao
web
五.String转Date
六.多功能下拉框详细介绍
1.网站下载地址
2.使用步骤
3.效果演示
一.主要功能点介绍
①将表单中的信息提交后新增到t_oa_meeting_info表中去
②参与人员需要通过查询回显
③列席人员需要通过查询回显
⭐⭐④参与人员和列席人员都需要使用下拉复选框，把选中的id插入到t_oa_meeting_info中去
二.效果展示
三.前端代码
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <html> <head> <%@include file="/common/head.jsp"%> <script type="text/javascript"src="/LayUi/static/js/meeting/addMeeting.js"></script></head> <body style="margin-left: 40px; margin-right: 80px;"><form class="layui-form" action=""><!--会议标题 --><div class="layui-form-item"><label class="layui-form-label">会议标题</label><div class="layui-input-block"><input type="text" name="title" lay-verify="title"autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><!-- 会议内容 --><div class="layui-form-item layui-form-text"><label class="layui-form-label">会议内容 </label><div class="layui-input-block"><textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea></div></div><!-- 参与者 --><div class="layui-form-item"><label class="layui-form-label">参与者</label><div class="layui-input-block"><select name="canyuze" xm-select="canyuze" ><option value="" selected="selected">----请选择----</option></select></div></div><!-- 列席者 --><div class="layui-form-item"><label class="layui-form-label">列席者</label><div class="layui-input-block"><select name="liexize" xm-select="liexize" ><option value="" selected="selected">----请选择----</option></select></div></div><!--主持人：拿到当前登录的用户 --><div class="layui-form-item"><label class="layui-form-label">主持人</label><div class="layui-input-block"><input type="text" readonly="readonly" name="zhuchirenname" value="${user.name }" autocomplete="off" placeholder="请输入标题" class="layui-input"><input type="hidden" name="zhuchiren" value="${user.id }"/></div></div><!--会议地点 --><div class="layui-form-item"><label class="layui-form-label">会议地点</label><div class="layui-input-block"><input type="text" name="location" lay-verify="title"placeholder="请输入地点" autocomplete="off" class="layui-input"></div></div><!-- 会议时间 --><div class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">日期范围</label><div class="layui-inline" id="test6"><div class="layui-input-inline"><input type="text" autocomplete="off" id="startTime"class="layui-input" placeholder="开始日期" name="startTime"></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><input type="text" autocomplete="off" id="endTime"class="layui-input" placeholder="开始日期" name="endTime"></div></div></div></div></div><!-- 备注--><div class="layui-form-item layui-form-text"><label class="layui-form-label">备注 </label><div class="layui-input-block"><textarea placeholder="请输入内容" name="remark" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><button class="layui-btn" id="btn_submit" lay-submit="" lay-filter="addmeeting">提交</button><button class="layui-btn layui-btn-primary" lay-filter="reset">重置</button></div></body> </html>js
let $, formSelects, laydate,form; layui.use([ 'jquery', 'formSelects', 'laydate','form' ], function() {$ = layui.jquery, formSelects = layui.formSelects, laydate = layui.laydate,form=layui.form;initForm();//初始化表单//监听提交form.on('submit(addmeeting)', function(data){let rs = data.field;console.log("rs",rs);rs["methodName"]="add";$.post("meetingInfo.action", rs, function(data){console.log("data",data)layer.alert(data.msg+"🥳🥳", {icon: 1})}, "json");return false;});//日期范围laydate.render({elem : '#test6'//设置开始日期、日期日期的 input 选择器//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可,type:"datetime",range : [ '#startTime', '#endTime' ],});});//初始化表单 function initForm(){ // 添加多功能下拉框选项//第一个参数：指的是下拉框的xm-select值，//第二个参数：select是指全选//第三个参数：remove是指移除//第四个参数：reverse是指反选formSelects.btns('canyuze', [ 'select', 'remove', 'reverse' ]);formSelects.btns('liexize', [ 'select', 'remove', 'reverse' ]);$.getJSON("user.action", {methodName : "selectusers"}, function(rs) {console.log(rs);//使用本地的数组数据进行绑定formSelects.data('canyuze', 'local', {arr : rs.data});formSelects.data('liexize', 'local', {arr : rs.data});}); }
四.后端代码
实体类
package com.wh.entity;import java.util.Date;public class MeetingInfo { private long id; private String title; private String content; private String canyuze; private String liexize; private String zhuchiren; private String location; private Date startTime; private Date endTime; private String fujian; private int state; private String seatPic; private String remark; private String auditor;public MeetingInfo() {// TODO Auto-generated constructor stub }public MeetingInfo(long id, String title, String content, String canyuze, String liexize, String zhuchiren,String location, Date startTime, Date endTime, String fujian, int state, String seatPic, String remark,String auditor) {super();this.id = id;this.title = title;this.content = content;this.canyuze = canyuze;this.liexize = liexize;this.zhuchiren = zhuchiren;this.location = location;this.startTime = startTime;this.endTime = endTime;this.fujian = fujian;this.state = state;this.seatPic = seatPic;this.remark = remark;this.auditor = auditor; }public MeetingInfo(String title, String content, String canyuze, String liexize, String zhuchiren, String location,Date startTime, Date endTime, String fujian, int state, String seatPic, String remark, String auditor) {super();this.title = title;this.content = content;this.canyuze = canyuze;this.liexize = liexize;this.zhuchiren = zhuchiren;this.location = location;this.startTime = startTime;this.endTime = endTime;this.fujian = fujian;this.state = state;this.seatPic = seatPic;this.remark = remark;this.auditor = auditor; }public long getId() {return id; }public void setId(long id) {this.id = id; }public String getTitle() {return title; }public void setTitle(String title) {this.title = title; }public String getContent() {return content; }public void setContent(String content) {this.content = content; }public String getCanyuze() {return canyuze; }public void setCanyuze(String canyuze) {this.canyuze = canyuze; }public String getLiexize() {return liexize; }public void setLiexize(String liexize) {this.liexize = liexize; }public String getZhuchiren() {return zhuchiren; }public void setZhuchiren(String zhuchiren) {this.zhuchiren = zhuchiren; }public String getLocation() {return location; }public void setLocation(String location) {this.location = location; }public Date getStartTime() {return startTime; }public void setStartTime(Date startTime) {this.startTime = startTime; }public Date getEndTime() {return endTime; }public void setEndTime(Date endTime) {this.endTime = endTime; }public String getFujian() {return fujian; }public void setFujian(String fujian) {this.fujian = fujian; }public int getState() {return state; }public void setState(int state) {this.state = state; }public String getSeatPic() {return seatPic; }public void setSeatPic(String seatPic) {this.seatPic = seatPic; }public String getRemark() {return remark; }public void setRemark(String remark) {this.remark = remark; }public String getAuditor() {return auditor; }public void setAuditor(String auditor) {this.auditor = auditor; }@Override public String toString() {return "MeetingInfo [id=" + id + ", title=" + title + ", content=" + content + ", canyuze=" + canyuze + ", liexize="+ liexize + ", zhuchiren=" + zhuchiren + ", location=" + location + ", startTime=" + startTime+ ", endTime=" + endTime + ", fujian=" + fujian + ", state=" + state + ", seatPic=" + seatPic + ", remark="+ remark + ", auditor=" + auditor + "]"; } }dao
package com.wh.dao;import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;import com.wh.entity.MeetingInfo; import com.wh.entity.Permission; import com.wh.entity.User; import com.zking.util.BaseDao; import com.zking.util.BuildTree; import com.zking.util.PageBean; import com.zking.util.StringUtils; import com.zking.util.TreeVo;public class MeetingInfoDao extends BaseDao<MeetingInfo> {//发布会议（增加）public int add(MeetingInfo t) throws Exception {String sql = "insert into t_oa_meeting_info"+ "(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) "+ "value(?,?,?,?,?,?,?,?,?)";return super.executeUpdate(sql, t, new String[] { "title", "content", "canyuze", "liexize", "zhuchiren","location", "startTime", "endTime", "remark" });} }web
package com.wh.web;import java.util.List; import java.util.Map;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.apache.commons.beanutils.ConvertUtils;import com.wh.dao.MeetingInfoDao; import com.wh.entity.MeetingInfo; import com.wh.entity.User; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.MyDateConverter; import com.zking.util.PageBean; import com.zking.util.R; import com.zking.util.ResponseUtil; import com.zking.util.StringUtils;import java.util.Date;public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo> {private MeetingInfo meetingInfo = new MeetingInfo();private MeetingInfoDao mid = new MeetingInfoDao();// 增加public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {// 影响行数int add = mid.add(meetingInfo);if (add > 0) {ResponseUtil.writeJson(resp,R.ok(0, "发布会议成功"));} else {ResponseUtil.writeJson(resp,R.error(0, "发布会议失败"));}}@Overridepublic MeetingInfo getModel() {ConvertUtils.register(new MyDateConverter(), Date.class);return meetingInfo;}}
五.String转Date
可以看到，我们在实体类中的时间用的是Date类型，但是我们子啊表单中所获取到的数据是String类型的，如果直接将获取的数据添加到数据库中，便会报出一个异常！！
大致意思就是无法将String类型转换成Date类型
那么在这里，我们可以用到一个工具类（将转换的代码全部封装起来，那么以后在其他的地方就方便调用）
package com.zking.util;import java.text.SimpleDateFormat; import java.util.Date;import org.apache.commons.beanutils.Converter;public class MyDateConverter implements Converter {@Overridepublic Object convert(Class type, Object value) {String dateStr = (String)value;SimpleDateFormat spdt = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");try {Date date = spdt.parse(dateStr);return date;} catch (Exception e) {e.printStackTrace();}return null;} }
六.多功能下拉框详细介绍
1.网站下载地址
插件下载地址
https://github.com/hnzzmsf/layui-formSelects文档下载地址
2.使用步骤
先进入插件下载的地址
之后只需要在需要使用的jsp界面上引用就行啦！！ （这里我是把它引入到了公共页面）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <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"><!-- 引入layui的css --> <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/js//layui/css/layui.css" type="text/css" media="all"> <!-- 引入layui的js --> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script> <!-- 引入formSelects的css --> <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugin/formSelects-v4.css" /> <!-- 引入formSelects的js --> <script src="${pageContext.request.contextPath }/static/js/plugin/formSelects-v4.js" type="text/javascript" charset="utf-8"></script><base href="${pageContext.request.contextPath}/" />对了，在这里还需要说一个注意事项
我们可以看到，其中的'data'，也就是数据，它里面的数据的基本格式是name及value
但是我们的数据库中的字段与它不一样（我们的是name和id）
所以我们需要写一个sql语句，将数据库中数据转换成我们需要的数据格式！！
package com.wh.dao;import java.util.List; import java.util.Map;import com.wh.entity.User; import com.zking.util.BaseDao; import com.zking.util.PageBean; import com.zking.util.StringUtils; /*** dao层* @author W**/ public class UserDao extends BaseDao<User> {//查询用作发布会议下拉框中的数据public List<Map<String, Object>> selectusers(User user, PageBean pageBean) throws Exception {String sql="select id as value,name from t_oa_user";return super.executeQuery(sql, pageBean);} }具体使用的js代码都在前端代码中的js中了
3.效果演示
好啦，今天的分享就到这了，希望能够帮到你呢！😊😊
![[极客大挑战 2019]PHP（反序列化）](https://img-blog.csdnimg.cn/ed7befb0d79847128e142421ffda6f4b.png)
