功能需求

用户在市场活动明细页面,输入备注内容,点击"保存"按钮,完成添加市场活动备注的功能.

         *备注内容不能为空

         *添加成功之后,清空输入框,刷新备注列表

         *添加失败,提示信息,输入框不清空,列表也不刷新

功能分析

流程图

 代码实现

一、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);

	@Overridepublic int saveCreateActivityRemark(ActivityRemark remark) {return activityRemarkMapper.insertActivityRemark(remark);}

三、ActivityRemarkController

	@RequestMapping("/workbench/activity/saveCreateActivityRemark.do")public @ResponseBodyObject saveCreateActivityRemark(ActivityRemark remark, HttpSession session) {// 获取sessionUser 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);// 调用serviceReturnObject 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+="&nbsp;&nbsp;&nbsp;&nbsp;";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);}}});});