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")
	@ResponseBody
	public 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(){
	//获取笔记的title
	var noteName = $("#input_note").val().trim();
	//获取userId
	var userId = getCookie("userId");
	//获取笔记本的ID
	var 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){
					//取出标题和笔记的ID
					var 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();//获取被选中的li
	if($li.length == 0){
		alert("请选择笔记本");
	}else{
		//将相关的html放置与id为can的div内,达到新建笔记本的对话框
		$("#can").load("alert/alert_note.html");
		//显示背景(灰色),只能对当前弹出的对话框进行操作
		$(".opacity_bg").show();
	}
}

测试结果：