note_cloud--加载笔记列表
加载笔记列表
-----------------------------------------------------------------------------------------------------------
发送ajax请求
发送事件：笔记本li的点击
请求参数：笔记本ID（userId）
请求地址：/note/loadnotes.do
服务器的处理
/note/loadnotes.do
LoadNoteController.execute
NoteService.loadBookNotes
1.定义接口文件NoteService.loadBookNotes（bookId）
2.构建Result-set方法
将List
NoteDao.findByBookId（bookId）
1.接口文件定义方法
配置mapper文件
cn_note（根据bookId & cn_note-status_id='1'进行select操作） cn_note-status_id表示笔记的状态，等于1表示可用，没有进入回收站
ajax回调处理
success:
成功：解析json数据,生成笔记LI，添加到笔记列表中
error:alert（"笔记加载失败"）
-----------------------------------------------------------------------------------------------------------
实体类部分代码：
package cn.tedu.cloud_note.entity;
import java.io.Serializable;
/**
* 笔记 cn_note
* mysql的整型类型有这样几种:
* 类型 占用字节
* tinyint 1
* smallint 2
* mediumint 3
* int 4
* bigint 8
*/
public class Note implements Serializable {
private String cn_note_id;
private String cn_notebook_id;
private String cn_user_id;
private String cn_note_status_id;
private String cn_note_type_id;
private String cn_note_title;
private String cn_note_body;
private Long cn_note_create_time;//bigint类型
private Long cn_note_last_modify_time;//bigint类型-----------------------------------------------------------------------------------------------------------
Dao接口（映射器）
package cn.tedu.cloud_note.dao;
import java.util.List;
import java.util.Map;
public interface NoteDao {
//根据笔记本ID查询笔记(包括笔记的id和笔记的title)
public List> findByBookId(String bookId);
} -----------------------------------------------------------------------------------------------------------
映射文件：
-----------------------------------------------------------------------------------------------------------
业务层接口：
package cn.tedu.cloud_note.service;
import java.util.List;
import java.util.Map;
import cn.tedu.cloud_note.util.NoteResult;
public interface NoteService {
//根据bookId查询cn_note表返回笔记的列表(只需要其中两个数据即可)
public NoteResult>> loadBookNotes(String bookId);
} -----------------------------------------------------------------------------------------------------------
业务层实现类：
package cn.tedu.cloud_note.service;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import cn.tedu.cloud_note.dao.NoteDao;
import cn.tedu.cloud_note.util.NoteResult;
@Service("noteService")
public class NoteServiceImpl implements NoteService {
@Resource(name="noteDao")
private NoteDao dao;
public NoteResult>> loadBookNotes(String bookId) {
NoteResult>> result =
new NoteResult>>();
List> list = dao.findByBookId(bookId);
result.setStatus(0);
result.setMsg("加载笔记成功");
result.setData(list);
return result;
}
} -----------------------------------------------------------------------------------------------------------
控制层Controller：
package cn.tedu.cloud_note.controller;
import java.util.List;
import java.util.Map;
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.NoteService;
import cn.tedu.cloud_note.util.NoteResult;
@Controller
@RequestMapping("/note")
public class LoadNoteController {
@Resource(name="noteService")
private NoteService service;
@ResponseBody
@RequestMapping("/loadnotes.do")
public NoteResult>> execute(String bookId){
NoteResult>> result = service.loadBookNotes(bookId);
return result;
}
//测试：http://localhost:8080/cloud_note/note/loadnotes.do?bookId=1db556b9-d1dc-4ed9-8274-45cf0afbe859
} -----------------------------------------------------------------------------------------------------------
HTML部分代码：
$(function(){
//加载笔记列表
loadUserBooks();
//动态绑定笔记本单击事件--此处若使用$("#book_ul li").click(function(){})没有反应
$("#book_ul").on("click","li",function(){//动态绑定
//去掉之前选中的效果
$("#book_ul a").removeClass("checked");
//设置选中效果
$(this).find("a").addClass("checked");
//获取笔记本ID
var bookId = $(this).data("bookId");
//alert("笔记本的ID是:"+bookId);//1db556b9-d1dc-4ed9-8274-45cf0afbe859 action笔记
//发送ajax
$.ajax({
url:path + "/note/loadnotes.do",
type:"post",
data:{"bookId":bookId},
dataType:"json",
success:function(result){
//先清空ul下面的所有li
$("#note_ul").empty();
//接收数据
var list = result.data;
//循环添加li
for(var i=0;i-----------------------------------------------------------------------------------------------------------
调用的JS文件：
//创建笔记的一个li
function createNoteLi(noteId,noteTitle){
var $li = $(
''+
''+
''+
noteTitle +
''+
''+
''+
' ');
//保存noteId
$li.data("noteId",noteId);
$("#note_ul").append($li);
}-----------------------------------------------------------------------------------------------------------
测试结果：
