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:抓取记录的最大数

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值