SpringMVC+Mybatis框架集成开发基础——项目开发流程——03

最新推荐文章于 2024-05-13 15:07:19 发布

Coder_Boy_

最新推荐文章于 2024-05-13 15:07:19 发布

阅读量477

点赞数

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/83450624

版权

项目开发模块开发思路：

笔记本及笔记模块功能

cn_user:用户表
cn_notebook:笔记本表
cn_note:笔记表
一个用户有多个笔记本
每个笔记本有多个笔记

系统采用无会话状态方式处理.不使用Session,
因为不适合服务器集群部署。
发送请求（带身份证+Cookie）—>服务器处理

笔记本列表显示
发送Ajax请求
-页面一出现自动发送请求onload
-请求参数为用户ID
-请求地址为/book/loadbooks.do

服务器端处理
/book/loadbooks.do
—>DispatcherServlet
—>HanlderMapping
—>LoadBooksController.execute
—>BookService.loadUserBooks
—>BookDao—>cn_notebook(查询)
—>返回NoteResult结构的JSON数据

Ajax回调处理
-success:解析JSON结果,循环生成笔记本li列表
-error:提示加载笔记列表失败

点笔记本显示笔记列表
发送Ajax请求
-笔记本li单击 onclick发送请求
-请求参数为笔记本ID
-请求地址为/note/loadnotes.do

服务器端处理
/note/loadnotes.do
—>LoadNotesController.execute
—>NoteService.loadBookNotes
—>NoteDao—>cn_note(查询)
—>返回NoteResult结构的JSON结果

Ajax回调处理
-success:解析JSON结果,循环生成笔记li列表
-error:提示加载笔记列表失败

x.addClass("checked");
x.removeClass("checked");
#点击笔记在编辑区显示笔记内容
##发送Ajax请求
-点击笔记列表li onclick
-请求参数为笔记ID
-请求地址为/note/load.do
##服务器端处理
/note/load.do
-->LoadNoteController.execute
-->NoteService.loadNote
-->NoteDao.findById-->cn_note(查询)
-->返回NoteResult结构的JSON结果

##Ajax回调处理
-success:解析JSON将笔记标题和内容显示到编辑区界面
-error:提示加载失败

#点击"保存笔记"按钮处理
##发送Ajax请求
-“保存笔记”按钮单击onclick
-请求参数：笔记标题、笔记内容、笔记ID
-请求地址：/note/update.do

##服务器端处理
/note/update.do
-->UpdateNoteController.execute
-->NoteService.updateNote
-->NoteDao.update-->cn_note(更新)
-->返回NoteResult结构的JSON

##Ajax回调处理

===================
任务一：独立完成功能
 （挑选：登录，注册，笔记本列表,笔记列表等）

任务二：实现笔记本创建功能（任务一完成后选做）

#创建笔记本操作
##发送Ajax请求
-点击对话框中的"创建"按钮 onclick
-请求参数：笔记本名称，用户ID
-请求地址：/book/add.do
##服务器端处理
/book/add.do
-->AddBookController.execute()
-->BookService.addBook()
-->BookDao.save()
-->cn_notebook(插入)
-->返回NoteResult结构的JSON结果
 {"status":0,msg:"创建笔记本成功","data":"笔记本ID"}

测试
http://localhost:8080/cloud_note_learn
/book/add.do?userId=122&bookName=java

##Ajax回调处理
-success: a.关闭对话框;
                b.追加笔记本li列表项;
                c.提示创建笔记本成功
-error:提示创建笔记本失败

#创建笔记处理
##发送Ajax请求
-点击"创建笔记"对话框的"创建"按钮onclick
-请求参数：笔记名称，笔记本ID，用户ID
-请求地址：/note/add.do
##服务器端处理
/note/add.do
-->AddNoteController.execute
-->NoteService.addNote
-->NoteDao.save-->cn_note(插入)
-->返回NoteResult结构的JSON结果
 data属性：笔记ID
##Ajax回调处理
success: a.关闭对话框;b.追加笔记li列表项;c.提示创建笔记成功

$("#note_ul").on("click",".btn_slide_down",fn)


$(this).parents("li").find(".note_menu");
$(this).parent().next();
#笔记删除
描述：点击X按钮，首先弹出一个删除确认框，
然后点击"删除"按钮再发送Ajax请求执行删除处理。
（服务器将笔记记录中的status_id设置成'2'状态）
##发送Ajax请求
-点击X按钮,弹出确认框(alert_delete_note.html)
-点击确认框中"删除"按钮onclick发送请求
-请求参数：笔记ID
-请求地址：/note/recycle.do
##服务器端处理
/note/recycle.do
-->RecycleNoteController.execute
-->NoteService.recycleNote
-->NoteDao-->cn_note(更新status_id='2')
-->返回NoteResult结构的JSON结果
##Ajax回调处理
-success回调 a:关闭对话框;b:删除笔记li;c:提示删除成功
-error回调 提示删除失败

#笔记转移
##弹出转移对话框
单击笔记菜单中的"转移"按钮,
弹出转移笔记对话框(alert_move.html)，
加载对话框中的笔记本下拉单moveSelect
##单击"转移"按钮操作
###发送Ajax请求
-单击转移对话框中的"确定"按钮,onclick
-请求参数：笔记ID，对话框选中的笔记本ID
-请求地址：/note/move.do

###服务器端处理
/note/move.do
-->MoveNoteController.execute
-->NoteService.moveNote
-->NoteDao.updateBookId
-->cn_note(更新book_id)
-->返回NoteResult结构的JSON

###Ajax回调处理
-success函数:a关闭对话框;b删除笔记li;c提示转移成功
-error函数:提示转移笔记失败

===================
任务一：完成笔记删除和笔记转移功能
任务二：完成笔记本重命名和删除（选做）

项目目录结构：

前端页面部分目录结构：

导入需要的Jar：对应的pom.xml配置

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.study</groupId>
  <artifactId>cloud_note_learn</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
  	<dependency>
  		<groupId>org.springframework</groupId>
  		<artifactId>spring-webmvc</artifactId>
  		<version>3.2.8.RELEASE</version>
  	</dependency>
  	<dependency>
  		<groupId>com.fasterxml.jackson.core</groupId>
  		<artifactId>jackson-core</artifactId>
  		<version>2.2.3</version>
  	</dependency>
  	<dependency>
  		<groupId>com.fasterxml.jackson.core</groupId>
  		<artifactId>jackson-databind</artifactId>
  		<version>2.2.3</version>
  	</dependency>
  	<dependency>
  		<groupId>com.fasterxml.jackson.core</groupId>
  		<artifactId>jackson-annotations</artifactId>
  		<version>2.2.3</version>
  	</dependency>
  	<dependency>
  		<groupId>org.mybatis</groupId>
  		<artifactId>mybatis</artifactId>
  		<version>3.3.0</version>
  	</dependency>
  	<dependency>
  		<groupId>org.mybatis</groupId>
  		<artifactId>mybatis-spring</artifactId>
  		<version>1.2.3</version>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework</groupId>
  		<artifactId>spring-jdbc</artifactId>
  		<version>3.2.8.RELEASE</version>
  	</dependency>
  	<dependency>
  		<groupId>commons-dbcp</groupId>
  		<artifactId>commons-dbcp</artifactId>
  		<version>1.4</version>
  	</dependency>
  	<dependency>
  		<groupId>mysql</groupId>
  		<artifactId>mysql-connector-java</artifactId>
  		<version>5.1.37</version>
  	</dependency>
  	<dependency>
  		<groupId>junit</groupId>
  		<artifactId>junit</artifactId>
  		<version>4.12</version>
  	</dependency>
  	<dependency>
  		<groupId>commons-codec</groupId>
  		<artifactId>commons-codec</artifactId>
  		<version>1.10</version>
  	</dependency>
  </dependencies>
</project>

实体映射配置：

BookMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="com.dk.cloudnote.dao.BookDao">

	<insert id="save" parameterType="com.dk.cloudnote.entity.Book">
		insert into cn_notebook
		(cn_notebook_id,cn_user_id,
		cn_notebook_type_id,cn_notebook_name,
		cn_notebook_desc,cn_notebook_createtime)
		values(#{cn_notebook_id},#{cn_user_id},
			   #{cn_notebook_type_id},#{cn_notebook_name},
			   #{cn_notebook_desc},#{cn_notebook_createtime})
	</insert>
	
	<select id="findByUserId" parameterType="string" 
		resultType="com.dk.cloudnote.entity.Book">
		select * from cn_notebook
		where cn_user_id=#{userId}
	</select>
	
</mapper>

NoteMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="com.dk.cloudnote.dao.NoteDao">
	
	<update id="updateBookId" parameterType="map">
		update cn_note
		set cn_notebook_id=#{bookId}
		where cn_note_id=#{noteId}
	</update>
	
	<update id="updateStatus" parameterType="map">
		update cn_note
		set cn_note_status_id=#{status}
		where cn_note_id=#{noteId}
	
	</update>
	
	<insert id="save" parameterType="com.dk.cloudnote.entity.Note">
		insert into cn_note
		(cn_note_id,cn_notebook_id,
		cn_user_id,cn_note_status_id,
		cn_note_type_id,cn_note_title,
		cn_note_body,cn_note_create_time,
		cn_note_last_modify_time)
	values (#{cn_note_id},#{cn_notebook_id},
		#{cn_user_id},#{cn_note_status_id},
		#{cn_note_type_id},#{cn_note_title},
		#{cn_note_body},#{cn_note_create_time},
		#{cn_note_last_modify_time})
	
	</insert>
	
	<update id="update" parameterType="com.dk.cloudnote.entity.Note">
		update cn_note
		set cn_note_title=#{cn_note_title},
		cn_note_body=#{cn_note_body},
		cn_note_last_modify_time=#{cn_note_last_modify_time}
		where cn_note_id=#{cn_note_id}
	</update>
	
	<select id="findById" parameterType="string" 
		resultType="com.dk.cloudnote.entity.Note">
		select * from cn_note
		where cn_note_id=#{id}
		
	</select>
	
	<select id="findByBookId" parameterType="string" 
		resultType="com.dk.cloudnote.entity.Note">
		select * from cn_note
		where cn_notebook_id=#{bookId}
	</select>
</mapper>

实体类：

Book.java

package com.dk.cloudnote.entity;

import java.io.Serializable;
import java.sql.Timestamp;

public class Book implements Serializable{
	private String cn_notebook_id;
	private String cn_user_id;
	private String cn_notebook_type_id;
	private String cn_notebook_name;
	private String cn_notebook_desc;
	private Timestamp cn_notebook_createtime;
	
	public String getCn_notebook_id() {
		return cn_notebook_id;
	}
	public void setCn_notebook_id(String cn_notebook_id) {
		this.cn_notebook_id = cn_notebook_id;
	}
	public String getCn_user_id() {
		return cn_user_id;
	}
	public void setCn_user_id(String cn_user_id) {
		this.cn_user_id = cn_user_id;
	}
	public String getCn_notebook_type_id() {
		return cn_notebook_type_id;
	}
	public void setCn_notebook_type_id(String cn_notebook_type_id) {
		this.cn_notebook_type_id = cn_notebook_type_id;
	}
	public String getCn_notebook_name() {
		return cn_notebook_name;
	}
	public void setCn_notebook_name(String cn_notebook_name) {
		this.cn_notebook_name = cn_notebook_name;
	}
	public String getCn_notebook_desc() {
		return cn_notebook_desc;
	}
	public void setCn_notebook_desc(String cn_notebook_desc) {
		this.cn_notebook_desc = cn_notebook_desc;
	}
	public Timestamp getCn_notebook_createtime() {
		return cn_notebook_createtime;
	}
	public void setCn_notebook_createtime(Timestamp cn_notebook_createtime) {
		this.cn_notebook_createtime = cn_notebook_createtime;
	}
}

Note.java

package com.dk.cloudnote.entity;

import java.io.Serializable;

public class Note implements Serializable{
	private String cn_note_id;
	private String cn_notebook_id;
	private String cn_user_id;
	private String cn_note_status_id;
	private String cn_note_type_id;
	private String cn_note_title;
	private String cn_note_body;
	private Long cn_note_create_time;
	private Long cn_note_last_modify_time;
	
	public String getCn_note_id() {
		return cn_note_id;
	}
	public void setCn_note_id(String cn_note_id) {
		this.cn_note_id = cn_note_id;
	}
	public String getCn_notebook_id() {
		return cn_notebook_id;
	}
	public void setCn_notebook_id(String cn_notebook_id) {
		this.cn_notebook_id = cn_notebook_id;
	}
	public String getCn_user_id() {
		return cn_user_id;
	}
	public void setCn_user_id(String cn_user_id) {
		this.cn_user_id = cn_user_id;
	}
	public String getCn_note_status_id() {
		return cn_note_status_id;
	}
	public void setCn_note_status_id(String cn_note_status_id) {
		this.cn_note_status_id = cn_note_status_id;
	}
	public String getCn_note_type_id() {
		return cn_note_type_id;
	}
	public void setCn_note_type_id(String cn_note_type_id) {
		this.cn_note_type_id = cn_note_type_id;
	}
	public String getCn_note_title() {
		return cn_note_title;
	}
	public void setCn_note_title(String cn_note_title) {
		this.cn_note_title = cn_note_title;
	}
	public String getCn_note_body() {
		return cn_note_body;
	}
	public void setCn_note_body(String cn_note_body) {
		this.cn_note_body = cn_note_body;
	}
	public Long getCn_note_create_time() {
		return cn_note_create_time;
	}
	public void setCn_note_create_time(Long cn_note_create_time) {
		this.cn_note_create_time = cn_note_create_time;
	}
	public Long getCn_note_last_modify_time() {
		return cn_note_last_modify_time;
	}
	public void setCn_note_last_modify_time(Long cn_note_last_modify_time) {
		this.cn_note_last_modify_time = cn_note_last_modify_time;
	}
}

映射Dao接口：

BookDao.java

package com.dk.cloudnote.dao;

import java.util.List;

import com.dk.cloudnote.entity.Book;

public interface BookDao {
	public void save(Book book);
	public List<Book> findByUserId(String userId);
}

NoteDao.java

package com.dk.cloudnote.dao;

import java.util.List;
import java.util.Map;

import com.dk.cloudnote.entity.Note;

public interface NoteDao {
	
	/**
	 * 根据笔记ID更新笔记本ID
	 * @param params noteId:笔记ID;bookId:笔记本ID
	 * @return 受影响记录行数
	 */
	public int updateBookId(Map<String,Object> params);
	public int updateStatus(Map<String,Object> params);
	public void save(Note note);
	public int update(Note note);
	public Note findById(String id);
	public List<Note> findByBookId(String bookId);

}

Dao接口方法测试：

TestBookDao.java

package com.dk.cloundnote.dao;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.dao.BookDao;
import com.dk.cloudnote.entity.Book;

public class TestBookDao {
	
	@Test
	public void test1(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		BookDao dao = ac.getBean("bookDao", BookDao.class);
		Book book  = new Book();
		book.setCn_user_id("1234");
		book.setCn_notebook_id("1111");
		book.setCn_notebook_type_id("1");
		book.setCn_notebook_desc("testDESC");
		book.setCn_notebook_name("tname1");
		dao.save(book);
	}

}

TestFindByBookId.java

package com.dk.cloundnote.dao;

import java.util.List;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.dao.NoteDao;
import com.dk.cloudnote.entity.Note;

public class TestFindByBookId {
	
	@Test
	public void test(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteDao dao = ac.getBean("noteDao", NoteDao.class);
		List<Note> list = dao.findByBookId("4b86d1f9-6345-4532-bc50-ee86442f004b");
		for(Note note: list){
			System.out.println(note.getCn_note_title()+"||"+note.getCn_note_id());
		}
		
	}

}

TestLoadBooks.java

package com.dk.cloundnote.dao;

import java.util.List;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.dao.BookDao;
import com.dk.cloudnote.entity.Book;

public class TestLoadBooks {
	
	@Test
	public void test1(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		BookDao dao = ac.getBean("bookDao",BookDao.class);
		List<Book> list = dao.findByUserId("1234");
		for(Book book:list){
			System.out.println(book.getCn_notebook_name());
		}
	}

}

TestNoteDao.java

package com.dk.cloundnote.dao;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.dao.NoteDao;
import com.dk.cloudnote.entity.Note;

public class TestNoteDao {

	@Test
	public void test1(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteDao dao = ac.getBean("noteDao", NoteDao.class);
		Note note = dao.findById("c7862663-b155-4556-bdd7-1b8ef8decf55");
		System.out.println(note.getCn_note_title()+"|"+note.getCn_note_body());
		
	}
	
	@Test
	public void test2(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteDao dao = ac.getBean("noteDao", NoteDao.class);
		Note note = new Note();
		note.setCn_note_body("ttttttttttttbody");
		note.setCn_note_title("testTitle");
		note.setCn_note_id("c7862663-b155-4556-bdd7-1b8ef8decf55");
		int count = dao.update(note);
		System.out.println(count);
		
	}
	
	@Test
	public void test3(){
		String conf = "conf/spring-mybatis.xml";
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteDao dao = ac.getBean("noteDao", NoteDao.class);
		Note note = new Note();
		note.setCn_user_id("test08");
		note.setCn_note_body("ttttttttttttbody");
		note.setCn_note_title("testTitle");
		note.setCn_note_id("we");
		dao.save(note);
		
	}
}

测试运行Dao方法后截图：

业务层代码：

业务接口部分：

BookService.java

package com.dk.cloudnote.service;

import com.dk.cloudnote.util.NoteResult;

public interface BookService {
	public NoteResult addBook(String userId,String bookName);
	public NoteResult loadUserBooks(String userId);
}

NoteService.java

package com.dk.cloudnote.service;

import com.dk.cloudnote.util.NoteResult;

public interface NoteService {
	
	public NoteResult moveNote(String bookId,String noteId);
	public NoteResult recycleNote(String noteId);
	public NoteResult addNote(String userId,String title,String bookId);
	public NoteResult updateNote(String id,String title,String body);
	public NoteResult loadNote(String noteId);
	public NoteResult loadBookNotes(String bookId);

}

业务实现部分:

BookServiceImpl.java

package com.dk.cloudnote.service;

import java.sql.Timestamp;
import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.dk.cloudnote.dao.BookDao;
import com.dk.cloudnote.entity.Book;
import com.dk.cloudnote.util.NoteResult;
import com.dk.cloudnote.util.NoteUtil;

@Service("bookService")
public class BookServiceImpl implements BookService{
	@Resource
	private BookDao bookDao;
	
	public NoteResult loadUserBooks(String userId) {
		NoteResult result = new NoteResult();
		//根据用户ID查询笔记本信息
		List<Book> list = bookDao.findByUserId(userId);
		result.setStatus(0);
		result.setMsg("查询笔记本成功");
		result.setData(list);//返回笔记本信息
		return result;
	}

	public NoteResult addBook(String userId, String bookName) {
		NoteResult result = new NoteResult();
		Book book = new Book();
		book.setCn_user_id(userId);//用户ID
		book.setCn_notebook_name(bookName);//笔记本名
		book.setCn_notebook_type_id("5");//normal
		book.setCn_notebook_desc("");
		Timestamp time = new Timestamp(System.currentTimeMillis());
		book.setCn_notebook_createtime(time);//创建时间
		String bookId = NoteUtil.createId();
		book.setCn_notebook_id(bookId);//笔记本ID
	    bookDao.save(book);//添加笔记本
	    
	    //返回结果
	    result.setStatus(0);
	    result.setMsg("创建笔记本成功");
		result.setData(bookId);//返回笔记本ID
		return result;
	}

}

NoteServiceImpl.java

package com.dk.cloudnote.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.dk.cloudnote.dao.NoteDao;
import com.dk.cloudnote.entity.Note;
import com.dk.cloudnote.util.NoteResult;
import com.dk.cloudnote.util.NoteUtil;

@Service("noteService")
public class NoteServiceImpl implements NoteService{
	@Resource
	private NoteDao noteDao;
	
	public NoteResult loadBookNotes(String bookId) {
		NoteResult result = new NoteResult();
		List<Note> list = noteDao.findByBookId(bookId);
		result.setStatus(0);
		result.setMsg("查询笔记列表成功");
		result.setData(list);
		return result;
	}

	public NoteResult updateNote(String id, String title, String body) {
		NoteResult result = new NoteResult();
		//更新操作
		Note note = new Note();
		note.setCn_note_id(id);//笔记ID
		note.setCn_note_title(title);//标题
		note.setCn_note_body(body);//内容
		long time = System.currentTimeMillis();
		note.setCn_note_last_modify_time(time);//最后更新时间
		noteDao.update(note);
		
		result.setStatus(0);
		result.setMsg("保存笔记完成");
		return result;
	}

	public NoteResult loadNote(String noteId) {
		NoteResult result = new NoteResult();
	    Note note = noteDao.findById(noteId);
	    result.setStatus(0);
	    result.setMsg("加载笔记内容成功");
	    result.setData(note);
		return result;
	}

	public NoteResult addNote(String userId, String title, String bookId) {
		Note note = new Note();
		note.setCn_note_title(title);//标题
		note.setCn_user_id(userId);//用户ID
		note.setCn_notebook_id(bookId);//笔记本ID
		note.setCn_note_status_id("1");//normal
		note.setCn_note_type_id("1");//normal
		note.setCn_note_body("");//空串
		long time = System.currentTimeMillis();
		note.setCn_note_create_time(time);//创建时间
		note.setCn_note_last_modify_time(time);//最后修改时间
		String noteId = NoteUtil.createId();
		note.setCn_note_id(noteId);//笔记ID
		noteDao.save(note);//插入cn_note表
		//返回结果
		NoteResult result = new NoteResult();
		result.setStatus(0);
		result.setMsg("创建笔记成功");
		result.setData(noteId);//返回笔记ID
		return result;
	}

	public NoteResult moveNote(String bookId, String noteId) {
		//更新笔记本ID
		Map<String,Object> params = new HashMap<String,Object>();
		params.put("noteId", noteId);
		params.put("bookId", bookId);
		noteDao.updateBookId(params);
		//返回结果
		NoteResult result = new NoteResult();
		result.setStatus(0);
		result.setMsg("转移笔记成功");
		
		return result;
	}

	public NoteResult recycleNote(String noteId) {
		Map<String,Object> params = new HashMap<String,Object>();
		params.put("noteId", noteId);//笔记ID
		params.put("status", "2");//删除状态
		noteDao.updateStatus(params);//更新笔记状态
		//返回NoteResult
		NoteResult result = new NoteResult();
		result.setStatus(0);
		result.setMsg("删除笔记成功");
		
		return result;
	}

}

业务层功能单元测试:

TestAddBook.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.service.BookService;
import com.dk.cloudnote.service.UserService;
import com.dk.cloudnote.util.NoteResult;

public class TestAddBook {

	@Test
	public void test1(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac= new  ClassPathXmlApplicationContext(conf);
		BookService service = ac.getBean("bookService", BookService.class);
		NoteResult result = service.addBook("test10", "test10-10bj");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(result.getData());
	}
}

TestLoadBookNotes.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

public class TestLoadBookNotes {
	
	@Test
	public void test(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		NoteResult result = service.loadBookNotes("4b86d1f9-6345-4532-bc50-ee86442f004b");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(result.getData());
	}

}

TestloadUserBooks.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.service.BookService;
import com.dk.cloudnote.util.NoteResult;

public class TestloadUserBooks {

	@Test
	public void test1(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		BookService service = ac.getBean("bookService",BookService.class);
		NoteResult result = service.loadUserBooks("48595f52-b22c-4485-9244-f4004255b972");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(result.getData());
	}
}

TestMoveNote.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

public class TestMoveNote {
	
	@Test
	public void test1(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		NoteResult result = service.moveNote("id-tttt", "ss19055-30e8-4cdc-bfac-97c6bad9518f");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		
	}

}

TestNoteService.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.entity.Note;
import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

public class TestNoteService {
	
	@Test
	public void test1(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		NoteResult result = service.loadNote("1a6e497b-56b5-4eac-8190-b2d726c6f687");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(((Note) result.getData()).getCn_note_status_id());
	}

	@Test
	public void test2(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		Note note = new Note();
		note.setCn_note_body("ttttttttttttbod123y");
		note.setCn_note_title("testTitle");
		note.setCn_note_id("c7862663-b155-4556-bdd7-1b8ef8decf55");
		NoteResult result = service.updateNote(note.getCn_note_id(), note.getCn_note_title(),note.getCn_note_body());
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(result.getData());
	}
	
	@Test
	public void test3(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		Note note = new Note();
		note.setCn_user_id("user");
		note.setCn_note_title("aaaaa");
		note.setCn_notebook_id("id-tttt");
	    NoteResult result = service.addNote(note.getCn_user_id(),note.getCn_note_title(),note.getCn_notebook_id());
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		System.out.println(result.getData());
	}
}

TestRecycleNote.java

package com.dk.cloundnote.service;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

public class TestRecycleNote {
	
	@Test
	public void test1(){
		String[] conf = {"conf/spring-mvc.xml",
		"conf/spring-mybatis.xml"};
		ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
		NoteService service = ac.getBean("noteService",NoteService.class);
		NoteResult result = service.recycleNote("1a6e497b-56b5-4eac-8190-b2d726c6f687");
		System.out.println(result.getStatus());
		System.out.println(result.getMsg());
		
	}

}

控制层功能：

AddBookController.java

package com.dk.cloudnote.controller.book;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.BookService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/book")
public class AddBookController {
	
	@Resource
	private BookService bookService;
	
	@RequestMapping("/add")//可以省略.do
	@ResponseBody
	public NoteResult execute(String userId,String bookName){
		System.out.println("AddBookController....");
		NoteResult result = bookService.addBook(userId, bookName);
		return result;
	}

}

LoadBookdsController.java

package com.dk.cloudnote.controller.book;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.BookService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/book")
public class LoadBookdsController {

	@Resource
	private BookService bookService;

	@RequestMapping("/loadbooks.do")
	@ResponseBody
	public NoteResult execute(String userId){
		System.out.println("LoadBookdsController....");
		NoteResult result = bookService.loadUserBooks(userId);
		return result;
	}
}

AddNoteController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class AddNoteController {

	@Resource
	private NoteService noteService;
	
	@RequestMapping("/add.do")//
	@ResponseBody
	public NoteResult execute(String userId,String title,String bookId){
		System.out.println("AddNoteController....");
		NoteResult result = noteService.addNote(userId, title, bookId);
		return result;
	}
}

LoadNoteController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class LoadNoteController {

	@Resource
	private NoteService noteService;
	
	@RequestMapping("/load.do")
	@ResponseBody
	public NoteResult  execute(String noteId){
		System.out.println("LoadNoteController....");
		NoteResult result = noteService.loadNote(noteId);
		return result;
	}
	
}

LoadNotesController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class LoadNotesController {
	@Resource
	private NoteService noteService;
	
	@RequestMapping("/loadnotes.do")
	@ResponseBody
	public NoteResult execute(String bookId){
		System.out.println("LoadNotesController....");
		NoteResult result = noteService.loadBookNotes(bookId);
		return result;
	}

}

MoveNoteController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class MoveNoteController {
	@Resource
	private NoteService noteService;
	
	@RequestMapping("/move")
	@ResponseBody
	public NoteResult execute(String bookId,String noteId){
		System.out.println("MoveNoteController....");
		NoteResult result = noteService.moveNote(bookId, noteId);
		
		return result;
	}
}

RecycleNoteController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class RecycleNoteController {
	@Resource
	private NoteService noteService;
	
	@RequestMapping("/recycle")
	@ResponseBody
	public NoteResult execute(String noteId){
	   System.out.println("RecycleNoteController....");
	   NoteResult result = noteService.recycleNote(noteId);
	   return result;
	}
	
	
}

UpdateNoteController.java

package com.dk.cloudnote.controller.note;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dk.cloudnote.service.NoteService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/note")
public class UpdateNoteController {

	@Resource
	private NoteService noteService;
	
	@RequestMapping("update.do")
	@ResponseBody
	public NoteResult execute(String noteId,String title,String body){
		System.out.println("UpdateNoteController....");
		NoteResult result = noteService.updateNote(noteId, title, body);
		return result;
	}
}

控制层测试：

浏览器录入：http://localhost:8088/cloud_note_learn/book/add.do?userId=122&bookName=java

页面测试结果：

其他控制层代码功能测试同上。

前端逻辑实现：

book.js

//加载用户笔记本列表
function loadUserBooks(){
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/book/loadbooks.do",
		type:"post",
		data:{"userId":userId},
		dataType:"json",
		success:function(result){
			if(result.status==0){//成功
				var books = result.data;//获取服务器返回的笔记本信息
				//循环笔记本数组
				for(var i=0;i<books.length;i++){
					var bookName = 
						books[i].cn_notebook_name;//获取笔记本名
					var bookId = books[i].cn_notebook_id;//获取笔记本ID
					//生成笔记本列表li元素
					createBookLi(bookId,bookName);
				}
			}
		},
		error:function(){
			alert("加载用户笔记本列表失败");
		}
	});
};

//创建笔记本列表li
function createBookLi(bookId,bookName){
 var sli = '<li class="online">';
	 sli+= '	<a>';
	 sli+= '		<i class="fa fa-book" title="online" rel="tooltip-bottom">';
	 sli+= '		</i>';
	 sli+= bookName;
	 sli+= '	</a>';
	 sli+= '</li>';
	//将bookId绑定到li元素上
	var $li = $(sli);
	$li.data("bookId",bookId);
	//添加到笔记本列表ul元素中
	$("#book_ul").append($li);
};

//创建笔记本
function sureAddBook(){
	//获取请求参数
	var bookName = $("#input_notebook").val().trim();
	//TODO检查格式
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/book/add.do",
		type:"post",
		data:{"bookName":bookName,"userId":userId},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				//关闭对话框
				//closeAlertWindow();
				//添加笔记本li
				var bookId = result.data;//笔记本ID
				createBookLi(bookId,bookName);
				//提示成功
				alert(result.msg);
			}
		},
		error:function(){
			alert("创建笔记本失败");
		}
	});
};

note.js

//"保存笔记"按钮处理
function updateNote(){
	//获取请求参数
	var body = um.getContent();//笔记内容
	var title = $("#input_note_title").val();//笔记标题
	var $li = $("#note_ul a.checked").parent();
	var noteId = $li.data("noteId");//笔记ID
	//TODO 格式检查
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/note/update.do",
		type:"post",
		data:{"noteId":noteId,
			"title":title,"body":body},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				//更新列表标题名称
		      var sli='<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
				sli+= title;
				sli+='<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
				$li.find("a").html(sli);//替换<a>元素中的内容
				//提示保存完成
				alert(result.msg);
			}
		},
		error:function(){
			alert("保存笔记失败");
		}
	});
};
//单击笔记加载笔记内容
function loadNoteContent(){
		//将点击的笔记设置为选中
		$("#note_ul a").removeClass("checked");
		$(this).find("a").addClass("checked");
		//获取请求参数
		var noteId = $(this).data("noteId");
		//发送Ajax请求
		$.ajax({
			url:"http://localhost:8088/cloud_note_learn/note/load.do",
			type:"post",
			data:{"noteId":noteId},
			dataType:"json",
			success:function(result){
				if(result.status==0){
					var title = 
						result.data.cn_note_title;//标题
					var body = 
						result.data.cn_note_body;//内容
					//显示到编辑区
					$("#input_note_title").val(title);
					um.setContent(body);//获取使用um.getContent();
					//显示编辑区,隐藏预览区
					$("#pc_part_3").show();
					$("#pc_part_5").hide();
				}
			},
			error:function(){
				alert("加载笔记内容失败");
			}
		});
	};

//根据笔记本加载笔记列表
function loadBookNotes(){
	//切换列表显示区
	$("#pc_part_6").hide();
	$("#pc_part_2").show();
	$("#pc_part_4").hide();
	$("#pc_part_7").hide();
	$("#pc_part_8").hide();
	//将点击的笔记本设置为选中状态
	$("#book_ul a").removeClass("checked");
	$(this).find("a").addClass("checked");
	//获取点击的笔记本li的ID值
	var bookId = $(this).data("bookId");
	//发送Ajax请求加载笔记
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/note/loadnotes.do",
		type:"post",
		data:{"bookId":bookId},
		dataType:"json",
		success:function(result){
			if(result.status==0){//成功
				var notes = result.data;//获取返回的笔记集合
				//清除原有列表li
				$("#note_ul").empty();
				//循环生成笔记列表li
				for(var i=0;i<notes.length;i++){
					var noteTitle = 
							notes[i].cn_note_title;//笔记标题
					var noteId = notes[i].cn_note_id;//笔记ID
					//创建一个笔记li元素
					createNoteLi(noteId,noteTitle);
				}
			}
		},
		error:function(){
			alert("加载笔记列表失败");
		}
	});
};

//创建一个笔记li
function createNoteLi(noteId,noteTitle){
	var sli = "";
	sli+='<li class="online">';
	sli+='	<a>';
	sli+='		<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
	sli+= noteTitle;
	sli+='		<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
	sli+='	</a>';
	sli+='	<div class="note_menu" tabindex="-1">';
	sli+='		<dl>';
	sli+='			<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>';
	sli+='			<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>';
	sli+='			<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>';
	sli+='		</dl>';
	sli+='	</div>';
	sli+='</li>';
	var $li = $(sli);
	$li.data("noteId",noteId);//给li元素绑定笔记id值
	//添加到笔记列表ul元素中
	$("#note_ul").append($li);
};

//创建笔记
function sureAddNote(){
	//获取请求参数
	var title = $("#input_note").val().trim();//笔记标题
	var $li = $("#book_ul a.checked").parent();
	var bookId = $li.data("bookId");//笔记本ID
	//TODO格式检查
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/note/add.do",
		type:"post",
		data:{"userId":userId,
			"title":title,"bookId":bookId},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				//关闭对话框
				closeAlertWindow();
				//添加笔记li
				var noteId = result.data;//返回的笔记ID
				createNoteLi(noteId,title);
				//弹出提示框
				alert(result.msg);
			}
		},
		error:function(){
			alert("创建笔记失败");
		}
	});
};

//显示笔记菜单
function showNoteMenu(){
	//将所有菜单隐藏
	$("#note_ul .note_menu").hide();
	//显示当前li的菜单
	var menu = $(this).parent().next();
	menu.slideDown(1000);//显示菜单div
	//设置当前li选中
	$("#note_ul a").removeClass("checked");//取消所有a元素的class值
	$(this).parent().addClass("checked");//定位a元素追加class值
	//阻止后续body事件冒泡
	return false;
};

//确定删除笔记
function sureRecycleNote(){
	//获取请求参数:笔记ID
	var $li = $("#note_ul a.checked").parent();
	var noteId = $li.data("noteId");
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/note/recycle.do",
		type:"post",
		data:{"noteId":noteId},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				//关闭对话框
				closeAlertWindow();
				//删除笔记li
				$li.remove();
				//清空编辑区笔记内容
				um.setContent("");
				$("#input_note_title").val("");
				//提示成功
				alert(result.msg);
			}
		},
		error:function(){
			alert("删除笔记失败");
		}
	});
};

//笔记转移操作
function sureMoveNote(){
	//获取请求参数
	var $li = $("#note_ul a.checked").parent();
	var noteId = $li.data("noteId");
	var bookId = $("#moveSelect").val();
	//TODO 检查参数格式
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/note/move.do",
		type:"post",
		data:{"bookId":bookId,"noteId":noteId},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				//a关闭对话框
				closeAlertWindow();
				//b删除笔记li
				$li.remove();
				//c提示转移成功
				alert(result.msg);
			}
		},
		error:function(){
			alert("转移笔记失败");
		}
	});
};

edit.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的笔记</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="x-pjax-version" content="v173">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/favico-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/favico-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/favico-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/favico-57-precomposed.png">
        <link rel="shortcut icon" href="ico/favico.png">
        <link rel="shortcut icon" href="ico/favico.ico">
        <link rel="stylesheet" href="styles/icon.css"/>
        <link rel="stylesheet" href="styles/main.css"/>
		<!-- Google-Code代码高亮CSS -->
        <link rel="stylesheet" href="styles/prettify.css"/>
		<!-- Ueditor编辑器CSS -->
		<link href="styles/umeditor.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" 
		src="scripts/jquery.min.js">
</script>
<script type="text/javascript"
		src="scripts/cookie_util.js">
</script>
<script type="text/javascript"
		src="scripts/book.js">
</script>
<script type="text/javascript"
		src="scripts/note.js">
</script>
<script type="text/javascript"
		src="scripts/alert.js">
</script>
<script type="text/javascript"
		src="scripts/share.js">
</script>
<script type="text/javascript">
//获取Cookie中的用户ID
var userId = getCookie("userId");
if(userId!=null){//用户ID存在
	$(function(){
		//加载用户笔记本列表
		loadUserBooks();
		//点击笔记本加载笔记列表(动态绑定)
		//父元素.on("事件类型","子元素选择器",fn);
		$("#book_ul").on("click","li",loadBookNotes);
		//点击笔记加载笔记内容
		$("#note_ul").on("click","li",loadNoteContent);
		//点击"保存笔记"按钮
		$("#save_note").click(updateNote);
		//点击"+"按钮弹出创建笔记本对话框
		$("#add_notebook").click(alertAddBookWindow);
		//关闭对话框处理
		$("#can").on("click",".cancle,.close",closeAlertWindow);
		//创建笔记本操作
		$("#can").on("click","#sure_addbook",sureAddBook);
		//点击"+"按钮弹出创建笔记对话框
		$("#add_note").click(alertAddNoteWindow);
		//创建笔记操作
		$("#can").on("click","#sure_addnote",sureAddNote);
		//笔记菜单处理
		$("#note_ul").on("click",".btn_slide_down",showNoteMenu);
		//点击body隐藏笔记菜单
		$("body").click(function(){
			$("#note_ul .note_menu").hide();
		});
		//点击笔记菜单的x按钮，弹出确认框
		$("#note_ul").on("click",".btn_delete",alertRecycleNoteWindow);
		//单击确认框中"删除"按钮
		$("#can").on("click","#sure_recyclenote",sureRecycleNote);
		//点击笔记菜单的"转移"按钮,弹出转移对话框
		$("#note_ul").on("click",".btn_move",alertMoveNoteWindow);
		//确定转移笔记操作
		$("#can").on("click","#sure_movenote",sureMoveNote);
		//笔记分享操作
		$("#note_ul").on("click",".btn_share",sureShareNote);
		//搜索分享笔记
		$("#search_note").keydown(searchShareNote);
		//分享笔记查看
		$("#search_ul").on("click","li",loadShareContent);
		//收藏笔记
		$("#search_ul").on("click","button",function(){
			//获取请求参数
			var $li = $(this).parents("li");
			var shareId = $li.data("shareId");
			//发送Ajax请求
			$.ajax({
				url:"http://localhost:8088/cloud_note_learn/share/favor.do",
				type:"post",
				data:{"shareId":shareId,"userId":userId},
				dataType:"json",
				success:function(result){
					if(result.status==0){
						alert(result.msg);
					}else if(result.status==1){
						alert(result.msg);
					}else if(result.status==2){
						alert(result.msg);
					}
				},
				error:function(){
					alert("收藏笔记失败");
				}
			});
		});
		
	});
}else{//用户ID不存在
	window.location.href="log_in.html";
}
</script>
    </head>
    <body class="animated fadeIn">
        <header class="header">
            <div class="header-brand">
                <a data-pjax=".content-body" href="edit.html">
                    <img class="brand-logo" src="images/dummy/8986f28e.stilearn-logo.png" alt="Stilearn Admin Sample Logo">
                </a>
            </div>
            <div class="header-profile">
                <div class="profile-nav">
                    <span class="profile-username"></span>
                    <a  class="dropdown-toggle" data-toggle="dropdown">
                        <span class="fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu animated flipInX pull-right" role="menu">
                        <li><a href="Change_password.html"><i class="fa fa-user"></i> 修改密码</a></li>
                        <li class="divider"></li>
                        <li><a id="logout" href="#" ><i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
            <form class="form-inline" onsubmit="return false;">
                <button type="button" class="btn btn-default btn-expand-search"><i class="fa fa-search"></i></button>
                <div class="toggle-search">
                    <input type="text" class="form-control" placeholder="搜索笔记" id='search_note'>
                    <button type="button" class="btn btn-default btn-collapse-search"><i class="fa fa-times"></i></button>
                </div>
            </form>
            <ul class="hidden-xs header-menu pull-right">
                <li>
                    <a href="activity.html" target='_blank' title="笔记活动">活动</a>
                </li>
            </ul>
        </header>
		<div class="row" style='padding:0;' id='center'>
			<!-- 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='pc_part_1'>
				<!-- side-right -->
				<div class="pc_top_first">
					<h3>全部笔记本</h3>
					<button type="button" class="btn btn-default btn-xs btn_plus" id='add_notebook'><i class="fa fa-plus"></i></button>
				</div>
				<aside class="side-right" id='first_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul id="book_ul" class="contacts-list">
								<!-- 
									<li class="online">
										<a>
											<i class="fa fa-book" title="online" rel="tooltip-bottom">
											</i> 
											默认笔记本
										</a>
									</li>
									-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
				<div class="row clear_margin">
					<div class="col-xs-4 click" id='rollback_button' title='回收站'><i class='fa fa-trash-o' style='font-size:20px;line-height:31px;'></i></div>
					<div class="col-xs-4 click" id='like_button' title='收藏笔记本'><i class='fa fa-star' style='font-size:20px;line-height:31px;'></i></div>
					<div class="col-xs-4 click" id='action_button' title='参加活动笔记'><i class='fa fa-users' style='font-size:20px;line-height:30px;'></i></div>
				</div>
			</div>
			<!-- 全部笔记本 -->
			<!-- 全部笔记 -->
			<div class="col-xs-3" style='padding:0;' id='pc_part_2'>
				<div class="pc_top_second" id='notebookId'>
					<h3>全部笔记</h3>
					<button type="button" class="btn btn-default btn-xs btn_plus" id='add_note'><i class="fa fa-plus"></i></button>
				</div>
				<aside class="side-right" id='second_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul id="note_ul" class="contacts-list">
								<!-- 
									<li class="online">
										<a  class='checked'>
											<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> 使用Java操作符<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><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>
								-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 全部笔记 -->
			<!-- 回收站笔记 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_4'>
				<div class="pc_top_second">
					<h3>回收站笔记</h3>
				</div>
				<aside class="side-right" id='four_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<li class="disable"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> 虚假回收站笔记<button type="button" class="btn btn-default btn-xs btn_position btn_delete"><i class="fa fa-times"></i></button><button type="button" class="btn btn-default btn-xs btn_position_2 btn_replay"><i class="fa fa-reply"></i></button></a></li>
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 回收站笔记 -->
			<!-- 搜索笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_6'>
				<div class="pc_top_second">
					<h3>搜索结果</h3>
				</div>
				<aside class="side-right" id='sixth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul id="search_ul" class="contacts-list">
								</ul>
							</div>
						</div>
						<div id='more_note'>更多...</div>
					</div>
				</aside>
			</div>
			<!-- 搜索笔记列表 -->
			<!-- 收藏笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_7'>
				<div class="pc_top_second">
					<h3>已收藏笔记</h3>
				</div>
				<aside class="side-right" id='seventh_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<!--li class="idle"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> switch多分支结构<button type="button" class="btn btn-default btn-xs btn_position btn_delete"><i class="fa fa-times"></i></button></a></li-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 收藏笔记列表 -->
			<!-- 参加活动的笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_8'>
				<div class="pc_top_second">
					<h3>参加活动的笔记</h3>
				</div>
				<aside class="side-right" id='eighth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<!--li class="offline"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> 样式用例（点击无效）</a></li-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 参加活动的笔记列表 -->
			<!-- 编辑笔记 -->
			<div class="col-sm-7" id='pc_part_3'>
				<!-- side-right -->
				<div class="pc_top_third">
					<div class="row">
						<div class="col-xs-9">
							<h3>编辑笔记</h3>
						</div>
						<div class="col-xs-3">
							<button type="button" class="btn btn-block btn-sm btn-primary" id='save_note'>保存笔记</button>
						</div>
					</div>
				</div>
				<aside class="side-right" id='third_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body clear_margin">
								<!--- 笔记标题 --->
								<div class="row" >
									<div class="col-xs-8">
										<input type="text" class="form-control" id="input_note_title" placeholder='笔记标题...'>
									</div>
								</div>
								<!--- 笔记标题 --->
								<div class="row">
									<div class="col-sm-12">
										<!--- 输入框 --->
										<script type="text/plain" id="myEditor" style="width:100%;height:400px;">
										</script>
										<!--- 输入框 --->
									</div>
								</div>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 编辑笔记 -->
			<!-- 预览笔记 -->
			<div class="col-sm-7" id='pc_part_5' style='display:none;' >
				<div class="pc_top_third">
					<div class="row">
						<div class="col-xs-9">
							<h3>预览笔记</h3>
						</div>
					</div>
				</div>
				<aside class="side-right" id='fifth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body clear_margin">
								<h4 id="noput_note_title"></h4>
								<p id="noput_note_body">
								
								</p>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 预览笔记 -->
		</div>
        <footer>
            <p>&copy; 2014 Stilearning</p>
			<div style='position:absolute;top:5PX;height:30px;right:20px;line-height:26px;border:1px solid #0E7D76;display:none;background:#fff'>
				<strong style='color:#0E7D76;margin:0 10px;'></strong>
			</div>
        </footer>
		<script type="text/javascript">
			//加载DOM之后处理页面高度
			function get_dom(e){
				return document.getElementById(e);
			}
			function set_height(){
				var pc_height=window.innerHeight;
				pc_height=pc_height-132;
				get_dom('first_side_right').style.height=(pc_height-31)+'px';
				get_dom('second_side_right').style.height=pc_height+'px';
				get_dom('four_side_right').style.height=pc_height+'px';
				get_dom('sixth_side_right').style.height=pc_height+'px';
				get_dom('seventh_side_right').style.height=pc_height+'px';
				get_dom('eighth_side_right').style.height=pc_height+'px';
				get_dom('third_side_right').style.height=(pc_height-15)+'px';
				get_dom('fifth_side_right').style.height=(pc_height-15)+'px';
			}
			function myEditorWidth(){
				var dom=get_dom('third_side_right');
				var style=dom.currentStyle||window.getComputedStyle(dom, null);
				get_dom('myEditor').style.width=style.width;
			}
			set_height();
			//改变窗口大小时调整页面尺寸
			window.onresize=function(){
				set_height();
				var width=$('#third_side_right').width()-35;
				$('.edui-container,.edui-editor-body').width(width);
				$('#myEditor').width(width-20);
			};
		</script>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>

		<!-- Bootstrap框架JS -->
        <script src="scripts/bootstrap.min.js"></script>
        <script src="scripts/js-prototype.js"></script>       
        <script src="scripts/theme-setup.js"></script>
		<!-- Google-Code代码高亮JS -->
        <script class="re-execute" src="scripts/run_prettify.js"></script>
		<!-- Ueditor编辑器JS -->
		<script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.min.js"></script>
		<script type="text/javascript" src="scripts/ue/lang/zh-cn.js"></script>
		
		<script type="text/javascript">
			//重写JS原生alert函数
				window.alert=function(e){
					$('#can').load('./alert/alert_error.html',function(){
						$('#error_info').text(' '+e);
						$('.opacity_bg').show();
					});
				}
			//实例化Ueditor编辑器
			var um = UM.getEditor('myEditor');
		</script>
		</body>		
</html>

使用Tomcat 加载项目工程后进行测试。

浏览器录入：http://localhost:8088/cloud_note_learn/log_in.html

相关测试截图：