note_cloud--删除笔记功能

笔记的删除功能

发送Ajax请求

• 绑定事件:监听alert页面创建按钮(给按钮增加ID:deleteNote)

  $("#can").on("click","#deleteNote",function(){});
  

• 获取参数:笔记ID

  var $li=$("#note_ul a.checked").parent();
  var noteId=$li.data("noteId");
  

• 发送请求: /note/delete.do

服务器处理

• DeleteNoteController.execute(String noteId)

• NoteService.deleteNote(String noteId);

• NoteDao.update(String noteId)

• Mapper:

  <update id="update" parameterType="String">
  update cn_note
      set cn_note_status_id='2'
  where cn_note_id=#{id}
  </update>

Ajax回调处理

• success:

  1. 删除笔记列表中的li元素

  2. 提示:笔记删除成功

     success:function(result){ if(result.state==0){ $li.remove(); alert("删除笔记成功"); } }

• error:提示笔记删除失败

----------------------------------------------------------------------------------------

代码如下：

----------------------------------------------------------------------------------------

Dao接口：

//删除笔记(本质是修改cn_note_status_id =2)
public int update(String noteId);

返回int值，若为1，则表示更新成功

----------------------------------------------------------------------------------------

映射文件：

<!-- 删除笔记(本质是修改cn_note_status_id =2) -->
  <update id="update" parameterType="string">
  	update cn_note set cn_note_status_id = '2' where cn_note_id = #{id}
  </update>

----------------------------------------------------------------------------------------

业务层接口：

//删除笔记(本质是修改cn_note_status_id =2)
public NoteResult<Object> deleteNote(String noteId);

----------------------------------------------------------------------------------------

业务层实现类：

//删除笔记(本质是修改cn_note_status_id =2)
public NoteResult<Object> deleteNote(String noteId) {
	NoteResult<Object> result = new NoteResult<Object>();
	int rows = dao.update(noteId);
	if(rows == 0){
		result.setStatus(1);
		result.setMsg("删除笔记失败");
		return result;
	}
	result.setStatus(0);
	result.setMsg("删除笔记成功");
	return result;
}

----------------------------------------------------------------------------------------

控制层Controller：

package cn.tedu.cloud_note.controller;

import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.tedu.cloud_note.service.NoteService;
import cn.tedu.cloud_note.util.NoteResult;

@Controller
@RequestMapping("/note")
public class DeleteNoteController {
	@Resource(name="noteService")
	private NoteService service;
	
	@RequestMapping("/delete.do")
	@ResponseBody
	public NoteResult<Object> execute(String noteId){
		NoteResult<Object> result = service.deleteNote(noteId);
		return result;
	}
}

----------------------------------------------------------------------------------------

HTML部分代码：

//笔记下拉按钮的删除按钮弹出对话框
$("#note_ul").on("click",".btn_delete",alertDeleteNoteWindow);
//功能(单击删除按钮,弹出删除页面成功后弹窗提示删除成功)
$("#can").on("click","#deleteNote",deleteNote);

----------------------------------------------------------------------------------------

引用的JS代码：

//弹出删除笔记对话框
function alertDeleteNoteWindow(){
	$("#can").load("alert/alert_delete_note.html");
	$(".opacity_bg").show();
}

-----------------------------------------------------------

//删除笔记
function deleteNote(){
	//获取笔记ID
	var $li = $("#note_ul a[class='checked']").parent();
	var noteId = $li.data("noteId");
	//console.log(noteId);
	//发送ajax请求
	$.ajax({
		url:path + "/note/delete.do",
		type:"post",
		data:{"noteId":noteId},
		dataType:"json",
		success:function(result){
			if(result.status == 0){
				console.log("OOKK");
				//将笔记列表中的笔记删除
				$li.remove();
				alert(result.msg);
			}
		},
		error:function(){alert("删除笔记失败");}
	});
}

测试结果：