云笔记技术文档
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;
...
}
定义对数据库中User相关数据的操作
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>
创建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层进行具体的功能实现
在Service层,实现了修改密码,登录,注册功能
接口: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);
}
实现: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;
}
}
在Controller层调用方法,给出具体功能的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;
...
}
定义对数据库中NoteBook相关数据的操作
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>
创建Dao层接口连接上述操作
public interface BookDao {
public void save(NoteBook noteBook);
public List<NoteBook> findByUserId(String userId);
}
在Service层进行具体的功能实现
在Service层,实现了添加笔记本,加载笔记本功能
接口:UserService.java
public interface BookService {
public NoteResult addBook(String userId, String bookName);
public NoteResult loadUserBooks(String userId);
}
实现: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;
}
}
在Controller层调用方法,给出具体功能的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;
...
}
定义对数据库中Note相关数据的操作
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>
创建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层进行具体的功能实现
在Service层,实现了移动笔记,搜索笔记,分享笔记,更新笔记,加载笔记,加载笔记内容,添加笔记功能
接口: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);
}
实现: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;
}
}
在Controller层调用方法,给出具体功能的URL接口
UserLoginController.java
定义了如下URL:
/note/move.do: 移动笔记
/note/loadShare.do: 加载分享的笔记
/note//share.do: 分享笔记
/note/update.do: 更新笔记
/note/load.do: 加载笔记内容
/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;
...
}
定义对数据库中Share相关数据的操作
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>
创建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中实现
功能流程
用户功能
注册
前端
log_in.html
导入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中对应控件中的参数,检查格式,正确后发送Ajax请求
$(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("注册失败")
}
})
}
})
})
后端
后端接收的Ajax请求进行注册处理,处理内容User中已经表明,不详述
@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
导入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中对应控件中的参数,检查格式,正确后发送Ajax请求
$(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("登陆失败,请重试")
}
})
}
});
})
后端
后端接收的Ajax请求进行登录处理,处理内容User中已经表明,不详述
@RequestMapping("/login.do")
@ResponseBody
public NoteResult execute(String name,String password){
NoteResult noteResult = userService.checkLogin(name, password);
System.out.println("noteResult = " + noteResult);
return noteResult;
}
笔记本相关功能
前端
edit.html
导入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);
//关闭对话框
$("#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
上述函数的实现
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("添加笔记列表失败")
}
});
}
后端
根据前端对应的URL进行对应的处理
@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;
}
笔记相关功能
前端
edit.html
导入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');
//发送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
上述函数的实现文章来源:https://www.toymoban.com/news/detail-556101.html
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("加载笔记列表失败");
}
});
}
后端
根据前端对应的URL进行对应的处理文章来源地址https://www.toymoban.com/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;
}
到了这里,关于云笔记技术文档的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!