java版云笔记（五）

下来是创建笔记本，创建笔记，这个没什么难点和前面是一样的。

创建笔记本

　首先点击“＋”弹出添加笔记的对话框，然后点击确定按钮创建笔记本。

	//点击"+"弹出添加笔记本对话框

    $("#add_notebook").click(alertAddBookWindow);

//弹出创建笔记本对话框

function alertAddBookWindow(){

	//弹出添加笔记本对话框

	$("#can").load("alert/alert_notebook.html");

	//显示对话框灰色背景(使用class="opacity_bg"选择)

	$(".opacity_bg").show();

};

接下来创建笔记本

//创建笔记本

    $("#can").on("click","#book_addsure",sureAddBook);

发送Ajax请求

发送事件：对话框中的"创建"按钮的单击
请求参数：笔记本名称,用户ID
请求地址：/book/add.do

服务器端处理

/book/add.do

-->AddBookController.execute

-->BookService.addBook

-->BookDao.save

-->cn_notebook(insert)

-->返回JSON结果

Ajax回调处理

success:
a.关闭对话框;
b.添加一个笔记本li
c.提示创建笔记本成功
error:提示创建笔记本失败

　　此时，保存成功后alert提示框关闭不了，这是因为这里的alert是经过处理过的，要想关闭就要对它进行处理

aler提示框处理

　　添加关闭提示框的代码

 //关闭对话框,对所有的对话框都有用

  $("#can").on("click",".cancle,.close",closeAlertWindow);

代码为：

//关闭对话框

function closeAlertWindow(){

	$("#can").html("");//清空对话框内容

	$(".opacity_bg").hide();//隐藏背景色

};

如果要修改alert提示框的样式可以用

window.alert=function(e){}；

创建笔记

　　创建笔记和创建笔记本几乎是一样的，都是点击“＋”弹出窗口，然后点击确定触发创建笔记的事件。

//弹出创建笔记对话框

function alertAddNoteWindow(){

	//判断是否有笔记本选中

	var $li = $("#book_ul a.checked").parent();

	if($li.length==0){

		alert("请选择笔记本");

	}else{//弹出对话框

		$("#can").load("alert/alert_note.html");

		$(".opacity_bg").show();

	}

};

发送Ajax请求

发送事件：对话框中"创建"按钮的单击
请求参数：笔记名称,选中的笔记本ID,

用户ID
请求地址：/note/add.do

服务器端处理

/note/add.do

-->AddNoteController.execute

-->NoteService.addNote

-->NoteDao.save

-->cn_note(insert操作)

-->返回JSON结果

Ajax回调处理

success:
a.关闭对话框
b.解析返回的JSON结果,生成一个笔记li元素添加到列表中
c.提示创建笔记成功
error:提示创建笔记失败

笔记删除

功能描述：

单击笔记菜单的"X"按钮时,弹出删除对话框,点击对话框中的"删除"按钮，执行删除操作。

发送Ajax请求

发送事件：对话框中"删除"按钮的单击
请求参数：选中li的笔记ID
请求地址：/note/delete.do

服务器端处理

/note/delete.do

-->DeleteNoteController.execute

-->NoteService.deleteNote

-->NoteDao.updateStatus

-->cn_note(按笔记ID将cn_note_status_id更新为"2")

-->返回JSON结果

Ajax回调处理

success:a.移除列表中删除的笔记li元素

　　　　b.提示笔记删除成功
error:提示笔记删除失败

笔记转移

功能描述：

单击笔记菜单的"转移至.."按钮,弹出笔记转移对话框，在对话框下拉列表中，选择要转入的笔记本项，点击确定转移按钮执行转移操作。

发送Ajax请求

发送事件：对话框中"确定"按钮的单击
请求参数：选中项的笔记ID,要转入的笔记本ID

（格式检查：a.要转入笔记本是否和原笔记本相同;）
请求地址：/note/move.do

服务器端处理

/note/move.do

-->MoveNoteController.execute

-->NoteService.moveNote

-->NoteDao.updateBookId

-->cn_note(按笔记ID将cn_notebook_id更新)

-->返回JSON结果

Ajax回调处理

success:a.移除笔记列表li元素;

　　　　b.提示笔记转移成功
error:提示笔记转移失败

笔记分享

功能描述：

用户点击笔记菜单中"分享"按钮,执行分享操作。

本质：对cn_share（分享笔记表）进行insert

发送Ajax请求

发送事件:菜单中的"分享"按钮的单击
请求参数：笔记ID
请求地址：/share/add.do

服务器端处理

/share/add.do

-->ShareNoteController.execute

-->ShareService.shareNote

-->ShareDao.save-->cn_share(insert)

-->返回JSON结果

Ajax回调处理

success:提示用户分享成功；

扩展：添加图标,就是在加载笔记时加判断，当笔记的type标志位为3时加分享图标

分享笔记搜索

功能描述：

用户在搜索输入框输入"关键词"，按回车触发搜索操作。

本质：对cn_share表进行cn_share_title

模糊查询

	select * from cn_share

	where cn_share_title like '%java%';

发送Ajax请求

发送事件：输入框中按回车键
请求参数：输入框中的内容（关键词）
请求地址：/share/search.do

服务器端处理

/share/search.do

-->ShareSearchController.execute

-->ShareService.searchNote

-->ShareDao.findLikeTitle

-->cn_share(模糊搜索)

-->返回JSON结果

Ajax回调处理

success:a.解析JSON结果生成搜索结果列表

　　　　b.将搜索结果列表显示;其他列表隐藏（pc_part_6显示）

pc_part_2 全部笔记列表

pc_part_4 回收站笔记列表

pc_part_6 搜索结果列表

pc_part_7 收藏笔记列表

pc_part_8 参加活动的笔记列表

error:提示搜索失败

知识点

按回车键触发js事件

	$("#search_note").keydown(function(event){

	   var code = event.keyCode;//获取键盘的code码

	   if(code==13){

	      //回车键,获取关键词,发送Ajax请求

	   }

	});

搜索分享笔记的查看

功能描述：

用户单击搜索结果列表中的li,发送Ajax请求去cn_share获取分享笔记信息,显示到预览笔记区域。(pc_part_5显示,pc_part_3隐藏)

发送Ajax请求

发送事件：搜索结果列表的li元素
请求参数：分享ID shareId
请求地址：/share/load.do

服务器端处理

/share/load.do

-->LoadShareController.execute

-->ShareService.loadShare

-->ShareDao.findById-->cn_share

-->返回JSON结果（Share对象）

Ajax回调处理

success:解析JSON结果中的Share内容,显示到预览笔记区域.

搜索分享笔记（分页处理）

/share/search.do(传递查询关键字和第几页)

-->Controller(接收请求和参数)

-->Service(接收参数,处理参数)

关键字前后追加%;根据第几页计算抓取起点

-->Dao (SQL: limit 起点,5)

-->返回指定第几页的记录结果

分页查询

	select * from cn_share limit n,m;

	n:抓取记录的起点,从0开始算(0表示第1条)

	m:抓取记录的最大数

　　这些就是这个项目的主要功能，做到这里差不多主要部分就算完了。大家可以把登录的页面的登录设置为按回车进行登录，注册也一样，删除的回收站，笔记本收藏，分享也都可以做下。