开发工具:eclipse + navicat
项目源码:CSDN下载地址
Github:Github源码地址
一、当用户添加了自己的笔记本以后,要实现的是当用户已进入主页,就将该用户所属的笔记本动态添加出来。
加载笔记本列表流程:用户登入主页 -> 执行 加载笔记本列表函数,发送请求 -> DispatcherServlet 拦截过滤请求 -> 分配控制器 -> 执行 controller.execute() -> 返回操作结果 -> ajax接受返回数据 -> 根据返回结果动态生成 列表
加载笔记本列表 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("笔记本加载失败")
}
});
}
};
执行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;
}
}
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);
}
实现 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;
}
根据用户ID查询笔记本mapper : BookMapper.xml, <select> 标签 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>
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);
};