note_cloud--加载笔记列表

加载笔记列表

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

发送ajax请求

发送事件：笔记本li的点击

请求参数：笔记本ID（userId）

请求地址：/note/loadnotes.do

服务器的处理

/note/loadnotes.do

LoadNoteController.execute

NoteService.loadBookNotes

1.定义接口文件NoteService.loadBookNotes（bookId）

2.构建Result-set方法

将List<Map<String,Object>>放入Result

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<Map<String,Object>> findByBookId(String bookId);}

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

映射文件：

<mapper namespace="cn.tedu.cloud_note.dao.NoteDao">  <!-- 根据笔记本ID查找笔记(包括笔记的id和笔记的title也可以使用*全部查询出来) -->  <select id="findByBookId" parameterType="string" resultType="map">    select cn_note_id,cn_note_title from cn_note     where cn_notebook_id = #{bookId} and cn_note_status_id = '1'  </select></mapper>

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

业务层接口：

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<List<Map<String,Object>>> 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<List<Map<String, Object>>> loadBookNotes(String bookId) {NoteResult<List<Map<String, Object>>> result =new NoteResult<List<Map<String, Object>>>();List<Map<String, Object>> 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<List<Map<String,Object>>> execute(String bookId){NoteResult<List<Map<String,Object>>> 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<list.length;i++){    //获取笔记的ID    var noteId = list[i].cn_note_id;    //获取笔记的标题    var noteTitle = list[i].cn_note_title;    //创建笔记LI列表    createNoteLi(noteId,noteTitle);    }    },    error:function(){alert("加载笔记本列表失败");}    });  });  });

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

调用的JS文件：

//创建笔记的一个lifunction createNoteLi(noteId,noteTitle){    var $li = $('<li class="online">'+'<a>'+'<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+  noteTitle +    '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>'+    '</a>'+'<div class="note_menu" tabindex="-1">'+'<dl>'+'<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>'+'<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>'+'<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>'+'</dl>'+'</div>'+'</li>');    //保存noteId    $li.data("noteId",noteId);    $("#note_ul").append($li);}

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

测试结果：