上面介绍了整个项目的基本配置，配置成功之后我们就可以动手撸代码了。本文章不是教程，只供楼主自己记录学习，和解决问题时的思路。
一、设计数据库
1.首先表的设计，项目比较小，表也很简单，先简单设计让项目先跑起来。
四张表，cn_note 是笔记表,cn_notenook是笔记本表，cn_stars 收藏表，cn_user 用户表
二、运行项目
三.展示登陆用户下笔记本功能设计思路
1.登陆成功，跳转到笔记本界面，会立刻加载这个用户下的所有笔记。
所有功能是使用js，ajax来和后端进行交互的。 前端代码如下：
创建newNote.js, 在edit.jsp中引入
newNote.js
$(function(){
loadNotebooks() //1，加载笔记 用户登陆的时候，把用户id存进Cookie里面 ，这时候把Cookie中的id取出来，查找这个用户下的笔记本，利用ajax 和后台交互,返回Json,拿到防护的数据之后遍历。
});
//网页加载以后立即读取笔记本列表function loadNotebooks() { var userId = getCookie("userId"); var data = { userId: userId}; var url = 'getNote.do'; $.post(url, data, function (result) { if (result.state == 0) { var notebook = result.data.data; console.log(notebook); showNotebooks(notebook) } });} 后台Controller代码：
//获取笔记本@RequestMapping("/getNote.do")@ResponseBodypublic JsonResult getNode(int userId) { System.out.println("获取笔记本"); return new JsonResult(editService.getNote(userId));} showNotebooks
遍历拿到的结果集
function showNotebooks(notebooks) { var ul = $('#notebook-list ul'); ul.empty(); for (var i = 0; i < notebooks.length; i++) { var notebook = notebooks[i]; console.log("name" + notebook.name); console.log("id" + notebook.id); //显示笔记名称 var li = notebookTemplate.replace('[name]', notebook.name); //转成JS对象 li = $(li); //将笔记本notebook的id绑定到对应的li上面 data是Jquery提供的方法。 li.data('notebookId', notebook.id); $(document).data(notebook.name, notebook.id); ul.append(li); } // $('#notebook-list').find('.notebook').eq(0).click();} 重写了edi.jsp中两个li，即展现笔记本，和笔记的部分，[name] =笔记本名称，[title]=笔记本中的笔记名称
//class="online notebook"等于绑定两个classvar notebookTemplate = '
在showNotebooks(notebooks)方法中,利用el表达 先找到展现笔记本的div 下ul。ul.empty()清除这个ul元素下的内容，
遍历得到notebook.name，然后把 var li= notebookTemleate中[name] 替换成 notebook.name.
在这里利用Jquery方法data(), 把notebookId绑定到对于的li上 。先把li 转换成JS对象 li=$(li), 然后绑定 li.data("notebookId",notebook.id)。这一步很重要，后面查找该笔记本下的笔记 就是根据notebookId来的。
上面写完之后没错的话，页面上这个用户下笔记本名称应该展现出来了
四.单击笔记本显示笔记本下的笔记功能设计思路
1.先看效果，点击“ 笔记1 ”展现 该笔记本下的所有笔记
2. newNote.js
$（function(){
$('#notebook-list').on('click', '.notebook', shownotebook);//根据id选择器,找到div,为div 下的li(class=notebook),绑定一个单击事件 }）;
//单击笔记本,显示笔记本下的笔记function shownotebook() { var li = $(this); //设定被点击的li默认被选中,增加checked属性 li.parent().find('a').removeClass('checked'); li.find('a').addClass('checked'); var notebookId = $('#notebook-list').find('a[class="checked"]').parent().data('notebookId'); console.log("notebookId :" + notebookId); addCookie('notebookId', notebookId); var url = 'findNote.do'; var data = { notebookId: notebookId}; $.post(url, data, function (result) { console.log(result); if (result.data.state == 0) { var notes = result.data.data; console.log(notes); showNoteName(notes); } else { //如果笔记本下没有笔记, 就清除上一次显示的笔记title和body，，显示空白 $('#input_note_title').val(''); um.setContent(''); var ul = $('#note-list ul'); ul.empty(); } })} 3.shownotebook方法中，找到点击的li,取出li上绑定的notebookId,后台 根据这个notebookId查询该笔记本下的笔记。
后台代码：
//查询笔记本下的笔记@RequestMapping("/findNote.do")@ResponseBodypublic JsonResult findNote(int notebookId) { System.out.println("查询笔记本下的笔记"); return new JsonResult(editService.findNote(notebookId));} 返回Json, 在 showNoteName(notes)方法中遍历
function showNoteName(notes) { console.log("showNoteName"); var ul = $('#note-list ul'); ul.empty(); for (var i = 0; i < notes.length; i++) { var note = notes[i]; var li = noteTemplate.replace('[title]', note.title); li = $(li); //将笔记本note的id绑定到对应的li上面 data是Jquery提供的方法。 li.data("noteId", note.id); console.log(li.data("noteId")); ul.append(li); }} 操作 和 显示笔记本是一样的，找到ul,清空ul中的元素，遍历 把var li=noteTemplete中的[title] 替换成note.title。在把对应的noteId绑定到 li上，后面查找笔记下的title和body需要用到。
上面操作不误的话 应该就可以点击 笔记本 显示笔记了
下一篇: