jy-12-SPRINGMYBATIS02——云笔记06-刘苍松

云笔记

---

回收站

1. 显示回收站

原理:

1. 重构 edit.html 为回收站和回收站按钮设置ID

   重构 118 行, 设置 id='trash-bin'

   <div class="col-xs-3" style='padding:0;display:none;' id='trash-bin'>

   重构 81 行, 设置 id='trash_button'

   <div class="col-xs-4 click" id='trash_button' title='回收站'><i class='fa fa-trash-o' style='font-size:20px;line-height:31px;'></i></div>

2. 在ready方法中绑定按钮事件:

   //监听回收站按钮被点击
   $('#trash_button').click(showTrashBin);

   添加事件处理方法:

   /** 监听回收站按钮被点击 */
   function showTrashBin(){
   $('#trash-bin').show() ;
   $('#note-list').hide() ;
   //loadTrashBin(); 加载删除笔记列表
   }

2. 持久层

1. 添加数据访问方法 NoteDao

   List<Map<String, Object>> findDeleteNotesByUserId(String userId);

2. 添加SQL NoteMapper.xml

   <select id="findDeleteNotesByUserId"
   parameterType="string"
   resultType="map">
   select
   cn_note_id as id,
   cn_note_title as title
   from
   cn_note
   where
   cn_user_id = #{userId} and
   cn_note_status_id = '0'
   order by
   cn_note_last_modify_time desc
   </select>

3. 测试

   ...

3. 业务层

1. 添加业务层方法 NoteService

   List<Map<String, Object>> listNotesInTrashBin(String userId) throws UserNotFoundException;

2. 实现业务层方法 NoteServiceImpl

   public List<Map<String, Object>> listNotesInTrashBin(
   String userId) throws UserNotFoundException {
   if(userId==null||userId.trim().isEmpty()){
   throw new UserNotFoundException("ID空");
   }
   User user=userDao.findUserById(userId);
   if(user==null){
   throw new UserNotFoundException("木有人");
   }
   return noteDao.findDeleteNotesByUserId(userId);
   }

3. 测试

   ...

4. 表现层

1. 添加 loadTrashBin 方法利用Ajax加载回收站笔记列表:

   /** 加载回收站中的笔记列表 */
   function loadTrashBin(){
   var url = 'note/trash.do';
   var data = {userId: getCookie('userId')};
   $.getJSON(url, data, function(result){
   if(result.state==SUCCESS){
   showNotesInTrashBin(result.data);
   }else{
   alert(result.message);
   }
   });
   }

2. 添加显示笔记列表到回收站方法 showNotesInTrashBin

   function showNotesInTrashBin(notes){
   var ul = $('#trash-bin ul');
   ul.empty();
   for(var i=0; i<notes.length; i++){
   var note = notes[i];
   var li = trashBinItem.replace('[title]', note.title);
   li = $(li);
   li.data('noteId', note.id);
   ul.append(li);
   }
   }
   
   var trashBinItem =
   '<li class="disable">'+
   '<a><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+
   ' [title]'+
   '<button type="button" class="btn btn-default btn-xs btn_position btn_delete">'+
   '<i class="fa fa-times"></i>'+
   '</button>'+
   '<button type="button" class="btn btn-default btn-xs btn_position_2 btn_replay">'+
   '<i class="fa fa-reply"></i>'+
   '</button></a>'+
   '</li>';

   其中 trashBinItem 是回收站笔记项目的模板

3. 重构 showTrashBin 方法, 在显示回收站后加载以删除笔记列表

   /** 监听回收站按钮被点击 */
   function showTrashBin(){
   $('#trash-bin').show() ;
   $('#note-list').hide() ;
   loadTrashBin();// 加载已删除笔记列表
   }

4. 测试

   ...

---

恢复删除项目

1. 持久层, 重用 NoteDao updateNote 方法

略

2. 业务层

1. 声明业务方法 NoteService

   boolean replayNote(String noteId, String notebookId)
   
   throws NoteNotFoundException, NotebookNotFoundException;

2. 实现业务方法 NoteServiceImpl

   public boolean replayNote(String noteId, String notebookId)
   throws NoteNotFoundException, NotebookNotFoundException {
   if(noteId==null || noteId.trim().isEmpty()){
   throw new NoteNotFoundException("ID不能空");
   }
   Note note = noteDao.findNoteById(noteId);
   if(note==null){
   throw new NoteNotFoundException("没有对应的笔记");
   }
   if(notebookId==null||notebookId.trim().isEmpty()){
   throw new NotebookNotFoundException("ID空");
   }
   int n=notebookDao.countNotebookById(notebookId);
   if(n!=1){
   throw new NotebookNotFoundException("没有笔记本");
   }
   
   Note data = new Note();
   data.setId(noteId);
   data.setStatusId("1");
   data.setNotebookId(notebookId);
   data.setLastModifyTime(System.currentTimeMillis());
   
   n = noteDao.updateNote(data);
   
   return n==1;
   }

3. 测试

   ...

3. 控制器

1. 添加控制器方法 NoteController

   @RequestMapping("/replay.do")
   @ResponseBody
   public JsonResult replay(String noteId, String notebookId) {
   boolean b = noteService.replayNote(
   noteId, notebookId);
   return new JsonResult(b);
   }

2. 测试

   ...

3. 表现层

1. 在ready方法中添加事件监听方法, 打开恢复对话框:

   //恢复笔记到笔记本按钮事件监听
   $('#trash-bin').on(
   'click', '.btn_replay', showReplayDialog);

   添加事件方法

   /** 显示恢复笔记对话框 */
   function showReplayDialog(){
   var li = $(this).parent().parent()
   var id = li.data('noteId');
   
   $(document).data('replayItem', li);
   
   if(id){
   $('#can').load('alert/alert_replay.html', loadReplayOptions);
   $('.opacity_bg').show();
   return;
   }
   alert('必须选择笔记!');
   }

   提示: 需要在事件中保存 li 到 document中, 在恢复时候需利用这个li获取被恢复的笔记ID

2. 添加方法loadReplayOptions, 在显示窗口以后加载笔记本列表到恢复对话框中:

   function loadReplayOptions(){
   var url = 'notebook/list.do';
   var data={userId:getCookie('userId')};
   $.getJSON(url, data, function(result){
   if(result.state==SUCCESS){
   var notebooks = result.data;
   //清楚全部的笔记本下拉列表选项
   //添加新的笔记本列表选项
   $('#replaySelect').empty();
   var id=$(document).data('notebookId');
   for(var i=0; i<notebooks.length; i++){
   var notebook = notebooks[i];
   var opt=$('<option></option>')
   .val(notebook.id)
   .html(notebook.name);
   //默认选定当时笔记的笔记本ID
   if(notebook.id==id){
   opt.attr('selected','selected');
   }
   $('#replaySelect').append(opt);
   }
   }else{
   alert(result.message);
   }
   });
   
   }

3. 监听恢复对话框中的确定方法:

   $('#can').on('click', '.btn-replay', replayNote);

   添加事件处理方法

   function replayNote(){
   var li = $(document).data('replayItem');
   var id = li.data('noteId');
   var url = 'note/replay.do';
   var nid = $('#replaySelect').val();
   var data = {noteId: id, notebookId:nid};
   $.post(url, data, function(result){
   if(result.state==SUCCESS){
   closeDialog();
   li.slideUp(200, function(){$(this).remove()});
   }else{
   alert(result.message);
   }
   });
   }

   提示: li对象为显示对话框事件中保存到document对象的li.

   提示: li.slideUp 方法可以为删除li时候添加动画效果, 这样增加视觉效果可以提高用户的体验.

4. 测试