基于springmvc和mybatis的云笔记本科毕业论文 下载本文

北华航天工业学院毕业论文

此时将把用户信息插入到数据库表中,这样一个新的用户就注册完成了!但此时注册成功仅限于后台方面,还需要将注册成功的效果展现在前端。我们把NoteResult类型封装成json串的形式,将其作为结果返回到html前端,NoteResult有三个字段,分别是

private int status;//状态 等于0时成功,非0时失败

private String msg;//消息

private Object data;//所要传输数据

前端接收数据,判断回调函数是否成功,若成功,则将成功的结果显示到页面上。 $.ajax({ });

url:\type:\data:{\nickname}, dataType:\

success:function(result){//成功回调函数 }

if(result.status==0){ }

alert(result.msg);

$(\触发返回按钮的单击事件 $(\

}else if(result.status==1){

6.2.2 用户登录

登录模块的关键信息是用户名和密码。当用户输入用户名和密码,并点击登录时,出发“登录”按钮的单击事件,首先检测用户名密码是否合法,不合法的话给予相应的提示,合法的话,则浏览器发送ajax请求到服务器,查询数据库中没有没相应的用户名和密码,若用户名密码不正确,则给予提示用户名密码不相符,给予阻拦;若用户名密码对应,则服务器给予回应,浏览器连接到edit.html页面,并且在用户登录的同时,我们加以安全保护,将用户的ID写入cookie,并保留两个小时,若浏览器被关闭,当用户再次访问云笔记系统时,需要重新输入用户名和密码,让用户两个小时没有任何操作时,同样也会自动注销,必须重新登录。同时cookie里面所绑定的用户id也是区分不同用户的关键所在。同样的,我们从网页发送数据格式仍为json类型。

19

北华航天工业学院毕业论文

6.2.3 修改密码

修改密码的流程类似于用户注册,在网页上获取用户输入的数据,首先进行合法化检查,检查不通过直接在网页端进行拦截;检查通过后,将数据发送到服务器,服务器将比对原密码是否与该用户的密码一致,若一致则将密码改成新密码;若比对不一致,则返回msg,“原密码错误”的消息提示。

6.2.4 退出登录

退出登录操作相对简单,只需将绑定在cookie中的user_id释放就可以了。将cookie中的user_id释放的方法有很多,比如调用destory方法。这里用的方法是将uid的保留时间设置成为0,相当于直接销毁了,然后将页面直接连接到登录界面,此时没有cookie中绑定的uid,直接想进入主界面是不可能的。

6.3 笔记本模块

6.3.1 加载笔记本列表

笔记本列表应该是用户登录的同时,随网页一起加载进来的,即用户登录后,就能看到已经加载好的笔记本列表。这时,应把加载笔记本列表的代码写在onload()方法中。当把代码写在$();中,页面加载时将会自动运行。这时网页不用获取用户输入的数据,直接请求cookie中的uid,然后将数据发送到服务器就可以了,服务器将以uid为依据,在数据库中查询该用户的笔记本信息,将其返回到html端,网页端再将其显示出来。

6.3.2 笔记本重命名

对于笔记本的重命名,使用这样的触发事件:当光标停留在笔记本的名字上面时,提示“双击修改笔记本名称”,此时只需要将笔记本的li的title属性设置为“双击修改笔记本名称”就可以了,然后给笔记本的li添加dblclick()的触发事件,当双击笔记本的名字时,弹出修改笔记本的html,然后将除了此html外的内容设置为黑色半透明的状态。重命名的同时,同样设置了合法性检查的过滤器。当笔记本名字输入为空时,提示笔记本名字不能为空,这时,为了使该提示更加的醒目,所做的不是一个简单的页面提示,将这个提示转换到新的一个页面,然后使用定时器setTimeout(),1.5秒后自动跳转到重命名界面让用户重新输入笔记本的名称。这样大大减少了用户的非法操作的可能性。

20

北华航天工业学院毕业论文

6.3.3 新建笔记本

用户点击笔记本列表右上角的“+”时,将会弹出“新建笔记本”的html,此时将给“+”添加一个单击事件click(),当用户点击时触发,加载alert_notebook.html,同样的也设置了合法性检查,当用户输入不合法时,将弹出相应的提示框,利用setTimeout定时器,1.5秒后返回到新建笔记本页面;当用户输入的数据合法时,浏览器将发送ajax请求到服务器,服务器响应事件,获取到用户数据的数据,将其插入到数据库中,返回新建成功的提示,并将用户新建的笔记本直接显示到笔记本列表当中,而非刷新整个网页。Ajax的好处就在于此,局部刷新就可以获得我们想要的结果。

6.3.4 删除笔记本

删除笔记本就是在笔记本列表的右端加入了一个删除按钮,当用户点击时,触发该按钮的单击事件click(), 由于不确定用户是想要删除该笔记本,还是因为手误点到了删除按钮,若此时直接删除该笔记本是不合理的,如果用户手误点到了删除按钮直接把笔记本删除,则会造成相当坏的用户体验,这样不利于产品的发展。所以应设置一个提示“确定要删除该笔记本吗?”,若此时用户再次点击确定,则证明用户是真的想删除该笔记本了,所以此时只需要将数据库中的该条记录删除掉即可。

6.4 笔记模块

6.4.1 加载笔记列表

加载笔记列表的功能类似于加载笔记本列表,同样在$()中写入请求与加载列表的代码即可,但应该注意的是,加载笔记列表的时候,应该加载所选中的笔记本当中的笔记信息,所以,如何获取选中的笔记本的ID是加载笔记列表的关键。因此加载笔记本列表的时候,应当从数据库里面获取当前笔记本的id,绑定在笔记本

  • 当中,当加载笔记列表的时候,只需将选中的笔记本
  • 中的id读出来,再以这个id为查询条件,将笔记列表显示出来即可。

    6.4.2 新建笔记

    当用户点击笔记列表右上角的“+”时,弹出新建笔记的html,该过程类似于新建笔记本。但需要注意的是,笔记应该有的信息绑定在选中笔记本

  • 的id中,将id读取后,

    21

    北华航天工业学院毕业论文

    以id为条件,将新建的笔记存放在该笔记本里。

    6.4.3 修改及加载笔记信息

    点击笔记本的

  • 时,将笔记信息加载到右侧的显示框中。根据所点击的笔记id查询数据库中笔记的信息,将笔记的标题显示到标题框中,将笔记的内容显示到umeditor编辑框中。修改笔记本信息则只需要在右侧的编辑框中,将笔记修改成用户所需要的形式,点击右上方的保存笔记按钮即可。当点击“保存笔记”按钮时,浏览器会发送请求,请求服务器修改笔记内容,同时浏览器传递笔记id,服务器接收传递过来的参数,将cn_note表里面的数据改为用户所保存的笔记信息。

    6.4.4 笔记的删除、移动与分享

    在笔记列表的右侧有一个按钮,点击之后会出现下拉框,下拉框里面包含三个小按钮,当然点击这个按钮也需要单击的事件的出发。这三个按钮分别是“移动”、“分享”、“删除”。

    移动笔记本就是将当前笔记移动到任何你想要的笔记本的目录下,核心技术是将当前笔记的笔记本id改为想要移动到的笔记本的笔记id即可。当点击移动时,会弹出一个移动笔记的html,然后将该用户的所有笔记本以下拉框的形式显示到当前页面,用户通过选择不同的笔记本来实现移动效果。

    分享则是将用户喜欢的笔记分享到所有用户都能看得到的地方,即公有化。当用户点击分享按钮时,后台需要进行两个操作:第一,通过用户传递过来的笔记的id查询出cn_note中的笔记信息;第二,将查询出来的笔记信息插入cn_share表中。不同用户可以通过右上角的“放大镜”搜索自己想要的笔记资源。当用户输入关键字时,则会以关键字为基准,在cn_share表中进行模糊查询,并将查询的的结果以

  • 的形式显示在分享列表中;当用户什么都没有输入直接点击回车时,服务器则会将所有用户的分享的笔记都查询出来,显示到分享列表。

    笔记的删除不同于笔记本的删除,笔记的删除分为硬删除和软删除,硬删除直接将笔记信息从数据库中删除,软删除则是将cn_note里面的标志位cn_status_id改为1,相当于将笔记从笔记列表移动到了回收站,笔记列表显示的时候,同样有两个条件,第一,笔记属于该用户的笔记,第二,标志位为0。这样回收站的笔记就不会被显示到笔记列表中。

    6.4.5 笔记的收藏

    收藏的功能是基于分享的功能之上的,用户通过模糊搜索到其他用户分享的笔记,

    22