云筆記技術(shù)文檔
User
定義實體
public class User implements Serializable {
private String cn_user_id;
private String cn_user_name;
private String cn_user_password;
private String cn_user_token;
private String cn_user_nick;
...
}
定義對數(shù)據(jù)庫中User相關(guān)數(shù)據(jù)的操作
UserMapper.xml
定義了更新密碼，通過ID尋找User，通過name尋找User，添加User操作
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.UserDao">
<!--public User findByName(String name);-->
<update id="updatePassword" parameterType="string" >
update cn_user set cn_user_password=#{new_password} where cn_user_id=#{userId}
</update>
<select id="findById" parameterType="string" resultType="org.cloudnote.entity.User">
select * from cn_user where cn_user_id=#{userId} and cn_user_password=#{last_password}
</select>
<select id="findByName" parameterType="string"
resultType="org.cloudnote.entity.User">
select * from cn_user where cn_user_name=#{name}
</select>
<!-- public void save(User user);-->
<insert id="save" parameterType="org.cloudnote.entity.User">
insert into cn_user
(cn_user_id,
cn_user_name,
cn_user_password,
cn_user_token,
cn_user_nick)
values
(
#{cn_user_id},
#{cn_user_name},
#{cn_user_password},
#{cn_user_token},
#{cn_user_nick}
)
</insert>
</mapper>
創(chuàng)建Dao層接口連接上述操作
public interface UserDao {
public User findByName(String name);
public void save(User user);
User findById(@Param("userId") String userId, @Param("last_password")String last_password);
void updatePassword(@Param("userId") String userId, @Param("new_password")String new_password);
}
在Service層進行具體的功能實現(xiàn)
在Service層，實現(xiàn)了修改密碼，登錄，注冊功能
接口：UserService.java
public interface UserService {
public NoteResult checkLogin(String name, String password);
NoteResult changepassword(String last_password, String new_password,String userId);
public NoteResult regist(String name, String password, String nick);
}
實現(xiàn)：UserServicelmpl.java
@Service("userService")
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public NoteResult changepassword(String last_password, String new_password,String userId) {
NoteResult result = new NoteResult();
String last_password_md5 = NoteUtil.md5(last_password);
String new_password_md5 = NoteUtil.md5(new_password);
User user = userDao.findById(userId,last_password_md5);
if(user == null){
result.setStatus(1);
result.setMsg("原始密碼錯誤");
return result;
}
userDao.updatePassword(userId,new_password_md5);
result.setStatus(0);
result.setMsg("密碼修改成功");
return result;
}
@Override
public NoteResult checkLogin(String name, String password) {
NoteResult result = new NoteResult();
//根據(jù)用戶名獲取用戶
User user = userDao.findByName(name);
if(user == null){
result.setStatus(1);
result.setMsg("用戶名不存在");
return result;
}
//查驗密碼
String md5_password = NoteUtil.md5(password);
if(!user.getCn_user_password().equals(md5_password)){
result.setStatus(2);
result.setMsg("密碼錯誤");
return result;
}
//用戶名密碼正確
result.setStatus(0);
result.setMsg("用戶名密碼正確");
result.setData(user.getCn_user_id());//返回userId
return result;
}
@Override
public NoteResult regist(String name, String password, String nick) {
NoteResult result = new NoteResult();
//數(shù)據(jù)檢測
User has_user = userDao.findByName(name);
if(has_user != null){
result.setStatus(1);
result.setMsg("用戶名被占用");
return result;
}
//將參數(shù)封裝成user對象保存
User user = new User();
user.setCn_user_name(name);
user.setCn_user_nick(nick);
String md5_password = NoteUtil.md5(password);
user.setCn_user_password(md5_password);
user.setCn_user_token(null);
String userId = NoteUtil.createId();
user.setCn_user_id(userId);
userDao.save(user);
result.setStatus(0);
result.setMsg("注冊成功");
return result;
}
}
在Controller層調(diào)用方法，給出具體功能的URL接口
UserLoginController.java
定義了如下URL：
/user/changepassword.do: 修改密碼
/user/login.do: 登錄
/user/regist.do: 注冊
@Controller
@RequestMapping("/user")
public class UserLoginController {
@Autowired
private UserService userService;
@RequestMapping("/changepassword.do")
@ResponseBody
public NoteResult changepassword(String last_password,String new_password,String userId){
NoteResult noteResult = userService.changepassword(last_password, new_password,userId);
System.out.println("noteResult = " + noteResult);
return noteResult;
}
@RequestMapping("/login.do")
@ResponseBody
public NoteResult execute(String name,String password){
NoteResult noteResult = userService.checkLogin(name, password);
System.out.println("noteResult = " + noteResult);
return noteResult;
}
@ResponseBody
@RequestMapping("/regist.do")
public NoteResult register(String name,String nick,String password){
NoteResult noteResult = userService.regist(name, password,nick);
return noteResult;
}
}
NoteBook
定義實體
public class NoteBook 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;
...
}
定義對數(shù)據(jù)庫中NoteBook相關(guān)數(shù)據(jù)的操作
NoteBookMapper.xml
定義了添加Notebook, 通過User_id尋找Notebook操作
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.BookDao">
<insert id="save" parameterType="org.cloudnote.entity.NoteBook">
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="org.cloudnote.entity.NoteBook">
select * from cn_notebook where cn_user_id=#{userId}
</select>
</mapper>
創(chuàng)建Dao層接口連接上述操作
public interface BookDao {
public void save(NoteBook noteBook);
public List<NoteBook> findByUserId(String userId);
}
在Service層進行具體的功能實現(xiàn)
在Service層，實現(xiàn)了添加筆記本，加載筆記本功能
接口：UserService.java
public interface BookService {
public NoteResult addBook(String userId, String bookName);
public NoteResult loadUserBooks(String userId);
}
實現(xiàn)：UserServicelmpl.java
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookDao bookDao;
@Override
public NoteResult addBook(String userId, String bookName) {
NoteResult result = new NoteResult();
//TODO 檢測是否重名
NoteBook book = new NoteBook();
book.setCn_user_id(userId);
book.setCn_notebook_name(bookName);
String bookId = NoteUtil.createId();
book.setCn_notebook_id(bookId);
book.setCn_notebook_type_id("5");//normal
book.setCn_notebook_desc("");
Timestamp time = new Timestamp(System.currentTimeMillis());
book.setCn_notebook_createtime(time);
bookDao.save(book);//保存筆記本
result.setStatus(0);
result.setData(bookId);
result.setMsg("創(chuàng)建筆記本成功");
return result;
}
@Override
public NoteResult loadUserBooks(String userId) {
NoteResult result = new NoteResult();
List<NoteBook> books = bookDao.findByUserId(userId);
result.setStatus(0);
result.setMsg("加載用戶筆記本成功");
result.setData(books);
return result;
}
}
在Controller層調(diào)用方法，給出具體功能的URL接口
UserLoginController.java
定義了如下URL：
/notebook/add.do: 添加筆記本
/notebook/loadbooks.do: 加載筆記本
@Controller
@RequestMapping("notebook")
public class BookController {
@Autowired
private BookService bookService;
@RequestMapping("/add.do")
@ResponseBody
public NoteResult addBook(String userId,String bookName){
NoteResult result = bookService.addBook(userId, bookName);
return result;
}
@RequestMapping("loadbooks.do")
@ResponseBody
public NoteResult loadBooks(String userId){
NoteResult result = bookService.loadUserBooks(userId);
return result;
}
}
Note
定義實體
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;
...
}
定義對數(shù)據(jù)庫中Note相關(guān)數(shù)據(jù)的操作
NoteMapper.xml
定義了通過Note_id更新筆記, 刪除Note，更新Note，通過id尋找Note，通過Note_id尋找Note，添加Note操作
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.NoteDao">
<!-- public int recycle(String id);-->
<update id="updateByBookId" parameterType="map">
update cn_note set cn_notebook_id=#{book_id} where cn_note_id=#{note_id}
</update>
<update id="recycle" parameterType="string">
update cn_note
set
cn_note_status_id = '2'
where cn_note_id=#{id}
</update>
<update id="update" parameterType="org.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="findByBookId" parameterType="string"
resultType="org.cloudnote.entity.Note">
select * from cn_note
where cn_notebook_id=#{bookId} and cn_note_status_id='1'
</select>
<!--Note findById(String id);-->
<select id="findById" parameterType="string"
resultType="org.cloudnote.entity.Note">
select * from cn_note where cn_note_id = #{id}
</select>
<insert id="save" parameterType="org.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>
</mapper>
創(chuàng)建Dao層接口連接上述操作
public interface NoteDao {
public int recycle(String id);
public int update(Note note);
public List<Note> findByBookId(String bookId);
Note findById(String id);
void save(Note note);
void updateByBookId(Map<String, Object> params);
}
在Service層進行具體的功能實現(xiàn)
在Service層，實現(xiàn)了移動筆記，搜索筆記，分享筆記，更新筆記，加載筆記，加載筆記內(nèi)容，添加筆記功能
接口：UserService.java
public interface NoteService {
NoteResult moveNote(String noteId, String bookId);
NoteResult loadShare(String shareId);
NoteResult searchShare(String keyword);
NoteResult shareNote(String noteId);
NoteResult updateNote(String noteId, String noteTitle, String noteBody);
NoteResult loadBookNotes(String bookId);
NoteResult loadNoteDetail(String id);
NoteResult addNote(String bookId, String noteTitle, String userId);
}
實現(xiàn)：UserServicelmpl.java
@Service
public class NoteServiceImpl implements NoteService {
@Autowired
private NoteDao noteDao;
@Autowired
private ShareDao shareDao;
@Override
public NoteResult moveNote(String noteId, String bookId) {
NoteResult result = new NoteResult();
Map<String,Object> params = new HashMap<>();
params.put("note_id",noteId);
params.put("book_id",bookId);
noteDao.updateByBookId(params);
result.setStatus(0);
result.setMsg("轉(zhuǎn)移筆記成功");
return result;
}
@Override
public NoteResult loadShare(String shareId) {
NoteResult result = new NoteResult();
Share share = shareDao.findById(shareId);
if(share == null){
result.setStatus(1);
result.setMsg("查詢失敗");
return result;
}
result.setStatus(0);
result.setMsg("查詢成功");
result.setData(share);
return result;
}
@Override
public NoteResult searchShare(String keyword) {
NoteResult result = new NoteResult();
String title = "";
if(!"".equals(keyword) && keyword != null){
title = "%" + keyword + "%";
}else {
title = "%";
}
List<Share> list = shareDao.findLikeTitle(title);
result.setStatus(0);
result.setMsg("檢索成功");
result.setData(list);
return result;
}
@Override
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;
}
//未分享過
Note note = noteDao.findById(noteId);
if(note == null){
result.setStatus(2);
result.setMsg("該筆記不存在");
return result;
}
Share share = new Share();
String shareId = NoteUtil.createId();
share.setCn_share_id(shareId);
share.setCn_share_title(note.getCn_note_title());
share.setCn_share_body(note.getCn_note_body());
share.setCn_note_id(note.getCn_note_id());
//將share插入分享表
shareDao.save(share);
result.setStatus(0);
result.setMsg("分享筆記成功");
return result;
}
@Override
public NoteResult updateNote(String noteId, String noteTitle, String noteBody) {
NoteResult result = new NoteResult();
Note note = new Note();
note.setCn_note_id(noteId);
note.setCn_note_title(noteTitle);
note.setCn_note_body(noteBody);
note.setCn_note_last_modify_time(System.currentTimeMillis());
noteDao.update(note);
result.setStatus(0);
result.setMsg("保存筆記成功");
return result;
}
@Override
public NoteResult loadBookNotes(String bookId) {
NoteResult result = new NoteResult();
List<Note> list = noteDao.findByBookId(bookId);
result.setData(list);
result.setStatus(0);
result.setMsg("加載筆記列表成功");
return result;
}
@Override
public NoteResult loadNoteDetail(String id) {
NoteResult result = new NoteResult();
Note note = noteDao.findById(id);
if(note == null){
result.setStatus(1);
result.setMsg("找不到筆記信息");
}
result.setData(note);
result.setMsg("查找筆記成功");
result.setStatus(0);
return result;
}
@Override
public NoteResult addNote(String bookId, String noteTitle, String userId) {
NoteResult result = new NoteResult();
Note note = new Note();
note.setCn_notebook_id(bookId);
note.setCn_user_id(userId);
note.setCn_note_title(noteTitle);
note.setCn_note_body("空空如也");
note.setCn_note_status_id("1");//添加筆記狀態(tài)
String noteid = NoteUtil.createId();
note.setCn_note_id(noteid);
noteDao.save(note);
result.setStatus(0);
result.setMsg("筆記添加成功");
result.setData(noteid);
return result;
}
}
在Controller層調(diào)用方法，給出具體功能的URL接口
UserLoginController.java
定義了如下URL：
/note/move.do: 移動筆記
/note/loadShare.do: 加載分享的筆記
/note//share.do: 分享筆記
/note/update.do: 更新筆記
/note/load.do: 加載筆記內(nèi)容
/note/loadnotes.do: 加載筆記列表
/note/add.do: 添加筆記
/note/search.do: 搜索筆記
@Controller
@RequestMapping("/note")
public class NoteController {
@Autowired
private NoteService noteService;
@ResponseBody
@RequestMapping("/move.do")
public NoteResult moveNoteCotroller(String noteId,String bookId){
NoteResult result = noteService.moveNote(noteId,bookId);
return result;
}
@ResponseBody
@RequestMapping("loadShare.do")
public NoteResult loadShareController(String shareId){
NoteResult result = noteService.loadShare(shareId);
return result;
}
@ResponseBody
@RequestMapping("/search.do")
public NoteResult searchShareCotroller(String keyword){
NoteResult result = noteService.searchShare(keyword);
return result;
}
@ResponseBody
@RequestMapping("/share.do")
public NoteResult shareNote(String noteId){
NoteResult result = noteService.shareNote(noteId);
return result;
}
@ResponseBody
@RequestMapping("/update.do")
public NoteResult updateNote(String noteId,String noteTitle,String noteBody){
NoteResult result = noteService.updateNote(noteId,noteTitle,noteBody);
return result;
}
@ResponseBody
@RequestMapping("/load.do")
public NoteResult loadNoteDetail(String id){
NoteResult result = noteService.loadNoteDetail(id);
return result;
}
@ResponseBody
@RequestMapping("/loadnotes.do")
public NoteResult loadNotes(String bookId){
NoteResult result = noteService.loadBookNotes(bookId);
return result;
}
@RequestMapping("/add.do")
@ResponseBody
public NoteResult addNote(String bookId,String noteTitle,String userId){
NoteResult result = noteService.addNote(bookId,noteTitle,userId);
return result;
}
}
Share
定義實體
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;
...
}
定義對數(shù)據(jù)庫中Share相關(guān)數(shù)據(jù)的操作
ShareMapper.xml
定義了通過ID查詢，模糊搜索，添加分享操作
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.ShareDao">
<!-- public List<Share> findLikeTitle(String title);-->
<select id="findById" parameterType="string" resultType="org.cloudnote.entity.Share">
select * from cn_share where cn_share_id=#{id}
</select>
<select id="findLikeTitle" parameterType="string"
resultType="org.cloudnote.entity.Share">
select * from cn_share where cn_share_title like #{title}
</select>
<insert id="save" parameterType="org.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>
<select id="findByNoteId" parameterType="string" resultType="org.cloudnote.entity.Share">
select cn_share_id, cn_share_title, cn_share_body, cn_note_id from cn_share where cn_note_id=#{cn_note_id}
</select>
</mapper>
創(chuàng)建Dao層接口連接上述操作
public interface ShareDao {
public Share findById(String id);
public List<Share> findLikeTitle(String title);
public Share findByNoteId(String noteId);
public void save(Share share);
}
Share其他操作都在Note中實現(xiàn)
功能流程
用戶功能
注冊
前端
log_in.html
導(dǎo)入regist.js
<script type="text/javascript" src="scripts/regist.js"></script>
給控件綁定注冊事件
<input type="button" name="" id="regist_button" value=' 注 冊 ' tabindex='9'/>
regist.js
獲取log_in.html中對應(yīng)控件中的參數(shù)，檢查格式，正確后發(fā)送Ajax請求
$(function(){
$("#regist_button").click(function(){
//清除提示信息
$("#warning_1").hide()
$("#warning_2").hide()
$("#warning_3").hide()
$("#warning_4").hide()
//1.獲取請求參數(shù)
var name = $("#regist_username").val().trim();
var nick = $("#nickname").val().trim();
var password = $("#regist_password").val().trim();
var final_password = $("#final_password").val().trim();
//console.log(name,nickname,password,final_password)
//2.檢查格式
//兩次密碼一致 所有屬性非空
var ok = true
if(name == ""){
ok = false
//console.log("111111111111")
$("#warning_1 span").html("用戶名為空");
$("#warning_1").show()
}
if(nick == ""){
ok = false
$("#warning_4 span").html("昵稱為空");
$("#warning_4").show()
}
if(password == ""){
ok = false
$("#warning_2 span").html("密碼為空");
$("#warning_2").show()
}else{
if(password.length<6){
ok = false
$("#warning_2 span").html("密碼需要六位以上");
$("#warning_2").show()
}
}
if(final_password != password){
ok = false
$("#warning_3 span").html("與密碼不一致");
$("#warning_3").show()
}
//3.發(fā)送請求
if(ok){
$.ajax({
url: "http://localhost:80/user/regist.do",
type: "post",
data: {"name":name,"nick":nick,"password":password},
dataType: "json",
success: function(result){
console.log(result)
if(result.status == 0){//注冊成功
alert(result.msg) //提示
$("#back").click() //切換到登錄頁
}else if(result.status == 1){ //用戶名已被占用
$("#warning_1 span").html(result.msg);
$("#warning_1").show()
}
},
error: function(){
alert("注冊失敗")
}
})
}
})
})
后端
后端接收的Ajax請求進行注冊處理，處理內(nèi)容User中已經(jīng)表明，不詳述
@ResponseBody
@RequestMapping("/regist.do")
public NoteResult register(String name,String nick,String password){
NoteResult noteResult = userService.regist(name, password,nick);
return noteResult;
}
登錄
前端
log_in.html
導(dǎo)入login.js
<script type="text/javascript" src="scripts/login.js"></script>
給控件綁定注冊事件
<input type="button" name="" id="login" value=' 登 錄 ' tabindex='3'/>
login.js
獲取log_in.html中對應(yīng)控件中的參數(shù)，檢查格式，正確后發(fā)送Ajax請求
$(function () {
$("#login").click(function(){
//清除提示
$("#count_span").html("");
$("#password_span").html("");
//獲取請求參數(shù)
var name = $("#count").val().trim();
var password = $("#password").val().trim();
//檢查參數(shù)格式
var ok = true;
if(name == ""){
ok = false;
$("#count_span").html("用戶名為空");
}
if(password == ""){
ok = false;
$("#password_span").html("密碼為空");
}
//發(fā)送ajax請求
if(ok){
$.ajax({
url: "http://localhost:80/user/login.do",
type: "post",
data: {"name":name,"password":password},
dataType: "json",
success:function(result){
console.log(result);
if(result.status == 0){//登陸成功
var userId = result.data;//獲取用戶id存入cookie
addCookie("userId",userId,0.5);
window.location.href = "edit.html";
}else if(result.status == 1){
$("#count_span").html(result.msg);
}else if(result.status == 2){
$("#password_span").html(result.msg);
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//console.log(XMLHttpRequest.status);
//console.log(textStatus.readyState);
//console.log(errorThrown);
alert("登陸失敗，請重試")
}
})
}
});
})
后端
后端接收的Ajax請求進行登錄處理，處理內(nèi)容User中已經(jīng)表明，不詳述
@RequestMapping("/login.do")
@ResponseBody
public NoteResult execute(String name,String password){
NoteResult noteResult = userService.checkLogin(name, password);
System.out.println("noteResult = " + noteResult);
return noteResult;
}
筆記本相關(guān)功能
前端
edit.html
導(dǎo)入note.js文件
<script type="text/javascript" src="scripts/note.js"></script>
給控件綁定注冊事件
<script type="text/javascript">
var userId = getCookie("userId");
if(userId == null){//用戶未登錄
window.location.href = "log_in.html";
}else {
//其他操作
$(function(){
//實例化Ueditor編輯器
var um = UM.getEditor('myEditor');
$("#note_list").on("click","li",loadNoteDetail);
//關(guān)閉對話框
$("#can").on("click",".cancle,.close",closeWindow);
//添加筆記彈窗
$("#add_note").click(showAddNoteWindow)
//確認添加筆記
$("#can").on("click","#sure_addnote",sureAddNote);
//保存筆記
$("#save_note").click(sureUpdateNote)
//顯示筆記菜單
showNoteMenu();
//彈出筆記對話框
$("#note_list").on("click",".btn_delete",showRecycleNoteWindow)
//確認筆記放入回收站
$("#can").on("click","#sure_recyclenote",sureRecycleNote)
//分享筆記 .btn_share
$("#note_list").on("click",".btn_share",sureShareNote)
//搜索筆記
$("#search_note").keydown(sureSearchShare)
//返回筆記列表
$(".return_notelist").click(backNoteList)
//預(yù)覽分享筆記內(nèi)容
$("#search_list").on("click","li",viewShareNote)
$("#logout").click(logOut);
//移動筆記
$("#note_list").on("click",".btn_move",showMoveNoteWindow);
//確定移動筆記
$("#can").on("click","#sure_movenote",function(){
//請求參數(shù)
var $noteLi = $("#note_list a.checked").parent();
var noteId = $noteLi.data("noteId");
var bookId = $("#moveSelect").val();
console.log(noteId)
console.log(bookId)
//發(fā)送ajax
$.ajax({
url:base_url + '/note/move.do',
type:'post',
data:{'noteId':noteId,'bookId':bookId},
dataType: 'json',
success: function(result){
closeWindow();
$noteLi.remove();
alert("移動筆記成功");
},
error: function(){
alert("移動筆記失敗");
}
})
})
})
}
</script>
note.js
上述函數(shù)的實現(xiàn)
function viewShareNote(){
//將筆記設(shè)置為選中狀態(tài)
$("#search_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//獲取shareId
var shareId = $(this).data("shareId");
//發(fā)送ajax請求
$.ajax({
url: base_url + "/note/loadShare.do",
type: 'post',
dataType: 'json',
data: {"shareId":shareId},
success:function(result){
//console.log(result)
//切換筆記詳情頁
checkNoteDetailPage(5)
var title = result.data.cn_share_title;
var body = result.data.cn_share_body;
$("#noput_note_title").html(title);
$("#noput_note_body").html(body)
},
error:function(){
alert("加載筆記信息失敗")
}
})
}
function backNoteList(){
showNoteList(2);
checkNoteDetailPage(3)
}
//切換顯示筆記詳情頁
function checkNoteDetailPage(index){
//隱藏所有列表
$(".col-sm-7:not('#save_button_div')").hide();
//指定顯示列表
$("#pc_part_"+index).show();
}
//切換列表顯示
function showNoteList(index){
//隱藏所有列表
$(".col-xs-3:not('#save_button_div')").hide();
//指定顯示列表
$("#pc_part_"+index).show();
}
function sureSearchShare(event) {
var code = event.keyCode;
//console.log(code); // enter 13
if(code == 13){
//獲取搜索的關(guān)鍵字
var keyword = $("#search_note").val().trim();
//發(fā)送 ajax /note/search.do >> List<Note>
$.ajax({
url: base_url + "/note/search.do",
type: 'post',
dataType: 'json',
data: {'keyword':keyword},
success: function(result){
//console.log(result);
//切換顯示區(qū)
showNoteList(6)
//清空該區(qū)域
$("#search_list").empty();
//循環(huán)生成筆記列表
var notes = result.data;
for (var i=0;i<notes.length;i++){
var noteTitle = notes[i].cn_share_title;
var shareId = notes[i].cn_share_id
//拼一個li
var s_li = '<li class="online">'
s_li += '<a>'
s_li += '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+noteTitle
s_li += '</a>'
s_li += '</li>';
var $li = $(s_li);
//綁定shareId
$li.data("shareId",shareId);
//將li追加到ul中
$('#search_list').append($li)
}
},
error: function(){
alert("檢索筆記失敗")
}
})
}
}
function sureShareNote(){
var $li = $("#note_list a.checked").parent();
var noteId = $li.data("noteId");
//發(fā)送ajax請求
$.ajax({
url: base_url + "/note/share.do",
type: 'post',
data: {"noteId":noteId},
dataType: "json",
success: function(result){
alert(result.msg);
},
error: function(){}
})
}
function sureRecycleNote(){
//獲取筆記id
var $li = $("#note_list a.checked").parent();
var noteId = $li.data("noteId");
$.ajax({
url: base_url + "/recycle/recycle.do",
type: "post",
data: {"noteId":noteId},
dataType: "json",
success: function(result){
//console.log(result);
if(result.status == 0){
$li.remove();
alert(result.msg);
}
},
error: function(){
alert("將筆記本放入回收站失敗")
}
});
}
function showNoteMenu(){
$("#note_list").on("click",".btn_slide_down",function(){
//alert("11111111111111111")
//將所有的筆記菜單隱藏
$("#note_list .note_menu").hide()
//點擊當前的按鈕顯示菜單
var $li = $(this).parents("li")
var $menu = $li.find(".note_menu");
$menu.slideDown(1000)
});
//追加鼠標對筆記菜單的控制
$("#note_list").on("mouseover",".note_menu",function(){
$(this).show();//顯示狀態(tài)
})
$("#note_list").on("mouseout",".note_menu",function(){
$(this).hide();//隱藏狀態(tài)
})
}
function sureUpdateNote(){
//檢查是否選中筆記
var $li = $("#note_list li a.checked").parent();
if($li.length == 0){
alert("請選擇要保存的筆記")
}else {
//獲取請求參數(shù)
var noteId = $li.data("noteId");
var noteTitle = $("#input_note_title").val().trim();
var noteBody = um.getContent();
//發(fā)送ajax請求
$.ajax({
url: base_url + "/note/update.do",
dataType: "json",
data: {"noteId":noteId,"noteTitle":noteTitle,"noteBody":noteBody},
type: "post",
success: function(result){
console.log(result)
if(result.status == 0){
//更新筆記li的名稱
var str = '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+ noteTitle +
'<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(str);
//提示成功
alert(result.msg);
}
},
error:function(){
alert("保存筆記失敗");
}
})
}
}
function sureAddNote(){
//console.log("111111111111");
var noteTitle = $("#input_note").val().trim();
//筆記本id
var $li = $("#book_list li a.checked").parent();
var bookId = $li.data("bookId");
//console.log(noteTitle,bookId);
//發(fā)送ajax
$.ajax({
url: base_url + "/note/add.do",
type: "post",
data: {"bookId":bookId,"noteTitle":noteTitle,"userId":userId},
dataType: "json",
success: function(result){
if(result.status == 0){
closeWindow();
createNoteLi(noteTitle,result.data);
alert(result.msg);
}
},
error:function(){
alert("筆記添加失敗")
}
})
}
function loadNoteDetail(){
//將筆記設(shè)置為選中狀態(tài)
$("#note_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//獲取請求參數(shù)
var noteId = $(this).data("noteId");
//發(fā)送ajax
$.ajax({
url: base_url + "/note/load.do",
type: "post",
data: {"id": noteId},
dataType: "json",
success:function(result){
//console.log(result);
if(result.status == 0){
var noteTitle = result.data.cn_note_title;
var noteBody = result.data.cn_note_body;
//設(shè)置標題
$("#input_note_title").val(noteTitle);
//設(shè)置內(nèi)容
um.setContent(noteBody);
}
},
error: function(){
alert("顯示筆記詳情失敗")
}
});
}
//添加筆記li
function createNoteLi(noteTitle,noteId){
var s_li = '<li class="online">'
s_li += '<a>'
s_li += '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+noteTitle
s_li += '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>'
s_li += '</a>'
s_li += '<div class="note_menu" tabindex="-1">'
s_li += '<dl>'
s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移動至..."><i class="fa fa-random"></i></button></dt>'
s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>'
s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="刪除"><i class="fa fa-times"></i></button></dt>'
s_li += '</dl>'
s_li += '</div>'
s_li += '</li>';
//將noteId綁定到li上
var $li = $(s_li);
$li.data("noteId",noteId);
//將li追加到ul中
$("#note_list").append($li);
}
function loadBookNotes(){
//將點擊的筆記本li設(shè)置為選中狀態(tài)
$("#book_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//獲取請求參數(shù) bookId
var bookId = $(this).data("bookId");
//console.log(bookId);
//發(fā)送ajax請求
$.ajax({
url: base_url + "/note/loadnotes.do",
type: "post",
data: {"bookId":bookId},
dataType: "json",
success:function(result){
//console.log(result);
if(result.status == 0){
var notes = result.data;//獲取筆記數(shù)組
//清除原有筆記列表
$("#note_list").empty();
for(var i=0;i<notes.length;i++){
var noteTitle = notes[i].cn_note_title;
var noteId = notes[i].cn_note_id;
//拼接成筆記li
createNoteLi(noteTitle,noteId)
}
}
},
error:function(){
alert("添加筆記列表失敗")
}
});
}
后端
根據(jù)前端對應(yīng)的URL進行對應(yīng)的處理
@RequestMapping("/add.do")
@ResponseBody
public NoteResult addBook(String userId,String bookName){
NoteResult result = bookService.addBook(userId, bookName);
return result;
}
@RequestMapping("loadbooks.do")
@ResponseBody
public NoteResult loadBooks(String userId){
NoteResult result = bookService.loadUserBooks(userId);
return result;
}
筆記相關(guān)功能
前端
edit.html
導(dǎo)入notebook.js文件
<script type="text/javascript" src="scripts/notebook.js"></script>
給控件綁定注冊事件
<script type="text/javascript">
var userId = getCookie("userId");
if(userId == null){//用戶未登錄
window.location.href = "log_in.html";
}else {
//其他操作
$(function(){
//實例化Ueditor編輯器
var um = UM.getEditor('myEditor');
//發(fā)送ajax 請求加載筆記本列表
loadUserBooks();
//點擊筆記本添加筆記列表
$("#book_list").on("click","li",loadBookNotes);
//彈出添加筆記本對話框
$("#add_notebook").click(showAddBookWindow);
//關(guān)閉對話框
$("#can").on("click",".cancle,.close",closeWindow);
//確認添加筆記本
$("#can").on("click","#sure_addbook",sureAddBook);})
}</script>
notebook.js
上述函數(shù)的實現(xiàn)文章來源：http://www.zghlxwxcb.cn/news/detail-556101.html
function sureAddBook(){
var bookName = $("#input_notebook").val().trim();
//console.log(bookName);
if(bookName == ""){
alert("筆記本名稱不能為空")
return;
}
//發(fā)送ajax請求
$.ajax({
url: base_url + "/notebook/add.do",
type: "post",
data: {"userId":userId,"bookName":bookName},
dataType: "json",
success: function(result){
//console.log(result);
if(result.status == 0){
closeWindow();
//添加一個筆記本li
var bookId = result.data;
createBookLi(bookName,bookId)
alert(result.msg);
}
},
error:function(){
alert("添加筆記本失敗");
}
})
}
//追加一個筆記本li
function createBookLi(bookName,bookId){
var s_li = '<li class="online">'
s_li += '<a>'
s_li += '<i class="fa fa-book" title="online" rel="tooltip-bottom">'
s_li += '</i>' + bookName
s_li += '</a>'
s_li += '</li>';
//將bookId綁定
var $li = $(s_li);
$li.data("bookId",bookId);
//將bookId追加到ul
$("#book_list").append($li);
}
function loadUserBooks(){
$.ajax({
url: base_url + "/notebook/loadbooks.do",
type: "post",
data: {"userId":userId},
dataType: "json",
success: function(result){
var books = result.data;
//console.log(result)
for(var i=0;i<books.length;i++){
bookName = books[i].cn_notebook_name;
bookId = books[i].cn_notebook_id;
//拼接一個li
createBookLi(bookName,bookId)
}
},
error: function(){
alert("加載筆記列表失敗");
}
});
}
后端
根據(jù)前端對應(yīng)的URL進行對應(yīng)的處理文章來源地址http://www.zghlxwxcb.cn/news/detail-556101.html
@ResponseBody
@RequestMapping("/move.do")
public NoteResult moveNoteCotroller(String noteId,String bookId){
NoteResult result = noteService.moveNote(noteId,bookId);
return result;
}
@ResponseBody
@RequestMapping("loadShare.do")
public NoteResult loadShareController(String shareId){
NoteResult result = noteService.loadShare(shareId);
return result;
}
@ResponseBody
@RequestMapping("/search.do")
public NoteResult searchShareCotroller(String keyword){
NoteResult result = noteService.searchShare(keyword);
return result;
}
@ResponseBody
@RequestMapping("/share.do")
public NoteResult shareNote(String noteId){
NoteResult result = noteService.shareNote(noteId);
return result;
}
@ResponseBody
@RequestMapping("/update.do")
public NoteResult updateNote(String noteId,String noteTitle,String noteBody){
NoteResult result = noteService.updateNote(noteId,noteTitle,noteBody);
return result;
}
@ResponseBody
@RequestMapping("/load.do")
public NoteResult loadNoteDetail(String id){
NoteResult result = noteService.loadNoteDetail(id);
return result;
}
@ResponseBody
@RequestMapping("/loadnotes.do")
public NoteResult loadNotes(String bookId){
NoteResult result = noteService.loadBookNotes(bookId);
return result;
}
@RequestMapping("/add.do")
@ResponseBody
public NoteResult addNote(String bookId,String noteTitle,String userId){
NoteResult result = noteService.addNote(bookId,noteTitle,userId);
return result;
}
到了這里，關(guān)于云筆記技術(shù)文檔的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
