云笔记

显示笔记功能

原理:

1. 持久层

  1. 声明持久层方法 NoteDao

    Note findNoteById(String noteId);

  2. 声明实体类Note

    public class Note implements Serializable{
private static final long serialVersionUID = -8176239102696538864L;
private String id;
private String notebookId;
private String userId;
private String statusId;
private String typeId;
private String title;
private String body;
private Long createTime;
private Long lastModifyTime;
public Note() {
}
public Note(String id, String notebookId, String userId, String statusId, String typeId, String title, String body,
Long createTime, Long lastModifyTime) {
super();
this.id = id;
this.notebookId = notebookId;
this.userId = userId;
this.statusId = statusId;
this.typeId = typeId;
this.title = title;
this.body = body;
this.createTime = createTime;
this.lastModifyTime = lastModifyTime;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getNotebookId() {
return notebookId;
}
public void setNotebookId(String notebookId) {
this.notebookId = notebookId;
}
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public String getStatusId() {
return statusId;
}
public void setStatusId(String statusId) {
this.statusId = statusId;
}
public String getTypeId() {
return typeId;
}
public void setTypeId(String typeId) {
this.typeId = typeId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getBody() {
return body;
}
public void setBody(String body) {
this.body = body;
}
public Long getCreateTime() {
return createTime;
}
public void setCreateTime(Long createTime) {
this.createTime = createTime;
}
public Long getLastModifyTime() {
return lastModifyTime;
}
public void setLastModifyTime(Long lastModifyTime) {
this.lastModifyTime = lastModifyTime;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((id == null) ? 0 : id.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Note other = (Note) obj;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
return true;
}
@Override
public String toString() {
return "Note [id=" + id + ", notebookId=" + notebookId + ", userId=" + userId + ", statusId=" + statusId
+ ", typeId=" + typeId + ", title=" + title + ", body=" + body + ", createTime=" + createTime
+ ", lastModifyTime=" + lastModifyTime + "]";
}}

  3. 声明SQL, NoteMapper.xml

    <select id="findNoteById"
parameterType="string"
resultType="cn.tedu.note.entity.Note">
select
cn_note_id as id,
cn_notebook_id as notebookId,
cn_user_id as userId,
cn_note_status_id as statusId,
cn_note_type_id as typeId,
cn_note_title as title,
cn_note_body as body,
cn_note_create_time as createTime,
cn_note_last_modify_time as lastModifyTime
from
cn_note
where
cn_note_id=#{noteId}
</select>

  4. 测试 NoteDaoTest

    @Test
public void testFindNoteById(){
String noteId = "019cd9e1-b629-4d8d-afd7-2aa9e2d6afe0";
Note note = dao.findNoteById(noteId);
System.out.println(note);
}

2. 业务层

  1. 声明业务层方法 NoteService

    Note getNote(String noteId)
throws NoteNotFoundException;

    声明业务异常NoteNotFoundException

    略...

  2. 实现方法 NoteServiceImpl

    public Note getNote(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("id错误");
}
return note;
}

  3. 测试 NoteServiceTest

    @Test
public void testGetNote(){
String noteId = "019cd9e1-b629-4d8d-afd7-2aa9e2d6afe0";
Note note = service.getNote(noteId);
System.out.println(note);
}

3. 控制器

  1. 添加控制器方法 NoteController

    @RequestMapping("/load.do")
@ResponseBody
public JsonResult load(String noteId) {
Note note = noteService.getNote(noteId);
return new JsonResult(note);
}

  2. 测试

    http://localhost:8080/note/note/load.do?noteId=019cd9e1-b629-4d8d-afd7-2aa9e2d6afe0

    http://localhost:8080/note/note/load.do

4. 表现层

  1. 重构 showNotes 方法, 在显示时候将笔记的ID绑定到LI元素:

    //将笔记ID绑定到li, 用在点击笔记时候显示笔记详细信息
li.data('noteId', note.id);

  2. 重构笔记列表li模板, 在li元素上增加 note 类:

    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"><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>';

  3. 在ready方法中添加事件监听 笔记列表的点击事件:

    //监听笔记列表中的笔记点击事件,在点击时候加载显示笔记信息
$('#note-list').on( 'click','.note', loadNote);

  4. 添加笔记点击加载笔记的事件处理方法 loadNote

    function loadNote(){
//获取当前点击的 li 元素
var li = $(this);
//获取在显示时候绑定到li中的笔记ID值
var id = li.data('noteId');//设置选中高亮效果
li.parent().find('a').removeClass('checked');
li.find('a').addClass('checked');var url = 'note/load.do';
var data= {noteId: id };$.getJSON(url, data, function(result){
//console.log(result);
if(result.state==SUCCESS){
var note = result.data;
showNote(note);
}else{
alert(result.message);
}
});
}

  5. 添加显示笔记信息方法 showNote

    function showNote(note){
//显示笔记标题
$('#input_note_title').val(note.title);
//显示笔记内容
um.setContent(note.body);
}

  6. 测试 ...

新建笔记功能

原理:

1. 持久层

  1. 声明持久层方法 NoteDao

    int addNote(Note note);

  2. 声明SQL, NoteMapper.xml:

    <insert id="addNote"
parameterType="cn.tedu.note.entity.Note">
insert into cn_note
(cn_note_id,
cn_notebook_id,
cn_user_id,
cn_note_status_id,
cn_note_type_id,
cn_note_title,
cn_note_body,
cn_note_create_time,
cn_note_last_modify_time)
values
(#{id},#{notebookId},#{userId},
#{statusId},#{typeId},#{title},
#{body},#{createTime},
#{lastModifyTime})
</insert>

  3. 测试:

    略...

2. 业务层

  1. 添加业务方法 NoteService

    public Note addNote(String userId,
String notebookId, String title)
throws UserNotFoundException,
NotebookNotFoundException;

    提示: 方法的三个参数是根据对业务规程分析来确定的.

  2. 实现业务方法 NoteServiceImpl:

    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 = "0";
String typeId = "0";
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;
}

  3. 测试: NoteServiceTest

    略...

3. 控制器

  1. 添加控制器方法 NoteController

    @RequestMapping("/add.do")
@ResponseBody
public JsonResult add(String userId, String notebookId, String title) {
Note note = noteService.addNote(userId, notebookId, title);
return new JsonResult(note);
}

  2. 测试:

    http://localhost:8080/note/note/add.do?title=Hello&userId=48595f52-b22c-4485-9244-f4004255b972¬ebookId=c8d81ee5-f8cd-49e8-b2e6-ab174a926d95

4. 表现层

添加笔记时候 笔记本ID 是如何传递的:

  1. 在ready方法中绑定事件打开笔记对话框:

    $('#note-list').on('click', '#add_note', showAddNoteDialog);

    重构 loadNotes 方法, 在点击笔记本时候将笔记本ID保存起来

    //绑定笔记本ID， 用于添加笔记功能 $(document).data('notebookId', li.data('notebookId'));

    添加显示对话框方法:

    function showAddNoteDialog(){
var id = $(document).data('notebookId');
if(id){
$('#can').load('alert/alert_note.html', function(){
$('#input_note').focus();
});
$('.opacity_bg').show();
return;
}
alert('必须选择笔记本!');
}

  2. 在ready方法中绑定事件关闭笔记对话框:

    $('#can').on('click','.close,.cancel',closeDialog)

    添加关闭事件处理方法:

    function closeDialog(){
$('.opacity_bg').hide();
$('#can').empty();
}

  3. 在ready方法中监听对话框中的关闭和取消按钮

    //监听对话框中的关闭和取消按钮
//其中 '.close,.cancel' 是组选择器器, 表示
//选择 .close 或 .cancel 按钮
$('#can').on('click','.close,.cancel',closeDialog)

    添加关闭事件方法:

    function closeDialog(){
$('.opacity_bg').hide();
$('#can').empty();
}

  4. 在ready方法中监听新建笔记对话框中的创建笔记按钮

    //监听新建笔记对话框中的创建笔记按钮
$('#can').on('click','.create-note',addNote);

    重构: alert/alert_note.html 为 创建笔记 按钮 添加类 create-note

    <button type="button" class="btn btn-primary sure create-note">创 建</button>

    添加创建笔记事件方法

    function addNote(){
var url = 'note/add.do';
var notebookId=$(document).data('notebookId');
var title = $('#can #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);
//设置选定效果
ul.find('a').removeClass('checked');
li.find('a').addClass('checked');
//插入到笔记列表的第一个位置
ul.prepend(li);
//关闭添加对话框
closeDialog();
}else{
alert(result.message);
}
});
}

JQuery 的 load 方法

JQuery提供了异步组件加载方法 load:

其语法为:

JQuery.load(url, data, function)

其中:

  • 一般在一个JQuery对象使用, 最常见在div对象调用load方法

  • url引用一个页面组件, 不是一个完整网页(没有html元素)

  • data 是发起请求的 参数.

  • function 是页面组件加载后执行的方法.

其工作原理为:

 load方法是异步工作的:

如果需要页面加载以后执行的代码一定放到 function 中!

$('#can').load('alert/alert_note.html',
function(){console.log("加载完成");
});
console.log('正在加载');

类比案例:

$('#can').load('购买饮料',
function(){console.log("买回来了!");
});
console.log('去买饮料了!');

保存笔记功能

原理:

1. 持久层

  1. 定义保存方法 NoteDao

    int updateNote(Note note);

  2. 添加SQL NoteMapper.xml

    <!-- NoteMapper.xml -->
<update id="updateNote"
parameterType="cn.tedu.note.entity.Note">
update
cn_note
set
<if test="notebookId!=null">
cn_notebook_id=#{notebookId},
</if>
<if test="userId!=null">
cn_user_id=#{userId},
</if>
<if test="statusId!=null">
cn_note_status_id=#{statusId},
</if>
<if test="typeId!=null">
cn_note_type_id=#{typeId},
</if>
<if test="title!=null">
cn_note_title=#{title},
</if>
<if test="body!=null">
cn_note_body=#{body},
</if>
cn_note_last_modify_time=#{lastModifyTime}
where
cn_note_id=#{id}
</update>

    MyBatis 的 if 标签可以动态生成SQL, 这里可以实现部分属性更新功能

  3. 测试: NoteDaoTest

    @Test
public void testUpdateNote(){
Note note = new Note();
String noteId = "019cd9e1-b629-4d8d-afd7-2aa9e2d6afe0";
note.setId(noteId);
note.setTitle("Test");
note.setBody("Test123");
note.setLastModifyTime(System.currentTimeMillis());
dao.updateNote(note);
note = dao.findNoteById(noteId);
System.out.println(note);
}

2. 业务层

  1. 业务层方法 NoteService

    boolean update(String noteId, String title, String body)
throws NoteNotFoundException;

  2. 实现业务方法 NoteServiceImpl

    public boolean update(String noteId, String title,
String body) 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();
if(title!=null && !title.equals(note.getTitle())){
data.setTitle(title);
}
if(body!=null && !body.equals(note.getBody())){
data.setBody(body);
}
data.setId(noteId);
data.setLastModifyTime(System.currentTimeMillis());
System.out.println(data);
int n = noteDao.updateNote(data);
return n==1;
}

  3. 测试: NoteServiceTest

    @Test
public void testUpdate(){
String id = "019cd9e1-b629-4d8d-afd7-2aa9e2d6afe0";
String title = "Test";
String body = "今天天气不错";
boolean b = service.update(id, title, body);
Note note = service.getNote(id);
System.out.println(b);
System.out.println(note);
}

3. 控制器

  1. NoteController

    @RequestMapping("/update.do")
@ResponseBody
public JsonResult update(String noteId, String title, String body) {
boolean success = noteService.update(noteId, title, body);
return new JsonResult(success);
}

4. 表现层

  1. 重构 showNote 方法

    function showNote(note){
//显示笔记标题
$('#input_note_title').val(note.title);
//显示笔记内容
um.setContent(note.body);//绑定笔记信息, 用于保存操作
$(document).data('note', note);}

  2. 在ready方法中绑定 保存 事件

    //绑定点击保存笔记事件
$('#save_note').on('click', updateNote);

  3. 添加事件处理方法

    function updateNote(){
var url = 'note/update.do';
var note = $(document).data('note');
var data = {noteId:note.id};
var modified = false;
var title = $('#input_note_title').val();
if(title && title!=note.title){
data.title = title;
modified = true;
}
var body = um.getContent();
if(body && body != note.body ){
data.body = body;
modified = true;
}
if(modified){$.post(url, data, function(result){if(result.state == 0){
//console.log("Success!");
//内存中的 note 改成新的数据
note.title = title;
note.body = body;
var l = $('#note-list .checked').parent();
$('#note-list .checked').remove()
var li = noteTemplate.replace( '[title]', title);
var a = $(li).find('a');
a.addClass('checked');
l.prepend(a);
}else{
alert(result.mesage);
}
});
}
}

  4. 测试

作业

  1. 完成添加笔记功能

  2. 完成保存笔记功能

  3. 完成显示笔记功能

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

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

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

  2. 12 信息2班 《基于Android的软件开发》课程成绩

    作业 作业01:为 TextView 添加监听器和后退按钮. (参考教材第02章) 作业02:完善GeoQuiz应用,堵住漏洞. (参考教材第05章) 作业03:日期格式化. (参考教材第08章) 作 ...

  3. 乐视生态世界发布会官方图文直播(2016年01月12日 15:00)

    2016年01月12日 13:10 生态世界即将开启!乐视将再度引领潮流,让更多人感受到生态的魅力.再一次颠覆,你准备好了吗?彻底焕新,我们来了!1月12日15:00,乐视生态世界发布会全程直播,敬请 ...

  4. 旋转矩阵中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 ...

  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. Oracle 12.2 新特性: Online PDB relocate (PDB hot move)

    Oracle 12 . 2 新特性 : Online PDB relocate (PDB hot move) Relocating a PDB 是 Oracle 在 12C 中推出的一种新的数据迁移方 ...

  8. stc单片机远程升级12系列

    串口传输模式:WordLength: 8 StopBits: 1 Parity:2(E) 数据包格式:(除了发送7f之外所有的数据按照帧格式发送) 包头+标识+数据包长度+命令+数据+校验和+包尾 包 ...

  9. 12平键标准尺寸规格表_平键尺寸表

    普通平键规格尺寸表 普通平键规格尺寸表 b 6.3 c×45°或 r h 2 b/ R= b 1.6 L 轴径 d 自 6-8 >8-10 >10-12 >12-17 >17- ...

  10. 百度刘超走进天津大学

    前百度总监刘超98年以全国第六名考入清华美院,如今带HCI学生首秀油画技法    2019年12月25日刘超老师带领同学们圣诞的cosplay party引起极大轰动,当晚互联网文化刷爆天津大学生朋友 ...

最新文章

  1. 2018.11.12
  2. Beaglebone Black教程项目1闪烁板载LED
  3. matlab做横截面回归,matlab - 将横截面表面轮廓拟合到通用的已知公式以获得系数并对表面进行数学建模 - 堆栈内存溢出...
  4. 计算机局域网有哪些硬件组成,局域网的硬件组成有哪些
  5. 带头结点的链式表操作集
  6. C#下载文件和将文件转换为数据流下载的示例
  7. 一份点赞上千的《算法》讲义，来自20年教学经验的UIUC计算机教授
  8. iOS UITabBarController
  9. 【空间分析-文章学习笔记】2 北京各行业的空间分布分析
  10. 广东中学计算机课可教什么,广东实验中学课程设置如何？有什么特色？
  11. Labview与三菱PLC通讯 (2)
  12. Linux开发环境——RHEL7更换yum源
  13. (OK) 股市财经博客参考！
  14. matlab语言定义变量类型,matlab定义变量-MATLAB,变量
  15. A-priori算法的简单实现
  16. 小米路由器显示网络未连接到服务器,小米路由器不能上网(连不上网)解决方法...
  17. linux-----基本操作指令(2)
  18. 我与 SAP 成都研究院吴院长的二三事
  19. mac kindle app打不开书/白屏解决方案
  20. WPF教程（十二）资源

热门文章

  1. grpc istio_在皮质数据湖中使用grpc envoy和istio进行大规模数据摄取
  2. 靠 Java「上位」的编程语言，竟成最流行编程语言之一
  3. android屏蔽表情输入法,Android中EditText屏蔽第三方输入法表情的方法示例
  4. 装了卡巴电脑更卡?原来是Trojan-PSW.Win32.QQPass等盗号木马群作梗2
  5. node ref char*_「 volute 」树莓派+Node.js造一个有灵魂的语音助手
  6. 大数据技术之数据质量管理
  7. 牛客练习赛60C 操作集锦（DP）
  8. 怎么在PDF上直接修改？最新教程来了
  9. python换脸开源_Python实现AI换脸功能
  10. 性能优化: http 请求的过程及潜在的性能优化点