创建笔记本
-------------------------------------------------------------------------------------------
发送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>
效果图如下: