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文件：

//创建笔记的一个li
function 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);
}

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

测试结果：