云笔记项目 Unit07

最新推荐文章于 2023-07-16 10:52:52 发布
最新推荐文章于 2023-07-16 10:52:52 发布
阅读量838 收藏 3
点赞数 1
分类专栏： Java

云笔记

弹出笔记子菜单

1. 利用事件冒泡在 note-list 上绑定事件弹出笔记子菜单:

  1. 重构笔记列表模板, 为笔记子菜单触发按钮添加类 btn-note-menu

    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" 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" title="删除"><i class="fa fa-times"></i></button></dt>'+
    '</dl>'+
    '</div>'+
    '</li>';

  2. 在ready方法中绑定 触发事件

    //绑定笔记子菜单的触发事件
$('#note-list').on('click', 
        '.btn-note-menu', showNoteMenu);

  3. 添加事件处理方法

    /** 显示笔记子菜单处理方法 */
function showNoteMenu(){
    //找到菜单对象, 调用show() 方法
    var btn = $(this);
    //如果当前是被选定的 笔记项目 就弹出子菜单
    btn.parent('.checked').next().toggle();
    //btn.parent('.checked') 获取当前按钮的父元素
    //这个元素必须符合选择器'.checked', 如果不
    //符合就返回空的JQuery元素.  
    return false;//阻止点击事件的继续传播!避免传播到document对象时候, 触发关闭菜单事件
}

  4. ready方法中绑定document的点击事件, 利用事件冒泡关闭子菜单

    //监听整体的文档区域, 任何位置点击都要关闭笔记子菜单
$(document).click(hideNoteMenu);

  5. 添加事件处理方法关闭子菜单

    /** 关闭笔记子菜单事件处理方法 */
function hideNoteMenu(){
    $('.note_menu').hide();
}

移动笔记功能

原理:

这里写图片描述

这里写图片描述

1. 持久层: 重用 NoteDao.updateNote 方法

略...

2. 业务层

  1. 业务层方法 NoteService

    boolean moveNote(String noteId, String notebookId)
        throws NoteNotFoundException,
        NotebookNotFoundException;

  2. 实现业务层方法: NoteServiceImpl

    public boolean moveNote(String noteId, String notebookId)
        throws NoteNotFoundException, NotebookNotFoundException {
    if(noteId==null || noteId.trim().isEmpty()){
        throw new NoteNotFoundException("ID不能空");
    }
    Note note = noteDao.findNoteById(noteId);
    if(note==null){
        throw new NoteNotFoundException("没有对应的笔记");
    } 
    if(notebookId==null||notebookId.trim().isEmpty()){
        throw new NotebookNotFoundException("ID空");
    }
    int n=notebookDao.countNotebookById(notebookId);
    if(n!=1){
        throw new NotebookNotFoundException("没有笔记本");
    }

    Note data = new Note();
    data.setId(noteId);
    data.setNotebookId(notebookId);
    data.setLastModifyTime(System.currentTimeMillis());

    n = noteDao.updateNote(data);

    return n==1;
}

  3. 测试

3. 表现层

  1. 在ready方法中监听移动按钮点击事件打开对话框

    //监听笔记子菜单中移动按钮的点击
$('#note-list').on('click', '.btn_move', showMoveNoteDialog);

  2. 添加事件处理方法, 打开对话框, 打开对话框以后加载笔记本下拉列表

    /** 显示移动笔记对话框 */
function showMoveNoteDialog(){
    var id = $(document).data('note').id;
    if(id){
        $('#can').load('alert/alert_move.html', loadNotebookOptions);
        $('.opacity_bg').show();
        return;
    }
    alert('必须选择笔记!');
}

  3. 添加加载笔记本列表事件方法

    /** 加载移动笔记对话框中的笔记本列表 */
function loadNotebookOptions(){
    var url = 'notebook/list.do';
    var data={userId:getCookie('userId')};
    $.getJSON(url, data, function(result){
        if(result.state==SUCCESS){
            var notebooks = result.data;
            //清楚全部的笔记本下拉列表选项
            //添加新的笔记本列表选项
            $('#moveSelect').empty();
            var id=$(document).data('notebookId');
            for(var i=0; i<notebooks.length; i++){
                var notebook = notebooks[i];
                var opt=$('<option></option>')
                    .val(notebook.id)
                    .html(notebook.name);
                //默认选定当时笔记的笔记本ID
                if(notebook.id==id){
                    opt.attr('selected','selected');
                }
                $('#moveSelect').append(opt);
            }
        }else{
            alert(result.message);
        }
    });
}

  4. 在ready方法中监听 移动笔记对话框中的确定按钮

    //监听移动笔记对话框中的确定按钮
$('#can').on('click', '.move-note', moveNote);

    重构 alert_move.html, 在确定按钮上增加 类 move-note

    <button type="button" class="btn btn-primary sure move-note">确 定</button>

  5. 添加移动笔记对话框确认事件:

    /** 移动笔记事件处理方法 */
function moveNote(){

    var url = 'note/move.do';
    var id = $(document).data('note').id;
    var bookId=$('#moveSelect').val();
    //笔记本ID没有变化, 就不移动了!
    if(bookId==$(document).data('notebookId')){
        return;
    }
    var data = {noteId:id, notebookId:bookId};
    $.post(url, data, function(result){
        if(result.state==SUCCESS){
            //移动成功, 在当前笔记列表中删除移动的笔记
            //将笔记列表中的第一个设置为当前笔记, 否则清空边编辑区域
            var li = $('#note-list .checked').parent();
            var lis = li.siblings();
            if(lis.size()>0){
                lis.eq(0).click();
            }else{
                $('#input_note_title').val("");
                um.setContent("");
            }
            li.remove();
            closeDialog();//关闭对话框!
        }else{
            alert(result.message);
        }
    });
}

  6. 测试

删除笔记功能

1. 持久层

  1. 重用 NoteDao.updateNote 方法.

    略

  2. 重构SQL, 笔记本列表中显示没有删除的笔记: NoteMapper.xml

    <select id="findNotesByNotebookId"
    parameterType="string"
    resultType="map">
    select 
        cn_note_id as id,
        cn_note_title as title 
    from 
        cn_note
    where
        cn_notebook_id = #{notebookId} and 
        cn_note_status_id = '1'
    order by
        cn_note_last_modify_time desc
</select>

    注意：　增加了查询条件 cn_note_status_id = ‘1’

2. 业务层

  1. 添加业务层方法 NoteService

    boolean deleteNote(String noteId)
    throws NoteNotFoundException;

  2. 实现业务层方法 NoteServiceImpl

    public boolean deleteNote(String noteId) throws NoteNotFoundException {
    if(noteId==null || noteId.trim().isEmpty()){
        throw new NoteNotFoundException("ID不能空");
    }
    Note note = noteDao.findNoteById(noteId);
    if(note==null){
        throw new NoteNotFoundException("没有对应的笔记");
    } 

    Note data = new Note();
    data.setId(noteId);
    data.setStatusId("0");
    data.setLastModifyTime(System.currentTimeMillis());

    int n = noteDao.updateNote(data);

    return n==1;
}

  3. 测试

    略

3. 控制器

  1. 添加控制器方法 NoteController

    @RequestMapping("/delete.do")
@ResponseBody
public JsonResult delete(String noteId) {
    boolean b = noteService.deleteNote(
            noteId);
    return new JsonResult(b);
}

  2. 测试 

    略

4. 表现层

  1. 在ready 方法中监听 笔记子菜单中的删除按钮:

    //监听笔记子菜单中删除按钮的点击
$('#note-list').on('click', '.btn_delete', showDeleteNoteDialog);

    添加事件处理方法

    /** 打开删除笔记对话框 */
function showDeleteNoteDialog(){
    var id = $(document).data('note').id;
    if(id){
        $('#can').load('alert/alert_delete_note.html', loadNotebookOptions);
        $('.opacity_bg').show();
        return;
    }
    alert('必须选择笔记!');
}

  2. 在ready中监听删除笔记对话框中的确定按钮事件

    //监听删除笔记对话框中的确定按钮
    $(‘#can’).on(‘click’, ‘.delete-note’, deleteNote);

    重构 alert_detete_note.html 在确定按钮上增加 类 delete-note

    <button type="button" class="btn btn-primary sure delete-note">删 除</button>

    事件监听方法

    /** 删除笔记功能 */
function deleteNote(){
    var url = 'note/delete.do';
    var id = $(document).data('note').id;
    var data = {noteId:id};
    $.post(url, data, function(result){
        if(result.state==SUCCESS){
            //删除成功, 在当前笔记列表中删除笔记
            //将笔记列表中的第一个设置为当前笔记, 否则清空边编辑区域
            var li = $('#note-list .checked').parent();
            var lis = li.siblings();
            if(lis.size()>0){
                lis.eq(0).click();
            }else{
                $('#input_note_title').val("");
                um.setContent("");
            }
            li.remove();
            closeDialog();//关闭对话框!
        }else{
            alert(result.message);
        }
    });

}

  3. 测试 

    略...

JS 面向对象编程

如何创建JS对象

  1. JSON语法声明对象(直接量声明对象)

    var obj = {};

  2. 使用 Object 创建对象

    var obj = new Object();

JS对象可以后期添加属性

案例

var obj = {};
obj.name = "Tom";

var obj2 = new Object();
obj2.name = "Jerry";

对象特点:

  1. new Object() 和 JSON 语法创建的对象没有差别!
    • JSON语法简洁方便, 更加容易使用
  2. 对象可以随时添加属性
    • 对象.属性 = 值

  3. 不存在的属性, 值是 undefined

    • undefined 相当于 false, 利用这个特点可以用于检测属性是否存在

      if(! obj.age){
    console.log('没有age属性');
}

if(obj.age){
    console.log('年龄:'+obj.age); 
}

  4. 可以随时删除对象的属性

    delete 对象.属性;

  5. JS Object的底层本质是一个散列表!

    • 为对象添加属性, 本质是添加了 key:value, key是属性名, value是属性值.
    • 访问对象属性, 本质是get(key)

JS对象没有封装性可言! 因为不能完整支持面向对象3大特性, 所有JS不是面向对象的编程语言!

JS 对象的方法

js对象的方法, 本质是一个属性, 是一个值是函数对象的属性!

var obj = {};
obj.name = "Tom";
obj.who = function(){
    console.log(this.name);
};

调用方法与访问属性

obj.who();//调用方法
obj.who; 访问属性的值, 函数对象

可以像属性一样删除方法

delete obj.who

可以像属性一样, 修改方法!

obj.who=function(){
    console.log(this.name);
};
obj.who=function(){
    console.log('Hello World!');
};
//who方法引用最后一个函数对象

JS方法没有重载!!

obj.add = function(a, b){
    return a+b;
}
obj.add = function(a, b, c){
    return a+b+c;
}
//最后只保留最后的方法: add = a+b+c
obj.add(1,2) //返回未定义
obj.add(1,2,3) //返回6

使用JSON直接声明属性和方法

var obj = {
    name:'Tom', 
    age:18, 
    who:function(){
        console.log(this.name);
    }
};
//后期扩展属性
obj.price=25;

默认的变量和函数

在网页值直接声明的变量和函数, 是window对象的属性和方法

也可以利用赋值, 修改window提供的属性和方法:

//重写JS原生alert函数
window.alert=function(e){
    $('#can').load('./alert/alert_error.html',function(){
        $('#error_info').text(' '+e);
        $('.opacity_bg').show();
    });
}

更正

  1. 重构 note.js

    更正: 增加 li.data(‘noteId’, note.id) 否则无法再次点击笔记了!

    function addNote(){
    var url = 'note/add.do';
    var notebookId=$(document).data('notebookId');
    var title = $('#input_note').val();

    var data = {userId:getCookie('userId'),
        notebookId:notebookId,
        title:title};
    //console.log(data);

    $.post(url, data, function(result){
        if(result.state==SUCCESS){
            var note=result.data;
            //console.log(note);
            showNote(note);
            //找到显示笔记列表的ul对象
            var ul = $('#note-list ul');
            //创建新新的笔记列表项目 li 
            var li = noteTemplate.replace(
                    '[title]', note.title);
            li = $(li);

            //绑定笔记ID到LI
            li.data('noteId', note.id)

            //设置选定效果
            ul.find('a').removeClass('checked');
            li.find('a').addClass('checked');
            //插入到笔记列表的第一个位置
            ul.prepend(li);
            //关闭添加对话框
            closeDialog();   
        }else{
            alert(result.message);
        }
    });

}

  2. 更正 NoteServiceImpl

    更正: addNote 方法中 String statusId = “1” 否则笔记是删除状态的!

    public Note addNote(String userId, 
        String notebookId, String title)
        throws UserNotFoundException, 
        NotebookNotFoundException {

    if(userId==null||userId.trim().isEmpty()){
        throw new UserNotFoundException("ID空");
    }
    User user=userDao.findUserById(userId);
    if(user==null){
        throw new UserNotFoundException("木有人");
    }
    if(notebookId==null||notebookId.trim().isEmpty()){
        throw new NotebookNotFoundException("ID空");
    }
    int n=notebookDao.countNotebookById(notebookId);
    if(n!=1){
        throw new NotebookNotFoundException("没有笔记本");
    }
    if(title==null || title.trim().isEmpty()){
        title="葵花宝典";
    }
    String id = UUID.randomUUID().toString();
    String statusId = "1";
    String typeId = "1";
    String body = "";
    long time=System.currentTimeMillis();
    Note note = new Note(id, notebookId,
        userId, statusId, typeId, title, 
        body, time, time);
    n = noteDao.addNote(note);
    if(n!=1){
        throw new NoteNotFoundException("保存失败");
    }
    return note;
}
KopWelkin
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java入门级项目云日记(3.29G)
04-11
Java入门级项目云日记(3.29G) 〖课程介绍〗: Java入门级项目云日记(3.29G) 〖课程目录〗: 01_001_云R记_项目介绍.mp4 02_002_云R记_项目开发流程.mp4 03_003_云R记_项目演示.mp4 04_004_云R记_需求分析.mp4 05_005_云R记_数据库设计.mp4 06_006_云R记_环境搭建.mp4 07_007_云R记_分层思想.mp4 08_008_云R记_获取数据库连接.mp4 09_009_云R记_使用单元测试.mp4 10_010_云R记_使用日志.mp4 11_011_云R记_用户模块_用户登录_前端代码实现.mp4 12_012_云R记_用户模块_用户登录_思路分析.mp4 13_013_云R记_用户模块_用户登录_后端代码实现.mp4 14_014_云R记_用户模块_用户登录__功能测试.mp4 15_015_云R记_用户模块_BaseDao.mp4 16_016_云R记_用户模块_BaseDao__查询.mp4 17_017_云R记_用户模块_BaseDao.mp4 18_018_云R记_用户模块_B
云笔记六
qq_45337854的博客
06-24 98
一、点击加号创建笔记本 $("#add_notebook").click(alertAddBookWindow); 创建笔记本 $("#can").on(“click”,"#book_addsure",sureAddBook); 发送Ajax请求 服务器端处理 Ajax回调处理 添加成功或添加失败 $("#can").on(“click”,".cancle,.close",closeAlertWindow); 二、创建笔记 $("#add_note").click(alertAddBookWindow);
个人云日记项目
m0_69712602的博客
08-12 1054
java的个人云日记项目实战
云日记个人中心项目思路
m0_51170293的博客
04-10 371
从session作用域中获取用户昵称 （如果在js中想要使用el表达式获取域对象，js需要写在JSP页面中，无法在js文件中获取）通过用户ID查询除了当前登录用户之外是否有其他用户使用了该昵称。如果用户昵称与session中的昵称一致，则return。2. 从session作用域获取用户对象，得到用户ID。如果为空，提示用户，禁用按钮，并return。2. 调用Dao层，通过用户ID和昵称查询用户对象。如果不可用，提示用户，并禁用按钮。3. 调用Service层的方法，得到返回的结果。如果为空，返回"0"
云笔记项目
Vincent_Zhang233的博客
10-06 487
云笔记项目
Javaweb云笔记项目
03-06
达内云笔记是一个综合性的WEB项目有利于新手巩固基础和知识点;云笔记，是tmocc上的一个子项目，用于客户进行在线学习记录，分享，收藏笔记，以及参与社区活动。传入的文件中有整个项目的源码+HTML网页+建表sql语句+...
DaNei云端笔记项目静态资源
06-07
云笔记项目的所有准备工作都已经存在，直接搭建环境编写代码即可，适合小白练手
note_day12.zip_云笔记_云笔记项目
09-23
云笔记项目，用java写的，具有创建笔记删除笔记，功能，还有创建笔记本，不过没有导入jar包，需要导入spring和mybatis的jar包
达内java云笔记项目
01-05
含有建表文件，不含JAVA代码，只有HTML文件
java云笔记 项目+sql文件+超清晰注释+项目经验
07-11
项目采用这些技术和设计思想 Ajax,jQuery Spring(MVC,IOC,AOP) MyBatis Ajax:异步请求响应处理;页面局部刷新 (所有请求一律采用Ajax方式交互) jQuery:简化js和Ajax编程,实现前端处理 SpringMVC:实现控制层,用于接收请求分发 给业务模型处理,并实现请求响应 SpringIOC:实现管理控制层,业务层,数据访问层 组件,采用注入方式建立关系(解耦) SpringAOP:实现事务管理和异常日志处理 (在不修改原有组件情况下,追加功能) MyBatis:实现数据库操作,实现数据访问层 界面一律采用HTML 所有交互一律采用Ajax模式 所有交互一律采用无状态会话处理
云笔记项目完整版源码
06-20
这个是一件编写完成的云笔记项目,有兴趣的可以参考x下,如果需要下载未编写的资料我也有上传
达内云笔记项目完整代码+注释
07-15
达内课程项目云笔记项目，采用SSM框架，完整实现云笔记功能，代码注释详细，结构清晰，方便学习模仿
达内云笔记项目
04-01
二、项目介绍 1、整体需求 达内云笔记，是达内在线教育平台(tmooc)中的一个子项目， 用于在学员学习时，随时的记录笔记、收藏笔记、分享笔记 以及参加笔记相关的活动。期望达到一个无时不学习，不处 不笔记的目标。 2、技术架构 1）开发环境 WindowsXP+JDK1.6+Tomcat7+MySql5.5+MyEclipse8.5 2）采用技术 Java+MyBatis3.2+SpringMVC+Spring3.2+JQuery2.1 Java：基础的核心技术 MyBatis：访问数据库 SpringMVC：对代码分层，实现MVC，重点在于处理请求 Spring：管理组件、整合MyBatis、处理一些通用的业务 JQuery：处理客户端的逻辑，以及发送异步请求 3）设计思想 采用了MVC分层思想，将代码分为如下： 视图层V：JQuery2.1 控制层C：DispatcherServlet+Controller(SpringMVC) 业务层M：Java 持久层M：MyBatis 4）部署方案 采用分布式部署，如图
达内Java项目云笔记12天完整源码cloudnote_day12_all.zip
01-04
达内Java项目云笔记12天完整源码cloudnote_day12_all.zip
23. 云笔记项目
potato123232的博客
08-14 460
项目视频地址P31-P36需求是这样的我们简单分析一下，首先任意网站得有一个主页，主页的内容在后期修改会很频繁，所以主页要单独做一个应用，其余就是用户做一个应用，笔记做一个应用，用户与笔记各自给一个数据表，然后使用外键将两个数据表联系起来。...
云日记项目
m0_59708269的博客
04-20 1244
一.创建数据库 二.连接数据库 1.创建db.properties # 连接MYSQL数据库的配置文件 注：等号的前后不要写空格 # 驱动名 jdbcName=com.mysql.cj.jdbc.Driver # 数据库连接 （ db_lezijie_note是数据库的名称） dbUrl=jdbc:mysql://localhost:3306/lezijie_note?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2
java+springboot基于云的学习笔记系统设计与开发 _44va6
qq_3166678367的博客
07-16 237
系统实现登录、个人信息修改，还可以对个人中心，用户管理，笔记本管理，笔记分享管理，分享类型管理，学习资料管理，购买资料管理，完整资料管理，系统管理等功能进行操作，增强了使用者的操作体验。管理员模块主要针对整个系统的管理进行设计，提高了管理的效率和标准。通过研究，以MySQL为后端数据库，以IDEA为开发平台，采用springboot架构，建立以个人中心，用户管理，笔记本管理，笔记分享管理，分享类型管理，学习资料管理，购买资料管理，完整资料管理，系统管理等必要功能的、稳定的学习笔记系统。
计算机毕业设计之云日记设计与实现
wx_zhuyanbishe的博客
06-26 846
云日记设计与实现 JSP技术；MYSQL数据库；SSM框架
云笔记项目springboot
最新发布
09-11
云笔记项目是一个使用Spring Boot框架开发的项目。它利用Spring Data JPA来实现对数据库的操作。在该项目中，使用了Eclipselink作为持久化提供程序，来与数据库进行交互。项目中包含了多个示例模块，例如eclipselink...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值