云笔记系统项目

1、针对用户笔记进行管理。用户使用系统可以进行下面的操作:

     (1)用户模块:登录、注册、退出、修改密码;

     (2)笔记本模块:笔记本创建、删除、更新、查看;

     (3)笔记模块:笔记创建、删除、更新、查看、转移;

     (4)分享和收藏模块:笔记分享、收藏、搜索;

     (5)活动模块:参加活动、查看活动、查看活动笔记。

2、项目使用技术:

云笔记系统项目_第1张图片

     (1)客户端:jQuery+Ajax

             服务器端:Spring(MVC, IOC, AOP),MyBatis

             jQuery:简化客户端js和Ajax编程

             Ajax:异步发送HTTP请求,实现页面的局部处理

             SpringMVC:接收HTTP请求,调用业务组件处理,返回JSON结果

             SpringIOC:管理Controller,Service,Dao,关系注入

             MyBatis:用于实现数据库操作,完成Dao组件

             AOP:实现事务和异常日志切入处理

     (2)编程模式组合:Ajax+Servlet+JSON(用json-lib.jar)

                                    Ajax+SpringMVC+JSON(用jackson.jar)

     (3)SpringMVC方式流程(JSP响应):请求-->DispatcherServlet-->HandlerMapping-->Controller-->返回ModelAndView/String-->ViewResolver-->JSP。

             SpringMVC方式流程(JSON响应):请求-->DispatcherServlet-->HandlerMapping-->Controller-->返回数据对象或数据集合-->在Controller方法前添加@ResponseBody-->调用jackson包将返回数据对象转成JSON字符串输出给客户端。

3、导包:spring-webmvc 3.2.8、jackson 2.2.3、jackson-databind 2.2.3、jackson-annotation2.2.3、commons-codec。

     导入spring-mvc的配置文件。

     案例:/ajax/load1.do

     -->DispatcherServlet(web.xml)-->HandlerMapping(spring-mvc.xml+@RequestMapping)-->AjaxController.load1(编写,扫描,追加注解标记)-->返回User对象-->添加@ResponseBody--调用jackson包将User转成JSON字符串输出。

4、数据库环境

     本项目使用数据库:MySQL

     MySQL与Oracle的不同:

     (1)建表字段类型:MySQL使用Long、Double等,Oracle使用NUMBER;

     (2)数据库函数或关键字:MySQL使用now()来获取系统当前时间,Oracle使用SYSTEM来获取系统当前时间;

     (3)序列:MySQL不支持序列,建表时使用自动递增,Oracle支持序列sequence;

     (4)SQL语句:普通增删改查语句基本一致;

     (5)分页查询语句:Oracle最复杂;

     (6)Oracle按用户划分空间,存储表、序列、索引等对象,MySQL按database库划分空间,库中存储表、索引等对象;

     MySQL常用命令:

     (1)show databases;      //查看库列表

     (2)use  库名;                 //进入指定库中

     (3)show tables;            //查看库中有哪些表

     (4)desc  表名;               //查看表结构

     (5)select,delete,update,insert

     (6)set names utf8;       //设置导入.sql连接时连接的编码及.sql脚本文件字符集

     (7)source    .sql;           //导入sql文件

5、项目开发

     (1)搭建项目框架环境

              jar包

                      spring, mybatis, jackson, mybatis-spring, dbcp, spring-jdbc, mysql驱动;

              配置文件

                      conf/spring-mvc.xml(MVC相关定义)

                      conf/spring-mybatis.xml(MyBatis相关定义)

                      mapper/*Mapper.xml(SQL定义)

              src源码

                      com.tedu.cloudnote.controller

                             一个请求写一个controller,方法名为execute

                      com.tedu.cloudnote.service

                             一个模块写一个service

                      com.tedu.cloudnote.dao

                             一个表写一个dao

                      com.tedu.cloudnote.entity

                             一个表写一个实体类

                      com.tedu.cloudnote.util

                             一个表写一个工具类

              webapp

                      /scripts

                      /images

      (2)程序功能结构图

云笔记系统项目_第2张图片

6、功能模块

     (1)登录模块

       <1>发送Ajax请求

              发送时机:登录按钮单击

              请求参数:用户名和密码

              请求地址:/user/login.do

              请求提交方式:post

      <2>服务器端处理

             /user/login.do    -->  DispatcherServlet  -->  HandlerMapping  -->  UserLoginController.execute  -->  UserService.checkLogin  -->  UserDao.findByName  -->  cn_user表(查询)  -->  返回JSON结果

      <3>Ajax回调处理

             解析返回JSON数据{"status":xx, "msg":xx, "data":xx}

             用户名不正确在输入框后显示提示信息,密码不正确在输入框后显示提示信息,都正确,进入edit.html主界面

     (2)注册模块

      <1>发送Ajax请求

             发送时机:注册按钮的单击

             请求参数:用户名、昵称、密码

             请求地址:/user/add.do

             提交类型:post

      <2>服务器端处理

             /user/add.do  -->  UserAddController.execute  -->  UserService.addUser  -->  UserDao.save  -->  cn_user表插入  -->  返回JSON结果{"status":0, "msg":"xxx", "data":xxx}

      <3>Ajax回调处理

             解析JSON结果,如果注册成功,返回到登录界面,如果注册失败,就在注册界面提示信息。

     (3)笔记本列表显示

      <1>发送Ajax请求

             发送时机:edit.html一显示就自动发送 onload相当于$(function(){...})

             请求参数:Session(安全),Cookie(方便),Session+Cookie,Cookie+DB,用户ID(从Cookie取)

             服务器端处理大量请求使用技术:Tomcat集群+Ngnix负载均衡方式,Ngnix可以部署静态资源(HTML,CSS,JS)。session存放问题,两种方案:1.无会话状态编程,不用session 2.session+Redis(内存数据库)

             请求地址:/book/loadbooks.do

             提交类型:post

      <2>服务器端处理

             /book/loadbooks.do --> LoadBooksController.execute --> BookService.loadUserBooks --> BookDao.findByUserId --> cn_notebook(查询) --> 返回JSON结果

      <3>Ajax回调处理

             解析返回的JSON结果,提取data属性值,循环生成笔记本列表

      (4)笔记列表显示

      <1>发送Ajax请求

             发送时机:单击笔记本列表的li元素

             请求参数:li元素上绑定的笔记本ID

             请求地址:/note/loadnotes.do

             请求提交类型:post

      <2>服务器端处理

             /note/loadnotes.do  -->  LoadNotesController.execute  -->  NoteService.loadBookNotes  -->  NoteDao.findByBookId  -->  cn_note(查询)  -->  返回JSON结果

      <3>Ajax回调处理

             解析JSON结果,提取data属性值,循环生成笔记本列表的li元素

     (5)笔记显示

      <1>发送Ajax请求

             发送时机:点击笔记li元素

             请求参数:li元素绑定的笔记ID

             请求地址:/note/load.do

             提交类型:post

      <2>服务器端处理

             /note/load.do --> LoadNoteController.execute  --> NoteService.loadNote  -->  NoteDao.findById  -->  cn_note(查询)  -->  返回JSON结果

      <3>Ajax回调处理

             解析返回的JSON结果,取出标题和内容放到页面指定位置。

     (6)保存笔记

      <1>发送Ajax请求

             发送时机:“保存笔记”按钮的单击

             请求参数:笔记标题,笔记内容,选中笔记li元素绑定的笔记ID

             请求地址:/note/update.do

             提交类型:post

      <2>服务器端处理

             /note/update.do  -->  UpdateNoteController.execute  -->  NoteService.updateNote  -->  NoteDao.updateNote  -->  cn_note(更新操作)  -->  返回JSON结果

      <3>Ajax回调处理

             解析返回的JSON结果,提示“保存笔记成功”,更新列表中li元素显示标题。

     (7)对话框处理

              在alert文件夹下有很多alert内容页面,在edit.html页面中有两个div,一个是id=can的对话框div,另一个是class="opacity_bg"的背景div。

              显示对话框采用$("#can").load(alert页面);

     (8)创建笔记本

       <1>发送Ajax请求

              发送时机:点击对话框中“创建”按钮

              请求参数:用户ID(从Cookie取),笔记本名(从对话框取)

              请求地址:/book/add.do

              提交类型:post

       <2>服务器端处理

              /book/add.do  -->  AddBookController.execute  -->  BookService.addBook  -->  BookDao.save  -->  cn_notebook(添加)  -->  返回JSON结果

       <3>Ajax回调处理

              解析返回的JSON结果,关闭对话框,在笔记本列表中添加一个li元素,弹出提示框提示创建笔记本成功

     (9)创建笔记

      <1>发送Ajax请求

             发送时机:点击对话框中“创建”按钮,"#sure_addnote"

             请求参数:笔记名称,选中的笔记本ID,用户ID(Cookie取)

             请求地址:/note/add.do

             提交类型:post

      <2>服务器端处理

             /note/add.do  -->  AddNoteController.execute  -->  NoteService.addNote  -->  NoteDao.save  -->  cn_note(插入)  -->  返回JSON结果

      <3>Ajax回调处理

             成功:关闭对话框,创建笔记列表li元素,提示创建成功

     (10)笔记删除

             功能描述:单击笔记菜单的“x”按钮时,弹出删除对话框,点击对话框中的“删除”按钮,执行删除操作。alert_delete_note.html

      <1>发送Ajax请求

             发送时机:对话框中“删除”按钮的单击

             请求参数:选中li的笔记ID(按选中的效果获取)

             请求地址:/note/delete.do

             提交类型:post

      <2>服务器端处理

             /note/delete.do  -->  DeleteNoteController.execute  -->  NoteService.deleteNote  -->  NoteDao.updateStatus  -->  cn_note(按笔记ID将cn_note_status_id更新为"2")  -->  返回JSON结果

     <3>Ajax回调处理

            success : a. 移除列表中删除的笔记li元素

                          b. 提示笔记删除成功

            error : 提示笔记删除失败

      (11)笔记转移

            功能描述:单击笔记菜单的“转移至...”按钮,弹出笔记转移对话框,在对话框下拉列表中,选择要转入的笔记本项,点击确定转移按钮执行转移操作。

      <1>发送Ajax请求

             发送时机:对话框中“确定”按钮的单击

             请求参数:选中项的笔记ID,要转入的笔记本ID

             格式检查:要转入的笔记本是否和原笔记本相同

             请求地址:/note/move.do

             请求类型:post

      <2>服务器端处理

             /note/move.do  -->  MoveNoteController.execute  -->  NoteService.moveNote  -->  NoteDao.updateBookId  -->  cn_note(按笔记ID将cn_notebook_id更新)  -->  返回JSON结果

      <3>Ajax回调处理

             success : a. 移除笔记列表li元素;b. 提示笔记转移成功

             error:提示笔记转移失败

      (12)笔记分享

      <1>需求:用户点击笔记菜单中的“分享”按钮,发送一个Ajax请求,提交笔记ID,进入服务器,根据笔记ID搜索笔记标题和内容,然后插入到cn_share分享表中。

      <2>发送Ajax请求

             发送时机:笔记菜单中“分享”按钮单击

             请求参数:笔记ID

             请求地址:/note/share.do

             提交类型:post

      <3>服务器端处理

             /note/share.do  -->  ShareNoteController.execute  -->  NoteDao.findById/NoteService.shareNote  -->  ShareDao.save  -->  cn_share(插入)  -->  返回JSON结果

      <4>Ajax回调处理

             success:提示笔记分享成功(简单版)

             success:在笔记标题后面添加分享图标,提示分享成功(复杂版)


      (13)分享笔记的搜索

      <1>需求描述:用户输入搜索关键字,按回车键,发送Ajax请求,去cn_share分享表查询笔记,生成结果列表。

      <2>发送Ajax请求

             发送时机:id=search_note的输入框发生回车事件

             请求参数:输入框输入的关键字内容

             请求地址:/note/search_share.do

             提交类型:post

      <3>服务器端处理

             /note/search_share.do  -->  SearchShareNoteController.execute  -->  NoteService.searchShareNote  -->  ShareDao.findLikeTitle  -->  cn_share(模糊查询)  -->  返回JSON结果

      <4>Ajax回调处理

             成功:解析返回的JSON结果,将查询的cn_share数据生成li元素添加到“搜索结果”列表区。

      (14)查看搜索出来的笔记信息

             需求:点击搜索列表笔记li,发送Ajax请求,去cn_share表查询笔记信息,返回JSON结果,显示到“预览笔记”区域。


你可能感兴趣的:(J2EE)