云笔记加载笔记列表

一、加载笔记本列表流程：用户登入主页 -> 执行 加载笔记本列表函数，发送请求 -> DispatcherServlet 拦截过滤请求 -> 分配控制器 -> 执行 controller.execute() -> 返回操作结果 -> ajax接受返回数据 -> 根据返回结果动态生成 列表
1.加载笔记本列表 NoteBook.js,当操作成功以后会根据返回的结果调用 createBookLi（）函数动态生成 列表

function loadUserBooks() {
	//获取userId
	var userId=getCookie("userId");
	//判断是否获取到有效的userId
	if(userId==null){
		//转发回登录页面
		window.location.href="log_in.html";
	}else {//发送ajax请求
		$.ajax({
			url:base_path+"/book/loadBooks.do",
			type:"post",
			data:{"userId":userId},
			dataType:"json",
			success:function(result){
				//判断查询是否成功
				if(result.status==0){
					//获取笔记本集合
					var books=result.data;
					for(var i=0;i<books.length;i++){
						//获取笔记本ID
						var bookId=books[i].cn_notebook_id;
						//获取笔记本名称
						var bookName=books[i].cn_notebook_name;
						
						//创建一个笔记本列表项的li元素
						createBookLi(bookId,bookName);
					}
				}
			},
			error:function(){
				alert("笔记本加载失败")
			}
		});
	}
};

2.执行controller LoadBooksController.java,通过注解 @Resource BookService 完成装配以后，执行 execute() 方法，调用 bookService.loadBooks()接口，根据用户Id,得到查询的结果，并以JSON 形式返回数据。

package com.sjh.cloud_note.controller;
 
import java.util.List;
 
import javax.annotation.Resource;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.sjh.cloud_note.entity.Book;
import com.sjh.cloud_note.service.BookService;
import com.sjh.cloud_note.util.NoteResult;
 
@Controller
@RequestMapping("/book")
public class LoadBooksController {
	
	@Resource
	private BookService bookService;
 
	@RequestMapping("/loadBooks.do")
	@ResponseBody
	public  NoteResult<List<Book>>  execute(String userId){
		
		 NoteResult<List<Book>> result = bookService.loadBooks(userId);
		return result;
	}
}

3.bookService.loadBook() 接口

package com.sjh.cloud_note.service;
 
 
import java.util.List;
 
import com.sjh.cloud_note.entity.Book;
import com.sjh.cloud_note.util.NoteResult;
 
public interface BookService {
	public  NoteResult<List<Book>> loadBooks(String userId);
	
	public NoteResult<Book> AddBook(String userId,String title);
}

4.实现 loadBooks接口

在这里插入代码片	@Resource
	private BookDao bookDao;
	
	public NoteResult<List<Book>> loadBooks(String userId) {
		NoteResult<List<Book>> result = new NoteResult<List<Book>>();
		
		List<Book> books = bookDao.findByUserId(userId);
		result.setStatus(0);
		result.setMsg("加载笔记本成功");
		result.setData(books);
		
		return result;
	}

5.根据用户ID查询笔记本mapper : BookMapper.xml, 标签 id 要和 bookDao 的查询接口方法名保持一致

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="com.sjh.cloud_note.dao.BookDao">
	<select id="findByUserId" parameterType="string" resultType="com.sjh.cloud_note.entity.Book">
		select * from cn_notebook where cn_user_id=#{userId} order by cn_notebook_createtime desc
	</select>
	<insert id="save" parameterType="com.sjh.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>
</mapper>

6.Ajax接受查询结果，调用CreateBookLi()函数，加载笔记本列表

//创建一个笔记本列表项的li元素
function createBookLi(bookId,bookName){
	var sli="";
	sli+='<li class="online">';
	sli+='<a>';
	sli+='<i class="fa fa-book" title="online" rel="tooltip-bottom">';
	sli+='</i>';
	sli+=bookName;
	sli+='</a>';
	sli+='</li>';
	//将sli字符串转换成jquery对象li元素
	var $li=$(sli);
	//将bookId的值与jquery对象绑定
	$li.data("bookId",bookId);
	//将li元素添加到笔记本ul列表区
	$("#book_ul").append($li);
};