云笔记

回收站

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>

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

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

添加事件处理方法:

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

2. 持久层

添加数据访问方法 NoteDao

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

添加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. 业务层

添加业务层方法 NoteService

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

实现业务层方法 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);
}

测试
```
...
```

4. 表现层

添加 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);
}
});
}

添加显示笔记列表到回收站方法 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 是回收站笔记项目的模板

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

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

测试
```
...
```

恢复删除项目

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

略

2. 业务层

声明业务方法 NoteService

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

实现业务方法 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. 控制器

添加控制器方法 NoteController

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

测试
```
...
```

3. 表现层

在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

添加方法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);
}
});}

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

$('#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时候添加动画效果, 这样增加视觉效果可以提高用户的体验.

测试

jy-12-SPRINGMYBATIS02——云笔记06-刘苍松相关推荐

jy-10-SPRINGMYBATIS01——MyBatis-程祖红／刘苍松
目录: 1.day01-MyBatis-程祖红 2.day07-MyBatis-刘苍松文件已上传分享 3.day08-SSM-刘苍松文件已上传分享 @程祖红 1.day01-MyBatis (1) ...
狂神SpringBoot学习笔记12天-Day 06 基于SpringBoot的员工管理系统
6.基于SpringBoot的员工管理系统写在前面参考CSDN博主Baret-H 原文链接(77条消息) 狂神Spring Boot 员工管理系统超详细完整实现教程(小白轻松上手~)_Baret ...
电路b-3—06刘晏辰
本次实验目的是打印出电容电压uc(t)的变化曲线. 1.打开PSpiceA/D 2.新建一个textfile,输入文件. EX3 VS 1 0 10 R1 1 2 20 R2 2 0 20 R3 3 ...
Django小项目：云笔记项目
云笔记项目云笔记项目项目准备 shell操作 settings.py 用户注册模块用户登录模块网站首页笔记模型模块列表页注册后台项目部署云笔记项目云笔记项目 - 功能拆解用户模块 ...
【跃迁之路】【495天】程序员高效学习方法论探索系列（实验阶段252-2018.06.15）...
@(跃迁之路)专栏实验说明从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长实验期2年(2017.10.06 - 2019.10.06) 我将以自己为实验对象. ...
【跃迁之路】【578天】程序员高效学习方法论探索系列（实验阶段335-2018.09.06）...
[跃迁之路][578天]程序员高效学习方法论探索系列(实验阶段335-2018.09.06) @(跃迁之路)专栏 [跃迁之路]奖励金计划正式开始从2018.7.1起,[跃迁之路]奖励金计划正式起航, ...
【log】12/11 checking project：(Laravel)snsTest
为什么80%的码农都做不了架构师?>>> 环境准备以及laravel安装 (Laravel 安装指南) composer create-project laravel/lara ...
【跃迁之路】【674天】程序员高效学习方法论探索系列（实验阶段431-2018.12.19）...
@(收集箱(每日一记,每周六整理))专栏实验说明从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长实验期2年(2017.10.06 - 2019.10.06) ...
【跃迁之路】【658天】程序员高效学习方法论探索系列（实验阶段415-2018.12.02）...
@(收集箱(每日一记,每周六整理))专栏实验说明从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长实验期2年(2017.10.06 - 2019.10.06) ...
【跃迁之路】【678天】程序员高效学习方法论探索系列（实验阶段435-2018.12.23）...
@(收集箱(每日一记,每周六整理))专栏实验说明从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长实验期2年(2017.10.06 - 2019.10.06) ...

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

云笔记

回收站