云笔记

---

弹出笔记子菜单

1. 利用事件冒泡在 note-list 上绑定事件弹出笔记子菜单:

1. 重构笔记列表模板, 为笔记子菜单触发按钮添加类 btn-note-menu

   var noteTemplate = '<li class="online note">'+
   '<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_slide_down btn-note-menu"><i class="fa fa-chevron-down"></i></button>'+
   '</a>'+
   '<div class="note_menu" tabindex="-1">'+
   '<dl>'+
   '<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>'+
   '<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>'+
   '<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>'+
   '</dl>'+
   '</div>'+
   '</li>';

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

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

3. 添加事件处理方法

   /** 显示笔记子菜单处理方法 */
   function showNoteMenu(){
   //找到菜单对象, 调用show() 方法
   var btn = $(this);
   //如果当前是被选定的 笔记项目 就弹出子菜单
   btn.parent('.checked').next().toggle();
   //btn.parent('.checked') 获取当前按钮的父元素
   //这个元素必须符合选择器'.checked', 如果不
   //符合就返回空的JQuery元素.
   return false;//阻止点击事件的继续传播!避免传播到document对象时候, 触发关闭菜单事件
   }

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

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

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

   /** 关闭笔记子菜单事件处理方法 */
   function hideNoteMenu(){
   $('.note_menu').hide();
   }

---

移动笔记功能

原理:

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

略

2. 业务层

1. 业务层方法 NoteService

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

2. 实现业务层方法: NoteServiceImpl

   public boolean moveNote(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.setNotebookId(notebookId);
   data.setLastModifyTime(System.currentTimeMillis());n = noteDao.updateNote(data);return n==1;
   }

3. 测试

3. 表现层

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

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

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

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

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

   /** 加载移动笔记对话框中的笔记本列表 */
   function loadNotebookOptions(){
   var url = 'notebook/list.do';
   var data={userId:getCookie('userId')};
   $.getJSON(url, data, function(result){
   if(result.state==SUCCESS){
   var notebooks = result.data;
   //清楚全部的笔记本下拉列表选项
   //添加新的笔记本列表选项
   $('#moveSelect').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');
   }
   $('#moveSelect').append(opt);
   }
   }else{
   alert(result.message);
   }
   });
   }

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

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

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

   <button type="button" class="btn btn-primary sure move-note">确 定</button>

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

   /** 移动笔记事件处理方法 */
   function moveNote(){var url = 'note/move.do';
   var id = $(document).data('note').id;
   var bookId=$('#moveSelect').val();
   //笔记本ID没有变化, 就不移动了!
   if(bookId==$(document).data('notebookId')){
   return;
   }
   var data = {noteId:id, notebookId:bookId};
   $.post(url, data, function(result){
   if(result.state==SUCCESS){
   //移动成功, 在当前笔记列表中删除移动的笔记
   //将笔记列表中的第一个设置为当前笔记, 否则清空边编辑区域
   var li = $('#note-list .checked').parent();
   var lis = 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

   <select id="findNotesByNotebookId"
   parameterType="string"
   resultType="map">
   select
   cn_note_id as id,
   cn_note_title as title
   from
   cn_note
   where
   cn_notebook_id = #{notebookId} and
   cn_note_status_id = '1'
   order by
   cn_note_last_modify_time desc
   </select>

   注意：　增加了查询条件 cnnotestatus_id = '1'

2. 业务层

1. 添加业务层方法 NoteService

   boolean deleteNote(String noteId)
   throws NoteNotFoundException;

2. 实现业务层方法 NoteServiceImpl

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

3. 测试

   略

3. 控制器

1. 添加控制器方法 NoteController

   @RequestMapping("/delete.do")
   @ResponseBody
   public JsonResult delete(String noteId) {
   boolean b = noteService.deleteNote(
   noteId);
   return new JsonResult(b);
   }

2. 测试

   略

4. 表现层

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

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

   添加事件处理方法

   /** 打开删除笔记对话框 */
   function showDeleteNoteDialog(){
   var id = $(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

   <button type="button" class="btn btn-primary sure delete-note">删 除</button>

   事件监听方法

   /** 删除笔记功能 */
   function deleteNote(){
   var url = 'note/delete.do';
   var id = $(document).data('note').id;
   var data = {noteId:id};
   $.post(url, data, function(result){
   if(result.state==SUCCESS){
   //删除成功, 在当前笔记列表中删除笔记
   //将笔记列表中的第一个设置为当前笔记, 否则清空边编辑区域
   var li = $('#note-list .checked').parent();
   var lis = 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语法声明对象(直接量声明对象)

   var obj = {};

2. 使用 Object 创建对象

   var obj = new Object();

JS对象可以后期添加属性

案例

var obj = {};
obj.name = "Tom";var obj2 = new Object();
obj2.name = "Jerry";

对象特点:

1. new Object() 和 JSON 语法创建的对象没有差别!

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

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

   • 对象.属性 = 值

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

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

     if(! obj.age){
     console.log('没有age属性');
     }if(obj.age){
     console.log('年龄:'+obj.age);
     }

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

   delete 对象.属性;

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

   • 为对象添加属性, 本质是添加了 key:value, key是属性名, value是属性值.

   • 访问对象属性, 本质是get(key)

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

JS 对象的方法

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

var obj = {};
obj.name = "Tom";
obj.who = function(){
console.log(this.name);
};

调用方法与访问属性

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

可以像属性一样删除方法

delete obj.who

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

obj.who=function(){
console.log(this.name);
};
obj.who=function(){
console.log('Hello World!');
};
//who方法引用最后一个函数对象

JS方法没有重载!!

obj.add = function(a, b){
return a+b;
}
obj.add = function(a, b, c){
return a+b+c;
}
//最后只保留最后的方法: add = a+b+c
obj.add(1,2) //返回未定义
obj.add(1,2,3) //返回6

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

var obj = {
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) 否则无法再次点击笔记了!

   function addNote(){
   var url = 'note/add.do';
   var notebookId=$(document).data('notebookId');
   var title = $('#input_note').val();var data = {userId:getCookie('userId'),
   notebookId:notebookId,
   title:title};
   //console.log(data);$.post(url, data, function(result){
   if(result.state==SUCCESS){
   var note=result.data;
   //console.log(note);
   showNote(note);
   //找到显示笔记列表的ul对象
   var ul = $('#note-list ul');
   //创建新新的笔记列表项目 li
   var li = noteTemplate.replace(
   '[title]', note.title);
   li = $(li);//绑定笔记ID到LI
   li.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 方法中 String statusId = "1" 否则笔记是删除状态的!

   public Note addNote(String userId,
   String notebookId, String title)
   throws UserNotFoundException,
   NotebookNotFoundException {if(userId==null||userId.trim().isEmpty()){
   throw new UserNotFoundException("ID空");
   }
   User user=userDao.findUserById(userId);
   if(user==null){
   throw new UserNotFoundException("木有人");
   }
   if(notebookId==null||notebookId.trim().isEmpty()){
   throw new NotebookNotFoundException("ID空");
   }
   int n=notebookDao.countNotebookById(notebookId);
   if(n!=1){
   throw new NotebookNotFoundException("没有笔记本");
   }
   if(title==null || title.trim().isEmpty()){
   title="葵花宝典";
   }
   String id = UUID.randomUUID().toString();
   String statusId = "1";
   String typeId = "1";
   String body = "";
   long time=System.currentTimeMillis();
   Note note = new Note(id, notebookId,
   userId, statusId, typeId, title,
   body, time, time);
   n = noteDao.addNote(note);
   if(n!=1){
   throw new NoteNotFoundException("保存失败");
   }
   return note;
   }

---

作业

1. 完成笔记的移动功能

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

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

1. jy-10-SPRINGMYBATIS01——MyBatis-程祖红／刘苍松

   目录: 1.day01-MyBatis-程祖红 2.day07-MyBatis-刘苍松 文件已上传分享 3.day08-SSM-刘苍松 文件已上传分享 @程祖红 1.day01-MyBatis (1) ...

2. Oracle E-Business Suite Maintenance Guide Release 12.2(Patching Utilities)

   更多内容参考: http://docs.oracle.com/cd/E51111_01/current/acrobat/122ebsmt.zip Oracle Patch Application As ...

3. 旋转矩阵中6保6_双色球旋转矩阵(9－12）个号中6保5公式

   选9个号:(7注) 旋转矩阵09-6-5(7注) 01 02 03 04 06 08 01 02 03 04 08 09 01 02 03 05 07 08 01 03 05 06 07 09 01 ...

4. 卡西欧350计算机度分秒转换,卡西欧FX-4500PA计算器怎样将如:12.58244度转换成度分秒啊...

   1)37°20'+54.8°= 92°8' 2)70°42'45"+82°37'25"= 153°20'10" 3)120°-36°18'52"=83°41'8 ...

5. 鞍山树人计算机学校宿舍,南开大学校务公报2016年第12期-信息公开.pdf

   南开大学校务公报2016年第12期-信息公开 2016 年第12 期总第125 期 (新生特刊) 南开大学办公室编 2016 年10 月30 日 南开大学校务公报20 16 年第12 期 目 录 开学 ...

6. 利用 kubeasz 给 suse 12 部署 kubernetes 1.20.1 集群

   文章目录 1.前情提要 2.环境准备 2.1.环境介绍 2.2.配置静态网络 2.3.配置ssh免密 2.4.批量开启模块以及创建文件 2.5.安装ansible 2.5.1.安装pip 2.5.2. ...

7. linux mint 12,Linux Mint 12 发布

   Linux Mint 12 发布 (2011-11-28 07:34:00) 标签: 杂谈 Linux桌面,至少是GNOME那边,正处于些许混乱之中,这已经不是秘密.Unity 并没有被许多人所接受: ...

8. 猪猪猫.CN-WIN2003SP2快速部署12[服务器版]

   直接下载地址: http://bt.jujumao.cn 点击下载Bt种子  下载信息 [点击浏览该文件:2007-12-21猪猪猫.cn-win2003sp2快速部署12服务器版.torrent] ...

9. 猪猪猫.CN-WINXPSP2电脑城装机12[标准版]

    下载信息 [点击浏览该文件:2007-12-18猪猪猫.cn-winxpsp2电脑城装机12标准版.torrent] | [快车下载] [快车下载]1.jpg: [快车下载]2.jpg: [快车下载 ...

10. 猪猪猫.CN-WINXPSP2电脑城装机12[家庭版]

     下载信息 [点击浏览该文件:2007-12-20猪猪猫.cn-winxpsp2电脑城装机12家庭版.torrent] | [快车下载] [快车下载]1.jpg: [快车下载]2.jpg: [快车下载 ...

最新文章

1. python脚本——图片重命名、图片合成视频、faster-rcnn画P-R曲线
2. 关于缓存命中率的几个关键问题！
3. OO设计原则总结[转载]
4. tnsname.ora
5. win2003 sp2 设置NLB
6. 计算机基础知识第三章测试,计计算机应用基础第三章测试题
7. CentOS 7 (RHEL 7)服务管理命令的变化
8. VB获取一个文件夹中指定的文件或文件夹名称到列表
9. 苹果手机语音备忘录在哪_苹果手机的备忘录竟然还有这么多隐藏功能？以前不知道真是可惜了！...
10. DRAM内存原理（四）同步内存和异步内存技术
11. React实现微信公众号支付
12. 非洲大陆自贸区正式启动,非洲电商迎来新一轮高速发展期
13. groovy if 判断字符串_Groovy语法
14. 关于嵌入式编程的思考
15. 边缘计算，是在炒概念吗？
16. cisco 3548x 低延时交换机erspan获取ns时间戳
17. Greenplum—2、操作汇总
18. 我有一个计算机梦想作文500,我的梦想作文500字
19. 贫血模型与充血模型再讨论
20. NRF52810低功耗蓝牙5.2系统级芯片

热门文章

1. Navicat导入xlsx文件提示无法打开文件
2. php gd imageaffine
3. 什么是适用于iPhone和iPad的iOS最新版本？
4. RHCE考试——佩琦
5. iphone 扩容测试软件,给iPhone扩容！闪迪手机U盘测评
6. 网易2016实习研发笔试
7. 携程 Apollo 配置中心 | 学习笔记（七） | 如何将配置文件敏感信息加密？
8. C 语言 —— 循环结构
9. php字符串函数处理emoji,PHP中处理内容含有emoji表情的几种方式
10. ACM里的期望和概率问题 从入门到精（入）通（土)