note_cloud--笔记本加载功能

笔记本加载功能

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

$(function(){})加载后直接触发

获取参数: userId

发送请求: /book/loadbooks.do

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

实体类：

package cn.tedu.cloud_note.entity;

import java.io.Serializable;
import java.sql.Timestamp;

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类型
	public String getCn_notebook_id() {
		return cn_notebook_id;
	}
	public void setCn_notebook_id(String cn_notebook_id) {
		this.cn_notebook_id = cn_notebook_id;
	}
	public String getCn_user_id() {
		return cn_user_id;
	}
	public void setCn_user_id(String cn_user_id) {
		this.cn_user_id = cn_user_id;
	}
	public String getCn_notebook_type_id() {
		return cn_notebook_type_id;
	}
	public void setCn_notebook_type_id(String cn_notebook_type_id) {
		this.cn_notebook_type_id = cn_notebook_type_id;
	}
	public String getCn_notebook_name() {
		return cn_notebook_name;
	}
	public void setCn_notebook_name(String cn_notebook_name) {
		this.cn_notebook_name = cn_notebook_name;
	}
	public String getCn_notebook_desc() {
		return cn_notebook_desc;
	}
	public void setCn_notebook_desc(String cn_notebook_desc) {
		this.cn_notebook_desc = cn_notebook_desc;
	}
	public Timestamp getCn_notebook_createtime() {
		return cn_notebook_createtime;
	}
	public void setCn_notebook_createtime(Timestamp cn_notebook_createtime) {
		this.cn_notebook_createtime = cn_notebook_createtime;
	}
	@Override
	public String toString() {
		return "NoteBook [cn_notebook_id=" + cn_notebook_id + ", cn_user_id=" + cn_user_id + ", cn_notebook_type_id="
				+ cn_notebook_type_id + ", cn_notebook_name=" + cn_notebook_name + ", cn_notebook_desc="
				+ cn_notebook_desc + ", cn_notebook_createtime=" + cn_notebook_createtime + "]";
	}
	//具有id的实体类要重写两个方法,此处省略
	
}

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

dao接口（映射器）

package cn.tedu.cloud_note.dao;

import java.util.List;

import cn.tedu.cloud_note.entity.Book;

public interface BookDao {
	//根据用户ID查找笔记本
	public List<Book> findByUserId(String userId);
}

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

映射文件

<mapper namespace="cn.tedu.cloud_note.dao.BookDao">
  <!-- 根据用户ID查找笔记本 -->
  <select id="findByUserId" parameterType="string" resultType="cn.tedu.cloud_note.entity.Book">
    select * from cn_notebook where cn_user_id = #{userId} order by cn_notebook_createtime desc
  </select>	
 
</mapper>

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

业务层接口

package cn.tedu.cloud_note.service;

import java.util.List;

import cn.tedu.cloud_note.entity.Book;
import cn.tedu.cloud_note.util.NoteResult;

public interface BookService {
	//加载笔记本
	public NoteResult<List<Book>> LoadUserBooks(String userId);
}

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

业务层实现类

package cn.tedu.cloud_note.service;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import cn.tedu.cloud_note.dao.BookDao;
import cn.tedu.cloud_note.entity.Book;
import cn.tedu.cloud_note.util.NoteResult;

@Service("bookService")
public class BookServiceImpl implements BookService {
	@Resource(name="bookDao")
	private BookDao dao;
	
	//加载笔记本
	public NoteResult<List<Book>> LoadUserBooks(String userId) {
		NoteResult<List<Book>> result = new NoteResult<List<Book>>();
		List<Book> list = dao.findByUserId(userId);
		if(list == null || list.size() == 0){//此处若没有数据则集合为"",要配合size()方法使用更加严谨
			result.setStatus(1);
			result.setMsg("查询笔记本出错");
			return result;
		}
		result.setStatus(0);
		result.setMsg("查询笔记本成功");
		result.setData(list);
		return result;
	}

}

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

控制层Controller

package cn.tedu.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 cn.tedu.cloud_note.entity.Book;
import cn.tedu.cloud_note.service.BookService;
import cn.tedu.cloud_note.util.NoteResult;


@Controller
@RequestMapping("/book")
public class LoadUserBooks {
	@Resource(name="bookService")
	private BookService service;
	
	@RequestMapping("/loadbooks.do")
	@ResponseBody
	public NoteResult<List<Book>> execute(String userId){
		NoteResult<List<Book>> result = service.LoadUserBooks(userId);
		return result;
	}
	//测试：http://localhost:8080/cloud_note/book/loadbooks.do?userId=48595f52-b22c-4485-9244-f4004255b972
	//返回json格式的一个result
}

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

HTML页面部分重要代码：

<!-- 引入 -->
		<script type="text/javascript" src="scripts/jquery.min.js"></script> <!-- jQuery -->
		<script type="text/javascript" src="scripts/basevalue.js"></script>  <!-- 路径path -->
		<script type="text/javascript" src="scripts/cookie_util.js"></script><!-- cookie -->
		<script type="text/javascript" src="scripts/book.js"></script>
		<script type="text/javascript">
		  $(function(){
			  loadUserBooks();
		  });
		</script>

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

<ul class="contacts-list" id="book_ul">
<!--利用 ajax 加载li -->
</ul>

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

调用的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]);

   } 

}

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

//根据用户ID显示笔记本列表
function loadUserBooks(){
	//获取userId
	var userId = getCookie("userId");
	//判断是否获取到有效的userId
	if(userId == null){
		window.location.href("log_in.html");
	}else{
		//发送ajax请求
		$.ajax({
			url:path + "/book/loadbooks.do",
			type:"post",
			data:{"userId":userId},
			dataType:"json",
			success:function(result){
				if(result.status == 0){
					//获取笔记本集合
					var books = result.data;
					//将li添加到父元素ul中
					for(var i=0;i<books.length;i++){
						//获取每一个笔记本的名称和id(id用于获取笔记)
						var bookId = books[i].cn_notebook_id;
						var bookName =  books[i].cn_notebook_name;
						//创建一个笔记本列表的li元素,并添加到ul下(此时要绑定id)
						createBookLi(bookId,bookName);
					}
				}
			},
			error:function(){alert("笔记本加载失败");}
		});
	}
}

//创建笔记本li元素
function createBookLi(bookId,bookName){
	var $li = $(
			'<li class="online" id="'+bookId+'">'+
			  '<a>'+
			    '<i class="fa fa-book" title="online" rel="tooltip-bottom"></i>'+
			    bookName +
			  '</a>'+
			'</li>');
	//将bookId与jQuery绑定
	$li.data("bookId",bookId);
	//在父元素ul下面添加li
	$("#book_ul").append($li);
}

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

测试结果：