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

最新推荐文章于 2022-03-10 20:25:43 发布

Coder_Boy_

最新推荐文章于 2022-03-10 20:25:43 发布

阅读量671

点赞数

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

版权

项目开发模块开发思路：

笔记分享、笔记收藏模块功能

#笔记分享
cn_note,cn_share
本质：用户将笔记分享，需要向cn_share表插入一条记录。
##发送Ajax请求
-点击笔记菜单"分享"按钮,onclick
-请求参数：笔记ID
-请求地址：/share/share.do
##服务器端处理
/share/share.do
-->ShareNoteController.execute
-->ShareService.shareNote
-->ShareDao.save-->cn_share（插入）
-->返回NoteResult结构的JSON结果
status:0,msg:分享成功
##Ajax回调处理
-success函数:提示分享成功或该笔记已分享
-error函数:提示分享失败

#搜索分享笔记
用户输入关键字后,按回车发送ajax请求,去cn_share表
查询标题带有关键字的笔记，将查询结果返回给界面,
界面解析返回的JSON,生成结果列表。
##发送Ajax请求
-输入关键字按回车(键盘事件keydown)
-请求参数：关键字
-请求地址：/share/search.do
##服务器端处理
/share/search.do
-->SearchShareController.execute
-->ShareService.searchShare
-->ShareDao.findLikeTitle
-->cn_share(按标题模糊查询)
-->返回NoteResult结构的JSON结果
cn_share_title like "%关键字%"

##Ajax回调处理
-success回调函数:解析返回的JSON结果,生成搜索结果列表
      切换列表显示，显示搜索结果列表。
      pc_part_2全部列表区
      pc_part_4回收站列表区
      pc_part_6搜索列表区
      pc_part_7收藏笔记列表
      pc_part_8参加活动的笔记列表

===========================
任务一：完成笔记分享和分享笔记搜索功能
任务二：独立实现回收站操作(选做)

#分享笔记查看
主要思路：根据点击的笔记,获取分享ID，然后发送Ajax请求
去cn_share表获取分享笔记信息,最后将信息显示到预览区。
##发送Ajax请求
-搜索结果列表li单击 onclick
-请求参数:分享ID
-请求地址:/share/load.do
##服务器端处理
/share/load.do-->LoadShareController.execute
-->ShareService.loadShare
-->ShareDao.findById-->cn_share（查询）
-->返回NoteResult结构的JSON结果
##Ajax回调处理
success函数:解析JSON结果;将信息显示到预览区;隐藏编辑区

#收藏笔记
主要思路：用户点击搜索结果列表中的"收藏"按钮,获取当前
点击的分享笔记ID,然后发送Ajax请求将笔记信息写入cn_note
表,最后界面给用户提示操作结果。
##发送Ajax请求
-点击分享笔记li中的"收藏"按钮,onclick
-请求参数：分享ID,用户ID
-请求地址：/share/favor.do
##服务器端处理
/share/favor.do-->FavorShareController.execute
-->ShareService.favorShare
-->NoteDao.save-->cn_note(插入,type_id='2')
-->返回NoteResult结构的JSON结果
##Ajax回调处理
success回调函数：提示收藏成功还是失败。

（追加逻辑：自己分享的笔记不允许收藏，给出提示信息）
（追加逻辑：已收藏过的笔记不允许重复收藏，给出提示信息）
 追加一个收藏列表cn_favors
 create table cn_favors(
cn_user_id varchar(100),
cn_share_id varchar(100));

项目目录结构：

实体映射配置：

ShareMapper.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.ShareDao">
	
	<select id="findById" parameterType="string" 
	 resultType="com.dk.cloudnote.entity.Share">
		select * from cn_share
		where cn_share_id=#{id}
	
	</select>
	
	<select id="findLikeTitle" parameterType="string"
	 resultType="com.dk.cloudnote.entity.Share">
		select cn_share_id,cn_share_title
		from cn_share
		where cn_share_title like #{title}
	
	</select>
	
	<select id="findByNoteId" parameterType="string"
	  resultType="com.dk.cloudnote.entity.Share">
	  select * from cn_share
	  where cn_note_id=#{noteId}	
	
	</select>
	
	<insert id="save" parameterType="com.dk.cloudnote.entity.Share">
		insert into cn_share
			(cn_share_id,cn_share_title,
			cn_share_body,cn_note_id)
		values(#{cn_share_id},#{cn_share_title},
			   #{cn_share_body},#{cn_note_id})
	</insert>

</mapper>

FavorMapper.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.FavorDao">

	<select id="findFavor" parameterType="com.dk.cloudnote.entity.Favor"
	 resultType="int">
		select count(*) from cn_favors
		where cn_user_id=#{cn_user_id}
		  and cn_share_id=#{cn_share_id}
	</select>
	
	<insert id="save" parameterType="com.dk.cloudnote.entity.Favor">
		insert into cn_favors
		 (cn_user_id,cn_share_id)
		values(#{cn_user_id},#{cn_user_id})
	
	</insert>
</mapper>

实体类：

Share.java

package com.dk.cloudnote.entity;

import java.io.Serializable;

public class Share implements Serializable{
	
	private String cn_share_id;
	private String cn_share_title;
	private String cn_share_body;
	private String cn_note_id;
	
	public String getCn_share_id() {
		return cn_share_id;
	}
	public void setCn_share_id(String cn_share_id) {
		this.cn_share_id = cn_share_id;
	}
	public String getCn_share_title() {
		return cn_share_title;
	}
	public void setCn_share_title(String cn_share_title) {
		this.cn_share_title = cn_share_title;
	}
	public String getCn_share_body() {
		return cn_share_body;
	}
	public void setCn_share_body(String cn_share_body) {
		this.cn_share_body = cn_share_body;
	}
	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;
	}
}

Favor.java

package com.dk.cloudnote.entity;

import java.io.Serializable;

public class Favor implements Serializable{
	private String cn_user_id;
	private String cn_share_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_share_id() {
		return cn_share_id;
	}
	public void setCn_share_id(String cn_share_id) {
		this.cn_share_id = cn_share_id;
	}

}

映射Dao接口：

ShareDao.java

package com.dk.cloudnote.dao;

import java.util.List;

import com.dk.cloudnote.entity.Share;

public interface ShareDao {
	public Share findById(String shareId);
	public List<Share> findLikeTitle(String title);
	public Share findByNoteId(String noteId);
	public void save(Share share);

}

FavorDao.java

package com.dk.cloudnote.dao;

import com.dk.cloudnote.entity.Favor;

public interface FavorDao {
	public int findFavor(Favor favor);
	public void save(Favor favor);

}

Dao接口方法测试：参考上一节博客

业务层代码：

业务接口部分：

ShareService.java

package com.dk.cloudnote.service;

import com.dk.cloudnote.util.NoteResult;

public interface ShareService {
	public NoteResult favorShare(String shareId,String userId);
	public NoteResult loadShare(String shareId);
	public NoteResult searchShare(String keword);
	public NoteResult shareNote(String noteId);
}

业务实现部分：

ShareServiceImpl.java

package com.dk.cloudnote.service;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.dk.cloudnote.dao.FavorDao;
import com.dk.cloudnote.dao.NoteDao;
import com.dk.cloudnote.dao.ShareDao;
import com.dk.cloudnote.entity.Favor;
import com.dk.cloudnote.entity.Note;
import com.dk.cloudnote.entity.Share;
import com.dk.cloudnote.util.NoteResult;
import com.dk.cloudnote.util.NoteUtil;

@Service("shareService")
public class ShareServiceImpl implements ShareService{
	@Resource
	private ShareDao shareDao;
	@Resource
	private NoteDao noteDao;
	@Resource
	private FavorDao favorDao;
	
	public NoteResult searchShare(String keword) {
		String title = "%";
		if(keword !=null && !"".equals(keword)){
			title = "%"+keword+"%";
		}
		//根据笔记标题模糊查询
	    List<Share> list	= shareDao.findLikeTitle(title);
		//返回NoteResult结果
	    NoteResult result = new NoteResult();
	    result.setStatus(0);
	    result.setMsg("搜索分享笔记完毕");
	    result.setData(list);//返回笔记
		return result;
	}

	public NoteResult shareNote(String noteId) {
		NoteResult result = new NoteResult();
		//检测是否已分享过该笔记
		Share has_share = shareDao.findByNoteId(noteId);
		if(has_share != null){//分享过
			result.setStatus(1);
			result.setMsg("该笔记已分享过");
			return result;
		}
		//分享处理
		Share share = new Share();
		share.setCn_note_id(noteId);//笔记ID
		String shareId = NoteUtil.createId();
		share.setCn_share_id(shareId);//分享ID
		//获取笔记标题和内容
		Note note = noteDao.findById(noteId);
		share.setCn_share_title(note.getCn_note_title());//标题
		share.setCn_share_body(note.getCn_note_body());//内容
		shareDao.save(share);//插入分享记录
		//返回NoteResult结果
		result.setStatus(0);
		result.setMsg("分享笔记成功");
		
		return result;
	}

	public NoteResult favorShare(String shareId, String userId) {
		NoteResult result = new NoteResult();
		//检测该笔记是否已收藏过
		Favor favor = new Favor();
		favor.setCn_user_id(userId);
		favor.setCn_share_id(shareId);
		int size = favorDao.findFavor(favor);
		if(size>0){
			result.setStatus(2);
			result.setMsg("该笔记已收藏过");
			return result;
		}
		//检测是否为自己分享的笔记
		Share share = shareDao.findById(shareId);
		Note note_tmp = noteDao.findById(share.getCn_note_id());//根据noteId查note
		if(note_tmp.getCn_user_id().equals(userId)){
			//用户id相等表示为自己分享的笔记
			result.setStatus(1);
			result.setMsg("该笔记是自己分享的笔记，不允许收藏");
			return result;
		}
		
		//收藏处理
		Note note = new Note();
		String noteId = NoteUtil.createId();
		note.setCn_note_id(noteId);//笔记id
		note.setCn_user_id(userId);//用户id
		note.setCn_notebook_id("");//收藏笔记本
		note.setCn_note_status_id("1");//normal
		note.setCn_note_type_id("2");//favor收藏
		long time = System.currentTimeMillis();
		note.setCn_note_create_time(time);//创建日期
		note.setCn_note_last_modify_time(time);//修改日期
		//加载笔记标题和内容
		note.setCn_note_title(share.getCn_share_title());
		note.setCn_note_body(share.getCn_share_body());
		noteDao.save(note);//插入收藏笔记
		//添加收藏记录cn_favors
		favorDao.save(favor);
		
		//返回NoteResult
		result.setStatus(0);
		result.setMsg("收藏笔记成功");
		return result;
	}

	public NoteResult loadShare(String shareId) {
		Share share = shareDao.findById(shareId);
		NoteResult result = new NoteResult();
		result.setStatus(0);
		result.setMsg("加载分享笔记完成");
		result.setData(share);
		return result;
	}

}

业务层功能单元测试:参考上一节博客

控制层功能：

FavorShareController.java

package com.dk.cloudnote.controller.share;

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.ShareService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/share")
public class FavorShareController {
	@Resource
	private ShareService shareSerive;
	
	@RequestMapping("/favor")
	@ResponseBody
	public NoteResult execute(String shareId,String userId){
		System.out.println("FavorShareController.....");
		NoteResult result = shareSerive.favorShare(shareId, userId);
		return result;
	}
	
}

LoadShareController.java

package com.dk.cloudnote.controller.share;

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.ShareService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/share")
public class LoadShareController {
	@Resource
	private ShareService shareService;
	
	@RequestMapping("/load")
	@ResponseBody
	public NoteResult execute(String shareId){
		System.out.println("LoadShareController....."+shareId);
		NoteResult result = shareService.loadShare(shareId);
		return result;
	}
}

SearchShareController.java

package com.dk.cloudnote.controller.share;

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.ShareService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/share")
public class SearchShareController {
	@Resource
	private ShareService shareService;
	
	@RequestMapping("/search")
	@ResponseBody
	public NoteResult execute(String keword){
		System.out.println("SearchShareController....");
		NoteResult result = shareService.searchShare(keword);
		return result;
	}

}

ShareNoteController.java

package com.dk.cloudnote.controller.share;

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.ShareService;
import com.dk.cloudnote.util.NoteResult;

@Controller
@RequestMapping("/share")
public class ShareNoteController {
	@Resource
	private ShareService shareService;
	
	@RequestMapping("/share")
	@ResponseBody
	public NoteResult execute(String noteId){
		System.out.println("ShareNoteController....");
		NoteResult result = shareService.shareNote(noteId);
		return result;
	}

}

控制层测试：

浏览器录入：http://localhost:8088/cloud_note_learn/share/load.do?shareId=009d6943-223e-450d-aa26-3aa25edfc8a4

页面测试结果：

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

前端逻辑实现：

share.js

//搜索分享笔记
function searchShareNote(event){
	//判断是否按回车
	var code = event.keyCode;//获取键的ASCII
	if(code==13){//按回车了
		//获取请求参数
		var keyword = 
			$("#search_note").val().trim();
		//发送Ajax请求
		$.ajax({
			url:"http://localhost:8088/cloud_note_learn/share/search.do",
			type:"post",
			data:{"keyword":keyword},
			dataType:"json",
			success:function(result){
				if(result.status==0){
					//显示搜索列表区
					$("#pc_part_6").show();
					$("#pc_part_2").hide();
					$("#pc_part_4").hide();
					$("#pc_part_7").hide();
					$("#pc_part_8").hide();
					//清空之前生成的列表
					$("#search_ul").empty();
					var shares = result.data;
					//循环生成列表li
					for(var i=0;i<shares.length;i++){
						var shareId=shares[i].cn_share_id;
						var shareTitle = shares[i].cn_share_title;
						//拼一个li
						var sli = "";
						sli+='<li class="online">';
						sli+='	<a>';
						sli+='		<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
						sli+= shareTitle;
						sli+='		<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-star"></i></button>';
						sli+='	</a>';
						sli+='</li>';
						//绑定shareId
						var $li = $(sli);
						$li.data("shareId",shareId);
						//添加到search_ul列表中
						$("#search_ul").append($li);
					}
				}
			},
			error:function(){
				alert("搜索分享笔记失败");
			}
		});
	}
};
//笔记分享操作
function sureShareNote(){
	//获取请求参数
	var $li=$("#note_ul a.checked").parent();
	var noteId = $li.data("noteId");
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/share/share.do",
		type:"post",
		data:{"noteId":noteId},
		dataType:"json",
		success:function(result){
			if(result.status==0){//成功
				alert(result.msg);
			}else if(result.status==1){//分享过
				alert(result.msg);
			}
		},
		error:function(){
			alert("分享笔记失败");
		}
	});
};

//查看分享笔记内容
function loadShareContent(){
	//设置选中状态
	$("#search_ul a").removeClass("checked");
	$(this).find("a").addClass("checked");
	//获取请求参数
	var shareId=$(this).data("shareId");
	//发送Ajax请求
	$.ajax({
		url:"http://localhost:8088/cloud_note_learn/share/load.do",
		type:"post",
		data:{"shareId":shareId},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				var title=result.data.cn_share_title;
				var body=result.data.cn_share_body;
				//显示到预览区
				$("#noput_note_title").html(title);
				$("#noput_note_body").html(body);
				//显示预览区,隐藏编辑区
				$("#pc_part_3").hide();
				$("#pc_part_5").show();
			}
		},
		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>

收藏功能的逻辑代码：