184云笔记项目.docx

2.在ready方法中绑定触发事件

//绑定笔记子菜单的触发事件$（'#note-list'）.on（'click','.btn-note-menu',showNoteMenu）;

3.添加事件处理方法

/**显示笔记子菜单处理方法*/functionshowNoteMenu（）{//找到菜单对象,调用show（）方法varbtn=$（this）;//如果当前是被选定的笔记项目就弹出子菜单btn.parent（'.checked'）.next（）.toggle（）;//btn.parent（'.checked'）获取当前按钮的父元素//这个元素必须符合选择器'.checked',如果不//符合就返回空的JQuery元素.returnfalse;//阻止点击事件的继续传播!

避免传播到document对象时候,触发关闭菜单事件}

4.ready方法中绑定document的点击事件,利用事件冒泡关闭子菜单

//监听整体的文档区域,任何位置点击都要关闭笔记子菜单$（document）.click（hideNoteMenu）;

5.添加事件处理方法关闭子菜单

/**关闭笔记子菜单事件处理方法*/functionhideNoteMenu（）{$（'.note_menu'）.hide（）;}

移动笔记功能

原理:

1.持久层:

重用NoteDao.updateNote方法

略...

2.业务层

1.业务层方法NoteService

booleanmoveNote（StringnoteId,StringnotebookId）throwsNoteNotFoundException,NotebookNotFoundException;

2.实现业务层方法:

NoteServiceImpl

publicbooleanmoveNote（StringnoteId,StringnotebookId）throwsNoteNotFoundException,NotebookNotFoundException{if（noteId==null||noteId.trim（）.isEmpty（））{thrownewNoteNotFoundException（"ID不能空"）;}Notenote=noteDao.findNoteById（noteId）;if（note==null）{thrownewNoteNotFoundException（"没有对应的笔记"）;}if（notebookId==null||notebookId.trim（）.isEmpty（））{thrownewNotebookNotFoundException（"ID空"）;}intn=notebookDao.countNotebookById（notebookId）;if（n!

=1）{thrownewNotebookNotFoundException（"没有笔记本"）;}Notedata=newNote（）;data.setId（noteId）;data.setNotebookId（notebookId）;data.setLastModifyTime（System.currentTimeMillis（））;n=noteDao.updateNote（data）;returnn==1;}

3.测试

3.表现层

1.在ready方法中监听移动按钮点击事件打开对话框

//监听笔记子菜单中移动按钮的点击$（'#note-list'）.on（'click','.btn_move',showMoveNoteDialog）;

2.添加事件处理方法,打开对话框,打开对话框以后加载笔记本下拉列表

/**显示移动笔记对话框*/functionshowMoveNoteDialog（）{varid=$（document）.data（'note'）.id;if（id）{$（'#can'）.load（'alert/alert_move.html',loadNotebookOptions）;$（'.opacity_bg'）.show（）;return;}alert（'必须选择笔记!

'）;}

3.添加加载笔记本列表事件方法

/**加载移动笔记对话框中的笔记本列表*/functionloadNotebookOptions（）{varurl='notebook/list.do';vardata={userId:

getCookie（'userId'）};$.getJSON（url,data,function（result）{if（result.state==SUCCESS）{varnotebooks=result.data;//清楚全部的笔记本下拉列表选项//添加新的笔记本列表选项$（'#moveSelect'）.empty（）;varid=$（document）.data（'notebookId'）;for（vari=0;i'）.val（notebook.id）.html（notebook.name）;//默认选定当时笔记的笔记本IDif（notebook.id==id）{opt.attr（'selected','selected'）;}$（'#moveSelect'）.append（opt）;}}else{alert（result.message）;}}）;}

4.在ready方法中监听移动笔记对话框中的确定按钮

//监听移动笔记对话框中的确定按钮$（'#can'）.on（'click','.move-note',moveNote）;

重构alert_move.html,在确定按钮上增加类move-note

确定

5.添加移动笔记对话框确认事件:

/**移动笔记事件处理方法*/functionmoveNote（）{varurl='note/move.do';varid=$（document）.data（'note'）.id;varbookId=$（'#moveSelect'）.val（）;//笔记本ID没有变化,就不移动了!

if（bookId==$（document）.data（'notebookId'））{return;}vardata={noteId:

id,notebookId:

bookId};$.post（url,data,function（result）{if（result.state==SUCCESS）{//移动成功,在当前笔记列表中删除移动的笔记//将笔记列表中的第一个设置为当前笔记,否则清空边编辑区域varli=$（'#note-list.checked'）.parent（）;varlis=li.siblings（）;if（lis.size（）>0）{lis.eq（0）.click（）;}else{$（'#input_note_title'）.val（""）;um.setContent（""）;}li.remove（）;closeDialog（）;//关闭对话框!

}else{alert（result.message）;}}）;}

6.测试

删除笔记功能

1.持久层

1.重用NoteDao.updateNote方法.

略

2.重构SQL,笔记本列表中显示没有删除的笔记:

NoteMapper.xml

selectcn_note_idasid,cn_note_titleastitlefromcn_notewherecn_notebook_id=#{notebookId}andcn_note_status_id='1'orderbycn_note_last_modify_timedesc

注意：

　增加了查询条件cnnotestatus_id='1'

2.业务层

1.添加业务层方法NoteService

booleandeleteNote（StringnoteId）throwsNoteNotFoundException;

2.实现业务层方法NoteServiceImpl

publicbooleandeleteNote（StringnoteId）throwsNoteNotFoundException{if（noteId==null||noteId.trim（）.isEmpty（））{thrownewNoteNotFoundException（"ID不能空"）;}Notenote=noteDao.findNoteById（noteId）;if（note==null）{thrownewNoteNotFoundException（"没有对应的笔记"）;}Notedata=newNote（）;data.setId（noteId）;data.setStatusId（"0"）;data.setLastModifyTime（System.currentTimeMillis（））;intn=noteDao.updateNote（data）;returnn==1;}

3.测试

略

3.控制器

1.添加控制器方法NoteController

@RequestMapping（"/delete.do"）@ResponseBodypublicJsonResultdelete（StringnoteId）{booleanb=noteService.deleteNote（noteId）;returnnewJsonResult（b）;}

2.测试

略

4.表现层

1.在ready方法中监听笔记子菜单中的删除按钮:

//监听笔记子菜单中删除按钮的点击$（'#note-list'）.on（'click','.btn_delete',showDeleteNoteDialog）;

添加事件处理方法

/**打开删除笔记对话框*/functionshowDeleteNoteDialog（）{varid=$（document）.data（'note'）.id;if（id）{$（'#can'）.load（'alert/alert_delete_note.html',loadNotebookOptions）;$（'.opacity_bg'）.show（）;return;}alert（'必须选择笔记!

'）;}

2.在ready中监听删除笔记对话框中的确定按钮事件

//监听删除笔记对话框中的确定按钮$（'#can'）.on（'click','.delete-note',deleteNote）;

重构alertdetetenote.html在确定按钮上增加类delete-note

删除

事件监听方法

/**删除笔记功能*/functiondeleteNote（）{varurl='note/delete.do';varid=$（document）.data（'note'）.id;vardata={noteId:

id};$.post（url,data,function（result）{if（result.state==SUCCESS）{//删除成功,在当前笔记列表中删除笔记//将笔记列表中的第一个设置为当前笔记,否则清空边编辑区域varli=$（'#note-list.checked'）.parent（）;varlis=li.siblings（）;if（lis.size（）>0）{lis.eq（0）.click（）;}else{$（'#input_note_title'）.val（""）;um.setContent（""）;}li.remove（）;closeDialog（）;//关闭对话框!

}else{alert（result.message）;}}）;}

3.测试

略...

JS面向对象编程

如何创建JS对象

1.JSON语法声明对象（直接量声明对象）

varobj={};

2.使用Object创建对象

varobj=newObject（）;

JS对象可以后期添加属性

案例

varobj={};obj.name="Tom";varobj2=newObject（）;obj2.name="Jerry";

对象特点:

1.newObject（）和JSON语法创建的对象没有差别!

oJSON语法简洁方便,更加容易使用

2.对象可以随时添加属性

o对象.属性=值

3.不存在的属性,值是undefined

oundefined相当于false,利用这个特点可以用于检测属性是否存在

if（!

obj.age）{console.log（'没有age属性'）;}if（obj.age）{console.log（'年龄:

'+obj.age）;}

4.可以随时删除对象的属性

delete对象.属性;

5.JSObject的底层本质是一个散列表!

o为对象添加属性,本质是添加了key:

value,key是属性名,value是属性值.

o访问对象属性,本质是get（key）

JS对象没有封装性可言!

因为不能完整支持面向对象3大特性,所有JS不是面向对象的编程语言!

JS对象的方法

js对象的方法,本质是一个属性,是一个值是函数对象的属性!

varobj={};obj.name="Tom";obj.who=function（）{console.log（this.name）;};

调用方法与访问属性

obj.who（）;//调用方法obj.who;访问属性的值,函数对象

可以像属性一样删除方法

deleteobj.who

可以像属性一样,修改方法!

obj.who=function（）{console.log（this.name）;};obj.who=function（）{console.log（'HelloWorld!

'）;};//who方法引用最后一个函数对象

JS方法没有重载!

!

obj.add=function（a,b）{returna+b;}obj.add=function（a,b,c）{returna+b+c;}//最后只保留最后的方法:

add=a+b+cobj.add（1,2）//返回未定义obj.add（1,2,3）//返回6

使用JSON直接声明属性和方法

varobj={name:

'Tom',age:

18,who:

function（）{console.log（this.name）;}};//后期扩展属性obj.price=25;

默认的变量和函数

在网页值直接声明的变量和函数,是window对象的属性和方法

也可以利用赋值,修改window提供的属性和方法:

//重写JS原生alert函数window.alert=function（e）{$（'#can'）.load（'./alert/alert_error.html',function（）{$（'#error_info'）.text（''+e）;$（'.opacity_bg'）.show（）;}）;}

更正

1.重构note.js

更正:

增加li.data（'noteId',note.id）否则无法再次点击笔记了!

functionaddNote（）{varurl='note/add.do';varnotebookId=$（document）.data（'notebookId'）;vartitle=$（'#input_note'）.val（）;vardata={userId:

getCookie（'userId'）,notebookId:

notebookId,title:

title};//console.log（data）;$.post（url,data,function（result）{if（result.state==SUCCESS）{varnote=result.data;//console.log（note）;showNote（note）;//找到显示笔记列表的ul对象varul=$（'#note-listul'）;//创建新新的笔记列表项目livarli=noteTemplate.replace（'[title]',note.title）;li=$（li）;//绑定笔记ID到LIli.data（'noteId',note.id）//设置选定效果ul.find（'a'）.removeClass（'checked'）;li.find（'a'）.addClass（'checked'）;//插入到笔记列表的第一个位置ul.prepend（li）;//关闭添加对话框closeDialog（）;}else{alert（result.message）;}}）;}

2.更正NoteServiceImpl

更正:

addNote方法中StringstatusId="1"否则笔记是删除状态的!

publicNoteaddNote（StringuserId,StringnotebookId,Stringtitle）throwsUserNotFoundException,NotebookNotFoundException{if（userId==null||userId.trim（）.isEmpty（））{thrownewUserNotFoundException（"ID空"）;}Useruser=userDao.findUserById（userId）;if（user==null）{thrownewUserNotFoundException（"木有人"）;}if（notebookId==null||notebookId.trim（）.isEmpty（））{thrownewNotebookNotFoundException（"ID空"）;}intn=notebookDao.countNotebookById（notebookId）;if（n!

=1）{thrownewNotebookNotFoundException（"没有笔记本"）;}if（title==null||title.trim（）.isEmpty（））{title="葵花宝典";}Stringid=UUID.randomUUID（）.toString（）;StringstatusId="1";StringtypeId="1";Stringbody="";longtime=System.currentTimeMillis（）;Notenote=newNote（id,notebookId,userId,statusId,typeId,title,body,time,time）;n=noteDao.addNote（note）;if（n!

=1）{thrownewNoteNotFoundException（"保存失败"）;}returnnote;}

作业

1.完成笔记的移动功能

2.完成笔记的的删除功能

云笔记

回收站

1.显示回收站

原理:

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

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

0;display:

none;'id='trash-bin'>

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

20px;line-heigh