note_cloud--创建笔记

创建笔记

--------------------------------------------------------------------------------------------------------------

发送请求：

发送事件：对话框中"创建按钮的单击"

请求参数：笔记名称title、笔记本ID、用户ID

注意：笔记本共9个属性

cn_note_id（在Service层通过UUID生成）

cn_notebook_id（JS中通过绑定的data方法获取）
cn_user_id（通过Cookie获取）
cn_note_status_id（自定义）
cn_note_type_id（自定义）
cn_note_title（文本框获取）
cn_note_body（添加完笔记后--在编辑笔记区域添加笔记内容）
cn_note_create_time（bigint类型--添加笔记时为系统时间，在Service层获取）
cn_note_last_modify_time（bigint类型--添加笔记时与创建笔记时间相同）

请求地址：/note/add.do

服务器处理：

AddNoteController.execute（笔记名称title、笔记本ID、用户ID）

NoteService.addNote（笔记名称title、笔记本ID、用户ID）

NoteDao（Note）

cn_note（insert操作）

ajax回调处理：

success：

1.关闭对话框（可以省略不做）

2.解析JSON数据，生成li元素添加到笔记列表区域

获取笔记的标题和笔记的ID

3.提示创建笔记成功

error：

提示创建失败

--------------------------------------------------------------------------------------------------------------

Dao接口：

//创建笔记public void save(Note note);

此处可以不要返回值

--------------------------------------------------------------------------------------------------------------

映射文件：

<!-- 创建笔记 -->  <insert id="save" parameterType="cn.tedu.cloud_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(      #{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})  </insert>

--------------------------------------------------------------------------------------------------------------

业务层接口：

//新建笔记public NoteResult<Note> addNote(String noteName,String userId,String bookId);

--------------------------------------------------------------------------------------------------------------

业务层实现类：

//新建笔记public NoteResult<Note> addNote(String noteName, String userId, String bookId) {NoteResult<Note> result = new NoteResult<Note>();/*实例化Note传入Dao*/Note note = new Note();String cn_note_id = NoteUtil.createId();Long time = System.currentTimeMillis();note.setCn_note_id(cn_note_id);note.setCn_notebook_id(bookId);note.setCn_user_id(userId);//状态:1-normal 正常   2-delete 删除(在回收站)note.setCn_note_status_id("1");//类型:1- normal 正常  2-favor 收藏   3-share 分享note.setCn_note_type_id("1");note.setCn_note_title(noteName);note.setCn_note_body("");//此处body若不赋值后面在编辑区域会报错note.setCn_note_create_time(time);note.setCn_note_last_modify_time(time);dao.save(note);result.setStatus(0);result.setMsg("创建笔记成功");result.setData(note);return result;}

在实例化Note的时候，笔记的内容body赋值为“”，否则会报错

--------------------------------------------------------------------------------------------------------------

控制层Controller：

package cn.tedu.cloud_note.controller;import javax.annotation.Resource;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import cn.tedu.cloud_note.entity.Note;import cn.tedu.cloud_note.service.NoteService;import cn.tedu.cloud_note.util.NoteResult;@Controller@RequestMapping("/note")public class AddNoteController {@Resource(name="noteService")private NoteService service;@RequestMapping("/add.do")@ResponseBodypublic NoteResult<Note> execute(String noteName, String userId, String bookId){NoteResult<Note> result = service.addNote(noteName, userId, bookId);return result;}}

--------------------------------------------------------------------------------------------------------------

HTML部分代码：

$(function(){//加载笔记列表loadUserBooks();//动态绑定笔记本单击事件--此处若使用$("#book_ul li").click(function(){})没有反应$("#book_ul").on("click","li",loadBookNotes);//绑定单击笔记加载笔记信息功能$("#note_ul").on("click","li",loadNote);//编辑笔记区域的"保存笔记"按钮绑定事件update(需要三个参数id、title、body)$("#save_note").click(updateNote);//弹出创建笔记本的alert$("#add_notebook").click(alertAddBookWindow);//关闭对话框(由于页面加载时候还没有该对话框,所以使用动态绑定)(x和取消按钮)(对所有对话框都生效)$("#can").on("click",".close,.cancle",closeAlertWindow);//对话框中"创建新笔记本"记功能的绑定$("#can").on("click","#addnotebook",addBook);//点击"+"弹出创建笔记的对话框$("#add_note").click(alertAddNoteWindow);//对话框中"创建新笔记"功能的绑定$("#can").on("click","#addnote",addNote);});

--------------------------------------------------------------------------------------------------------------

调用的JS代码：

function addNote(){//获取笔记的titlevar noteName = $("#input_note").val().trim();//获取userIdvar userId = getCookie("userId");//获取笔记本的IDvar bookId = $("#book_ul a[class='checked']").parent().data("bookId");//alert(noteName+":"+userId+":"+bookId);var ok = true;//对输入的笔记名称进行校验if(noteName == ""){ok = false;$("#span_note").html("标题不能为空");}//由于cookie可能失效,所以要进行判断if(userId == null){ok = false;window.loaction.href = "log_in.html";}//发送ajax请求if(ok){$.ajax({url:path + "/note/add.do",type:"post",data:{"noteName":noteName,  "userId":userId,  "bookId":bookId},dataType:"json",success:function(result){if(result.status == 0){//取出标题和笔记的IDvar noteId = result.data.cn_note_id;var noteTitle = result.data.cn_note_title;//解析JSON数据，生成li元素添加到笔记列表区域createNoteLi(noteId,noteTitle);//提示创建笔记成功alert(result.msg);//关闭对话框可以不用}},error:function(){alert("创建笔记失败!");}});}}

---------------------------------------------------------------------------------------------

1.在添加笔记时候，先判断笔记本是否被选中，若未选中笔记本则无法添加笔记，

2.要在笔记上绑定笔记的ID

3.弹出“添加笔记对话框”的JS：

//点击"+"弹出  创建笔记  的对话框function alertAddNoteWindow(){//判断是否有笔记本被选中var $li = $("#book_ul a[class='checked']").parent();//获取被选中的liif($li.length == 0){alert("请选择笔记本");}else{//将相关的html放置与id为can的div内,达到新建笔记本的对话框$("#can").load("alert/alert_note.html");//显示背景(灰色),只能对当前弹出的对话框进行操作$(".opacity_bg").show();}}

测试结果：