目录
一、前期准备
前言：
今天小编带来的是会议OA项目功能之会议发布功能，我们今天正式进入这个会议OA项目的分享。
产品原型图：
分析得出在这个界面就是LayUi的一个表单提交的功能所以我们直接在官网中找到对应的源码就OK在这里我直接给大家准别好了这个页面的前端代码：
<%@ 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/meeting/addMeeting.js"></script>
<title>发布会议</title>
</head>
<body>
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<button id="btn_add" type="submit" class="layui-btn" lay-submit="" lay-filter="meeting">立即提交</button>
<button id="btn_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会议标题</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="required" 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 name="content" lay-verify="required" placeholder="请输入内容" 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" lay-verify="required" lay-vertype="tips">
<option value="">---请选择---</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" lay-verify="required" lay-vertype="tips">
<option value="">---请选择---</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" lay-verify="required" name="location" autocomplete="off" placeholder="请输入会议地点" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会议时间</label>
<div class="layui-input-block">
<input type="text" readonly="readonly" lay-verify="required" id="dt" name="dt" 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 name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
</div>
</div>
</form>
</body>
</html> 数据库准备：
二、后端代码
亮点功能1多功能下拉框选则layui之formSelects多选组件定义：
文档地址：https://hnzzmsf.github.io/example/example_v4.html#download
首先我们需要下载js文件以及css文件
选择下载与使用的下载地址进行下一步
选择dist我们所需要的所有文件（js/css）都在这里面
下载下来后我们得到了所需的四个文件将其导入项目当中，并在addMeeting.jsp引入
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入formSelects核心css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css" />
<!-- 引入formSelects核心js -->
<script src="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeeting.js"></script>
</head>
做好这些准备工作我们便可以根据官网的介绍，来进行我们addMeeting.js的编码工作
首先我们得看官网是怎么做多功能下拉框选择的
首先是让我们的下拉框具备多功能：全选、重置、反选
其次再是显示数据
addMeeting.js
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
//local模式
formSelects.data('canyuze', 'local', {
arr: [
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
});
})
在UserDao内增加一个查询所有用户的方法：
//查询所有用户用于绑定多功能下拉框
public List<Map<String, Object>> queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select id as value,name from t_oa_user";
return super.executeQuery(sql, pageBean);
}
UserAction对应的新增：
//查询所有用户用于绑定多功能下拉框
public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Map<String, Object>> users = userDao.queryUserAll(user, null);
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框数据查询成功",users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "多功能下拉框数据查询失败"));
} catch (Exception e2) {
e2.printStackTrace();
}
}
return null;
}有了数据的绑定那我们将js代码更新
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
//local模式
formSelects.data('canyuze', 'local', {
arr: rs.data
});
formSelects.data('liexize', 'local', {
arr: rs.data
});
})
})那么至此亮点功能1完成！
亮点功能2会议时间段的数据选择
同样我们先在官网查看源码有没有时间范围选择的组件
找到后copy源码
这里遇到一个问题，我们如何把前面（后面）的时间放在开始（结束）时间里面去？
为了方便分割，我们中间的“-”改为“至”，
官方文档显示：
接下来 如何提交form表单？
MeetingInfo实体类：
package com.zking.entity;
import java.util.Date;
/**
*
* @author 张强
*
*/
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 Integer state;
private String seatPic;
private String remark;
private String auditor;
public String getAuditor() {
return auditor;
}
public void setAuditor(String auditor) {
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 Integer getState() {
return state;
}
public void setState(Integer 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 MeetingInfo() {
super();
// TODO Auto-generated constructor stub
}
@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 + "]";
}
}
MeetingInfoDao：
package com.zking.dao;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
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) values (?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
}
}
MeetingInfoAction：
package com.zking.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
private MeetingInfo info=new MeetingInfo();
private MeetingInfoDao infoDao=new MeetingInfoDao();
@Override
public MeetingInfo getModel() {
return info;
}
// 增加会议
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs是sql语句执行的影响行数
int rs = infoDao.add(info);
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 e2) {
e2.printStackTrace();
}
}
return null;
}
}
mvc.xml多加一行
<action path="info" type="com.zking.web.MeetingInfoAction"> </action>但是在这里我们提交报错：
原因是因为我们增加会议的时间为date类型，而我们实际request提价的所有表单为String类型所以转换错误我们需要接住一个工具类进行转换
package com.zking.util;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.apache.commons.beanutils.Converter;
public class MyDateConverter implements Converter {
@Override
public 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;
}
}
在MeetingInfoAction里面 注册一个转接器：
@Override
public MeetingInfo getModel() {
//注册一个转接器
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
}在这时我们点击提交变会成功了！
至此会议Oa项目的发布会议功能就完成了！
三、前端代码
扫一扫
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
