note_cloud--创建笔记本

创建笔记本

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

发送ajax请求：

发送事件：对话框中的"创建"按钮的单击（动态绑定）

请求参数：笔记本名称和用户的ID

注意：笔记本的实体类中一共有6个属性（cn_notebook_id 笔记本ID、cn_user_id用户ID 、cn_notebook_type_id笔记本类型ID、cn_notebook_name笔记本名称、cn_notebook_desc笔记本说明、cn_notebook_createtime笔记本创建时间)

其中：

cn_notebook_id 通过service层UUID创建

cn_user_id通过JS中cookie获取

cn_notebook_name通过对话框获取

cn_user_id通过cookie获取

请求地址：/book/add.do

 

服务器处理：

AddBookController.execute --传入两个参数(String bookName,String userId)

BookService.addBook(String bookName,String userId)传入两个参数，实例化Book，对其他属性赋值，调用Dao，Service层中除了要插入数据之外，还要返回一个笔记本的ID，绑定在该li上

BookDao.save（Book）

cn_notebook（insert操作）

 

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

实体类部分代码：

public class Book implements Serializable {
	private String cn_notebook_id;
	private String cn_user_id;
	private String cn_notebook_type_id;
	private String cn_notebook_name;
	private String cn_notebook_desc;//mysql中为text类型
	private Timestamp cn_notebook_createtime;//mysql中为timestamp类型

 

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

Dao接口：

//创建笔记本
public void save(Book book);

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

映射文件：

<!-- 创建笔记本 -->
  <insert id="save" parameterType="cn.tedu.cloud_note.entity.Book">
    insert into cn_notebook (
    	cn_notebook_id,
    	cn_user_id,
    	cn_notebook_type_id,
    	cn_notebook_name,
    	cn_notebook_desc,
    	cn_notebook_createtime
    ) 
    values(
    	#{cn_notebook_id},
     	#{cn_user_id},
     	#{cn_notebook_type_id},
     	#{cn_notebook_name},
     	#{cn_notebook_desc},
     	#{cn_notebook_createtime}
     )
  </insert>

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

业务层接口：

//新建笔记本
	public NoteResult<Object> addBook(String bookName,String userId);

返回值中封装了笔记本都的ID

 

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

 

业务层实现类：

//创建新笔记本
	public NoteResult<Object> addBook(String bookName, String userId) {
		NoteResult<Object> result = new NoteResult<Object>();
		//实例化Book,传入Dao
		Book book = new Book();
		//UUID生成bookId
		String bookId = NoteUtil.createId();
		book.setCn_notebook_id(bookId);
		book.setCn_notebook_name(bookName);
		//新建的笔记本类型ID为1--可用状态
		book.setCn_notebook_type_id("1");
		book.setCn_user_id(userId);
		//生成系统事件
		Timestamp time = new Timestamp(System.currentTimeMillis());
		book.setCn_notebook_createtime(time);//还有个desc属性省略
		dao.save(book);
		result.setStatus(0);
		result.setMsg("创建笔记本成功");
		result.setData(bookId);//将bookId返回,在js中绑定到li中
		return result;
	}

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

控制层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.service.BookService;
import cn.tedu.cloud_note.util.NoteResult;

@Controller
@RequestMapping("/book")
public class AddBookController {
	@Resource(name="bookService")
	private BookService service;
	
	@RequestMapping("/add.do")
	@ResponseBody
	public NoteResult<Object> execute(String bookName,String userId){
		NoteResult<Object> result = service.addBook(bookName, userId);
		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","#addBook",createBook);
		  });

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

引用的JS代码：

function getCookie(objName){//获取指定名称的cookie的值
    var arrStr = document.cookie.split("; ");
    for(var i = 0;i < arrStr.length;i ++){
        var temp = arrStr[i].split("=");
        if(temp[0] == objName) return unescape(temp[1]);
   } 
}

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

//对话框单击"创建"按钮创建新笔记本
function createBook(){
	//获取笔记本名称
	var bookName = $("#input_notebook").val().trim();
	//获取用户ID
	var userId = getCookie("userId");
	
	//参数格式校验
	var ok = true; 
	if(bookName == "" || bookName == null){
		$("#name_span").html("笔记本名不能空");
		ok = false;
	}
	if(userId == null){//超时2小时
		window.location.href = "log_in.html";//跳转到登录页面
		ok = false;
	}
	//发送ajax请求
	if(ok){
		$.ajax({
			url:path + "/book/add.do",
			type:"post",
			data:{"bookName":bookName,"userId":userId},
			dataType:"json",
			success:function(result){
				if(result.status == 0){
					var bookId = result.data;//bookId由result中获得
					//添加到新笔记本列表当中
					createBookLi(bookId,bookName);
					//关闭对话框
					closeAlertWindow();
				}
			},
			error:function(){alert("创建笔记本失败");}
		});
	}
}

alert_notebook.html如下：

<div class="modal fade in" id="modalBasic" tabindex="-1" role="dialog" aria-labelledby="modalBasicLabel" aria-hidden="false" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="modalBasicLabel">新建笔记本</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
                             <label class="col-sm-3 control-label" for="input" style='margin-top:5px;'>笔记本名称</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="input_notebook">
                                 <span id="name_span" style="color:red;"></span>
                             </div>
                         </div>
			</div>
			<div class="modal-footer" style='margin-top:20px;'>
				<button type="button" class="btn btn-default cancle" data-dismiss="modal">取 消</button>
				<button type="button" class="btn btn-primary sure" id="addBook">创 建</button>
			</div>
		</div>
	</div>
</div>

效果图如下：