功能需求
用户在市场活动明细页面,输入备注内容,点击"保存"按钮,完成添加市场活动备注的功能.
*备注内容不能为空
*添加成功之后,清空输入框,刷新备注列表
*添加失败,提示信息,输入框不清空,列表也不刷新
功能分析
流程图
代码实现
一、ActivityRemarkMapper
1.ActivityRemarkMapper接口
/**
* 增加备注信息
*/
int insertActivityRemark (ActivityRemark remark);
2.ActivityRemarkMapper映射文件
<!--insertActivityRemark-->
<insert id="insertActivityRemark">
insert into tbl_activity_remark (id, note_content, create_time,
create_by,edit_flag,activity_id)
values (#{id}, #{noteContent}, #{createTime},
#{createBy}, #{editFlag},#{activityId})
</insert>
二、ActivityRemarkService
/**
* 增加市场活动备注
*/
int saveCreateActivityRemark(ActivityRemark activityRemark);
@Override
public int saveCreateActivityRemark(ActivityRemark remark) {
return activityRemarkMapper.insertActivityRemark(remark);
}
三、ActivityRemarkController
@RequestMapping("/workbench/activity/saveCreateActivityRemark.do")
public @ResponseBody
Object saveCreateActivityRemark(ActivityRemark remark, HttpSession session) {
// 获取session
User user = (User)session.getAttribute(Contants.SESSION_USER);
// 封装参数
remark.setId(UUIDUtils.getUUID());
remark.setCreateTime(DateUtils.formateDateTime(new Date()));
remark.setCreateBy(user.getId());
remark.setEditFlag(Contants.RETURN_OBJECT_CODE_FAIL);
// 调用service
ReturnObject returnObject = new ReturnObject();
try {
int ret = activityRemarkService.saveCreateActivityRemark(remark);
if (ret>0){
//成功
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
returnObject.setRetDate(remark);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统繁忙,稍后再试");
}
} catch (Exception e) {
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统繁忙,稍后再试");
}
return returnObject;
}
四、前端
2.detail.jsp
通过ajax发起异步请求,然后根据响应的data,进行备注的字符串拼接
// 创建备注
$("#saveBtn").click(function () {
// 获取参数
var noteContent = $("#remark").val();
var activityId = '${activity.id}';// 从request请求域
if (noteContent == "") {
alert("请输入备注内容");
return;
}
// 发送请求
$.ajax({
url: 'workbench/activity/saveCreateActivityRemark.do',
data: {
noteContent: noteContent,
activityId: activityId
},
type: 'post',
// 处理响应
dataType: 'json',
success: function (data) {
if (data.code = "1") {
// 成功
// 清空
$("#remark").val("");
// 生成评论
var htmlStr = "";
htmlStr+="<div id=\"div_"+data.retDate.id+"\" class=\"remarkDiv\" style=\"height: 60px;\">";
htmlStr+="<img title=\"${sessionScope.sessionUser.name}\" src=\"image/user-thumbnail.png\" style=\"width: 34px; height:34px;\">";
htmlStr+="<div style=\"position: relative; top: -40px; left: 40px;width: 870px; \">";
htmlStr+="<small style=\"color: gray;\">@${sessionScope.sessionUser.name}:"+data.retDate.createTime+"创建</small>";
htmlStr+="<p>"+data.retDate.noteContent+"</p>";
htmlStr+="<div style=\"position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;\">";
htmlStr+="<a class=\"myHref\" name=\"editA\" remarkId=\""+data.retDate.id+"\" href=\"javascript:void(0);\"><span class=\"glyphicon glyphicon-edit\" style=\"font-size: 20px; color: #E6E6E6;\"></span></a>";
htmlStr+=" ";
htmlStr+="<a class=\"myHref\" name=\"deleteA\" remarkId=\""+data.retDate.id+"\" href=\"javascript:void(0);\"><span class=\"glyphicon glyphicon-remove\" style=\"font-size: 20px; color: #E6E6E6;\"></span></a>";
htmlStr+=" </div>";
htmlStr+=" </div>";
htmlStr+=" </div>";
$("#remarkDiv").before(htmlStr); // 以追加的方式增加备注
} else {
alert(data.message);
}
}
});
});