Cloud note technical documentation
User
define entity
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;
...
}
Define operations on User-related data in the database
UserMapper.xml
Define the update password, find User by ID, find User by name, add User operation
<?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>
Create a Dao layer interface to connect the above operations
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);
}
Implement specific functions in the Service layer
In the Service layer, the functions of changing password, logging in, and registering are implemented
Interface: 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);
}
Implementation: 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();
//根据用户名获取用户
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();
//数据检测
User has_user = userDao.findByName(name);
if(has_user != null){
result.setStatus(1);
result.setMsg("用户名被占用");
return result;
}
//将参数封装成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;
}
}
Call the method at the Controller layer, and give the URL interface of the specific function
UserLoginController.java
The following URLs are defined:
/user/changepassword.do: change password
/user/login.do: login
/user/regist.do: Register
@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
define entity
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;
...
}
Define operations on NoteBook-related data in the database
NoteBookMapper.xml
Defines the operation of adding Notebook, looking for Notebook by User_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.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>
Create a Dao layer interface to connect the above operations
public interface BookDao {
public void save(NoteBook noteBook);
public List<NoteBook> findByUserId(String userId);
}
Implement specific functions in the Service layer
In the Service layer, the functions of adding notebooks and loading notebooks are implemented
Interface: UserService.java
public interface BookService {
public NoteResult addBook(String userId, String bookName);
public NoteResult loadUserBooks(String userId);
}
Implementation: 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("创建笔记本成功");
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;
}
}
Call the method at the Controller layer, and give the URL interface of the specific function
UserLoginController.java
The following URLs are defined:
/notebook/add.do: add a notebook
/notebook/loadbooks.do: load notebooks
@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
define entity
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;
...
}
Define operations on Note-related data in the database
NoteMapper.xml
Defines update notes by Note_id, delete Note, update Note, find Note by id, find Note by Note_id, add Note operation
<?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>
Create a Dao layer interface to connect the above operations
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);
}
Implement specific functions in the Service layer
In the Service layer, the functions of moving notes, searching notes, sharing notes, updating notes, loading notes, loading note content, and adding notes are realized
Interface: 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);
}
Implementation: 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("转移笔记成功");
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");//添加笔记状态
String noteid = NoteUtil.createId();
note.setCn_note_id(noteid);
noteDao.save(note);
result.setStatus(0);
result.setMsg("笔记添加成功");
result.setData(noteid);
return result;
}
}
Call the method at the Controller layer, and give the URL interface of the specific function
UserLoginController.java
The following URLs are defined:
/note/move.do: move notes
/note/loadShare.do: load shared notes
/note//share.do: share notes
/note/update.do: update notes
/note/load.do: load note content
/note/loadnotes.do: load notes list
/note/add.do: add note
/note/search.do: Search notes
@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
define entity
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;
...
}
Define operations on Share-related data in the database
ShareMapper.xml
Define query by ID, fuzzy search, add sharing operation
<?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>
Create a Dao layer interface to connect the above operations
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 and other operations are implemented in Note
Functional flow
user function
register
front end
log_in.html
import regist.js
<script type="text/javascript" src="scripts/regist.js"></script>
Bind the registration event to the control
<input type="button" name="" id="regist_button" value=' 注 册 ' tabindex='9'/>
regist.js
Get the parameters in the corresponding control in log_in.html, check the format, and send the Ajax request after it is correct
$(function(){
$("#regist_button").click(function(){
//清除提示信息
$("#warning_1").hide()
$("#warning_2").hide()
$("#warning_3").hide()
$("#warning_4").hide()
//1.获取请求参数
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.发送请求
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("注册失败")
}
})
}
})
})
rear end
The Ajax request received by the backend is registered and processed. The processing content has been indicated in User and will not be described in detail.
@ResponseBody
@RequestMapping("/regist.do")
public NoteResult register(String name,String nick,String password){
NoteResult noteResult = userService.regist(name, password,nick);
return noteResult;
}
Log in
front end
log_in.html
import login.js
<script type="text/javascript" src="scripts/login.js"></script>
Bind the registration event to the control
<input type="button" name="" id="login" value=' 登 录 ' tabindex='3'/>
login.js
Get the parameters in the corresponding control in log_in.html, check the format, and send the Ajax request after it is correct
$(function () {
$("#login").click(function(){
//清除提示
$("#count_span").html("");
$("#password_span").html("");
//获取请求参数
var name = $("#count").val().trim();
var password = $("#password").val().trim();
//检查参数格式
var ok = true;
if(name == ""){
ok = false;
$("#count_span").html("用户名为空");
}
if(password == ""){
ok = false;
$("#password_span").html("密码为空");
}
//发送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("登陆失败，请重试")
}
})
}
});
})
rear end
The Ajax request received by the backend is processed for login, and the processing content has been indicated in User, and will not be described in detail
@RequestMapping("/login.do")
@ResponseBody
public NoteResult execute(String name,String password){
NoteResult noteResult = userService.checkLogin(name, password);
System.out.println("noteResult = " + noteResult);
return noteResult;
}
Notebook related functions
front end
edit.html
Import the note.js file
<script type="text/javascript" src="scripts/note.js"></script>
Bind the registration event to the control
<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);
//关闭对话框
$("#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)
//预览分享笔记内容
$("#search_list").on("click","li",viewShareNote)
$("#logout").click(logOut);
//移动笔记
$("#note_list").on("click",".btn_move",showMoveNoteWindow);
//确定移动笔记
$("#can").on("click","#sure_movenote",function(){
//请求参数
var $noteLi = $("#note_list a.checked").parent();
var noteId = $noteLi.data("noteId");
var bookId = $("#moveSelect").val();
console.log(noteId)
console.log(bookId)
//发送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
Implementation of the above functions
function viewShareNote(){
//将笔记设置为选中状态
$("#search_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//获取shareId
var shareId = $(this).data("shareId");
//发送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){
//获取搜索的关键字
var keyword = $("#search_note").val().trim();
//发送 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);
//切换显示区
showNoteList(6)
//清空该区域
$("#search_list").empty();
//循环生成笔记列表
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");
//发送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();//显示状态
})
$("#note_list").on("mouseout",".note_menu",function(){
$(this).hide();//隐藏状态
})
}
function sureUpdateNote(){
//检查是否选中笔记
var $li = $("#note_list li a.checked").parent();
if($li.length == 0){
alert("请选择要保存的笔记")
}else {
//获取请求参数
var noteId = $li.data("noteId");
var noteTitle = $("#input_note_title").val().trim();
var noteBody = um.getContent();
//发送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);
//发送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(){
//将笔记设置为选中状态
$("#note_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//获取请求参数
var noteId = $(this).data("noteId");
//发送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;
//设置标题
$("#input_note_title").val(noteTitle);
//设置内容
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设置为选中状态
$("#book_list li a").removeClass("checked");
$(this).find("a").addClass("checked");
//获取请求参数 bookId
var bookId = $(this).data("bookId");
//console.log(bookId);
//发送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;//获取笔记数组
//清除原有笔记列表
$("#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("添加笔记列表失败")
}
});
}
rear end
Perform corresponding processing according to the URL corresponding to the front end
@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 related functions
front end
edit.html
Import the notebook.js file
<script type="text/javascript" src="scripts/notebook.js"></script>
Bind the registration event to the control
<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');
//发送ajax 请求加载笔记本列表
loadUserBooks();
//点击笔记本添加笔记列表
$("#book_list").on("click","li",loadBookNotes);
//弹出添加笔记本对话框
$("#add_notebook").click(showAddBookWindow);
//关闭对话框
$("#can").on("click",".cancle,.close",closeWindow);
//确认添加笔记本
$("#can").on("click","#sure_addbook",sureAddBook);})
}</script>
notebook.js
Implementation of the above functions
function sureAddBook(){
var bookName = $("#input_notebook").val().trim();
//console.log(bookName);
if(bookName == ""){
alert("笔记本名称不能为空")
return;
}
//发送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("加载笔记列表失败");
}
});
}
rear end
Perform corresponding processing according to the URL corresponding to the front end
@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;
}