Springboot重构-云笔记(2)

上面介绍了整个项目的基本配置，配置成功之后我们就可以动手撸代码了。本文章不是教程，只供楼主自己记录学习，和解决问题时的思路。

一、设计数据库

1.首先表的设计，项目比较小，表也很简单，先简单设计让项目先跑起来。

四张表，cn_note 是笔记表,cn_notenook是笔记本表，cn_stars 收藏表，cn_user 用户表

二、运行项目

三.展示登陆用户下笔记本功能设计思路

1.登陆成功，跳转到笔记本界面，会立刻加载这个用户下的所有笔记。

所有功能是使用js，ajax来和后端进行交互的。前端代码如下：

edit.jsp

创建newNote.js, 在edit.jsp中引入

<script type="text/javascript" src="../../scripts/newNote.js"></script>

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")
@ResponseBody
public 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"等于绑定两个class
var notebookTemplate = '<li class="online notebook">' +
    '<a><i class="fa fa-book" title="online" rel="tooltip-bottom">' +
    '</i>[name]</a></li>';
var noteTemplate = '<li class="online note"><a>' +
    '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>[title]' +
    '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down  btn-note-menu">' +
    '<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 btn-note-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 btn-note-delete" title="删除"><i class="fa fa-times"></i></button></dt>' +
    '</dl></div></li>';

在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")
@ResponseBody
public 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需要用到。

上面操作不误的话应该就可以点击笔记本显示笔记了

下一篇: Springboot重构-云笔记(3)

posted @ 2018-07-04 15:46 王某人i 阅读(178) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Springboot重构-云笔记(2)

公告