SpringMVC+Mybatis框架整合開發基礎——專案開發流程——04
阿新 • • 發佈：2018-12-18
專案開發 模組開發思路：
筆記分享、筆記收藏 模組功能
#筆記分享 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;
}
}
控制層測試：
頁面測試結果：
其他控制層程式碼功能測試同上。
前端邏輯實現：
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>© 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 載入專案工程後 進行測試。
相關測試截圖：
分享筆記搜尋：
收藏分享的筆記
