java 云笔记本_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:抓取记录的最大数
这些就是这个项目的主要功能,做到这里差不多主要部分就算完了。大家可以把登录的页面的登录设置为按回车进行登录,注册也一样,删除的回收站,笔记本收藏,分享也都可以做下。
java 云笔记本_java版云笔记(五)相关推荐
- java 云架构_java版Spring Cloud云架构代码结构构建
本篇我们根据架构图进行代码的构建.根据微服务化设计思想,结合spring cloud一些优秀的项目,如服务发现.治理.配置化管理.路由负载.安全控制等优秀解决方案,使用Maven技术将框架进行模块化. ...
- 数独java界面基础_java版数独游戏界面实现(二)
本文实例为大家分享了java版数独游戏界面实现的具体代码,供大家参考,具体内容如下 实现效果图: 这里写图片描述 主函数用于启动程序: package hlc.shudu.app; import hl ...
- java云开发_Java 快速开始
# Java 快速开始 代码示例: 点击下方按钮一键部署: # 第 1 步:编写基础应用 首先我们创建一个 Spring Boot 应用. 使用 curl 和 unzip 命令新建一个空 Web 项目 ...
- java 5 多线程_Java基础系列五、多线程
1.什么是进程?什么是线程? 进程概念:在计算机中运行的软件,是操作系统中最基础的组成部分 .进程是容器,里面装的都是线程. 线程概念:就是运行在进程中的一段代码,是进程中最小组织单元. 注意: 1. ...
- java循环队列_Java版-数据结构-队列(循环队列)
前情回顾 在上一篇,笔者给大家介绍了数组队列,并且在文末提出了数组队列实现上的劣势,以及带来的性能问题(因为数组队列,在出队的时候,我们往往要将数组中的元素往前挪动一个位置,这个动作的时间复杂度O(n ...
- java微信机器人_Java版微信机器人代码
Java版微信机器人代码 (2014-07-31 09:47:58) 标签: 软件测试 java 上海泽众软件 package com.eiyoung.wechat.web.controller; i ...
- java物业管理系统设计_JAVA版物业管理系统论文+设计源码
内容介绍 原文档由会员 从头再来 发布 (内含完整源代码) 1.2万字 28页 [摘要] 物业管理系统是紧随当今时代发展的需要,目的在于实现不同的人员对物业系统的不同的需要,有利于社会的稳定和顺利发展 ...
- 实验楼Java写计算器_Java版图形界面计算器
Java 版图形界面计算器 实验说明及介绍 环境登录 无需密码自动登录,系统用户名 shiyanlou,密码 shiyanlou 环境介绍 本实验环境采用带桌面的 Ubuntu Linux 环境,实验 ...
- java 线性计算器_java版科学计算器,支持表达式计算
<java版科学计算器,支持表达式计算>由会员分享,可在线阅读,更多相关<java版科学计算器,支持表达式计算(12页珍藏版)>请在人人文库网上搜索. 1.程序设计综合设计题目 ...
最新文章
- MVC-前台调用后台action 传递upload file 参数问题
- 带你了解“比特币黄金”和SegWit2x分叉
- 数据库大型应用解决方案总结(转)
- ECSHOP在打印订单时打印出商品序号
- react 调用组件方法_React源码分析1 — 组件和对象的创建(createClass,createElement)...
- boost::type_index::ctti_type_index相关的测试程序
- Java Thread 总结
- 职工工资信息系统 c语言题,工资信息管理系统C语言设计.doc
- 使用inetaddress测试目标可达性_纯java手写打造方法级白盒测试框架
- Js屏蔽键盘输入的某些字符,用以部分代替正则表达式
- python深度学习库tensorflow——实现FC卷积神经网络识别mnist手写体
- 2.Zabbix企业级分布式监控系统 --- Zabbix 简介
- 怎么删除网络共享多余的计算机,win10系统删除网络共享中多余的计算机的图文教程...
- Hbase2.4.1集群安装:HMaster自动挂掉问题终于解决了
- Sicily 1001. Alphacode
- 【Python】经典问题创建一个矩形类,定义方法 属性 初始化
- windows系统卸载VMware Workstation 并删除注册表残留信息
- 【机器学习】贝叶斯分类三大实战项目:高斯模型进行疾病诊断、多项式模型进行文本分类、伯努利模型进行好/差评判别
- 张家界协力学校计算机班,张家界协力学校交通顽瘴痼疾整治见成效
- 开发巴西市场全攻略,外贸人收藏
热门文章
- CCF201312-1 出现次数最多的数
- 如何在labview中用c语言编程,编程语言之争:LabVIEW还是C语言?-测试测量-与非网...
- 云图说|DRS数据对比——带您随时观测数据一致性
- OpenHarmony移植案例:如何适配服务启动引导部件bootstrap_lite
- 教你从零搭建Web漏洞靶场OWASP Benchmark
- 云图说|OLAP开源引擎的一匹黑马,MRS集群组件之ClickHouse
- 云小课 | 大数据融合分析:GaussDW(DWS)轻松导入MRS-Hive数据源
- 一文抽丝剥茧带你掌握复杂Gremlin查询的调试方法
- Android doc |Getting Started|部分 转载 --管理Activity生命周期
- 基于C语言、线性表的 二、八、十、十六进制转换 及 加运算、左右移位运算、乘法运算 的科学计算器设计