Springboot重构-云笔记(3)

上面 已经介绍了用JS实现，在页面上展示登陆用户下的笔记本功能 和 点击笔记本 展现笔记本下的笔记功能。

接着 还是 使用js 来实现其他功能。

一、单击笔记 显示 笔记内容和标题功能 

1.先看效果

在newNote.js中 添加

//单击笔记，显示 title 和内容
$('#note-list').on('click', '.note', showNoteList);

showNoteList

//根据点击笔记title，展现笔记标题和内容
function showNoteList() {
    //当前点击得笔记本
    var li = $(this);
    //li 得父元素找到 a,移除’checked'类
    li.parent().find('a').removeClass('checked');
    //li得 父元素找到 a ,增加checked 类
    li.find('a').addClass('checked');
    //获得当前点击笔记本得noteId
    var noteId = $('#note-list').find('a[class="checked"]').parent().data('noteId');
    showCloudNote(noteId);
}

showCloudNote(noteId) 

function showCloudNote(noteId) {
    var url = 'getCloudNote.do';
    var data = {noteId: noteId};
    $.post(url, data, function (result) {
        if (result.data.state == 0) {
            console.log(result);
            var title = result.data.data.title;
            var body = result.data.data.body;
            $(document).data('oldTitle', title);
            $(document).data('oldBody', body);
            console.log("noteId:" + noteId);
            //显示笔记标题
            document.getElementById('input_note_title').value = title;
            //显示笔记内容
            um.setContent(body);

        } else {
            alert(result.data.data.message);
        }
    })
}

后台代码：

//获取笔记内容
@RequestMapping("getCloudNote.do")
@ResponseBody
public JsonResult getCloudNote(int noteId) {
    System.out.println("获取笔记内容");
    return new JsonResult(editService.getCloudNote(noteId));
}

二. 弹框设计

1.先看edit.jsp 中一段代码

<!-- alert_background 类背景-->
<div class="opacity_bg" style='display:none'></div>
<!-- alert_notebook -->
<div id="can"></div>
<div class="col-xs-2" style='padding:0;' id='notebook-list'>

2.在newNote中添加

//新建笔记本
$('#add_notebook').click(CreateNewNotebook);

//弹出新建笔记本窗口
function CreateNewNotebook() {

    $('#can').load('./alert/alert_notebook.html', function () {
        //显示背景颜色
        $('.opacity_bg').show();
        //焦点
        $('#input_notebook').focus();
        //创建笔记本事件
        $('.sure').click(CreateNote);

    })
}

//创建笔记本
function CreateNote() {
    var userId = getCookie('userId');
    var noteName = $('#input_notebook').val();
    console.log(noteName);
    console.log(userId);
    var data = {userId: userId, noteName: noteName};
    var url = 'createNote.do';
    $.post(url, data, function (result) {
        if (result.data.state == 0) {
            alert("创建成功");
            //创建成功重新加载笔记本列表
            loadNotebooks();
        } else {
            alert(result.data.message)
        }
    });