云笔记添加笔记本

最新推荐文章于 2024-09-26 23:18:34 发布

JavaScript豆豆

最新推荐文章于 2024-09-26 23:18:34 发布

阅读量271

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45695622/article/details/106800494

版权

本文详细介绍了如何在云笔记应用中实现笔记本的创建流程，包括前端JavaScript的表单验证、Ajax异步请求，后端Spring MVC框架的控制器处理，以及MyBatis的数据持久化操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、根据注册过的账户登录系统，成功登录系统后选择创建笔记本
笔记本添加流程：用户点击加号 “+” -> 填写笔记本名称 -> 提交数据 ajax 发送请求 -> DispatcherServlet 拦截过滤请求 -> 分配 controller AddBookController -> 执行 controller.execute() 方法 -> 返回操作结果 -> ajax 接受返回结果 -> status = 0 ,笔记本添加成功 status =1 笔记本添加失败 -> 提示用户操作结果。
二、提交数据

 
function addBook(){
	//获取用户ID
	var userId=getCookie("userId");
	//获取笔记本标题
	var title=$("#input_notebook").val();
	//数据格式检查
	var ok=true;
	if(title==""){
		ok=false;
		$("#title_span").html("标题不能为空");
	}
	if(userId==null){//检查是否生效
		ok=false;
		window.location.href="log_in.html";
	}
	if(ok){
		//发送ajax请求
		$.ajax({
			url:base_path+"/book/add.do",
			type:"post",
			data:{"userId":userId,"title":title},
			dataType:"json",
			success:function(result){
				var book=result.data;
				if(result.status==0){
					var id=book.cn_notebook_id;
					var title=book.cn_notebook_name;
					createBookLi(id,title);//创建一个笔记本列表的li元素
					alert(result.msg);
				}
			},
			error:function(){
				alert("创建笔记本失败");
			}
		});
	}
};

三、controller 响应请求 AddBookController.java

package com.sjh.cloud_note.controller;
 
import javax.annotation.Resource;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.sjh.cloud_note.entity.Book;
import com.sjh.cloud_note.service.BookService;
import com.sjh.cloud_note.util.NoteResult;
 
@Controller
@RequestMapping("/book")
public class AddBookController {
 
	@Resource
	private BookService bookService;
	
	@RequestMapping("/add.do")
	@ResponseBody
	public NoteResult<Book> execute(String userId,String title){	
		NoteResult result = bookService.AddBook(userId, title);
		return result;
	}
}

四、执行 execute 根据用户Id 加载笔记本列表，AddBook 添加笔记本

package com.sjh.cloud_note.service;
 
 
import java.util.List;
 
import com.sjh.cloud_note.entity.Book;
import com.sjh.cloud_note.util.NoteResult;
 
public interface BookService {
	public  NoteResult<List<Book>> loadBooks(String userId);
	
	public NoteResult<Book> AddBook(String userId,String title);
}

五、笔记本数据库访问接口 BookDao.java,方法名必须和mapper 中的对应操作 id 保持一致。否则会报异常

package com.sjh.cloud_note.dao;
 
import java.util.List;
 
import com.sjh.cloud_note.entity.Book;
 
public interface BookDao {
	public List<Book> findByUserId(String userId);
	
	public void save(Book book); 
}

六、笔记本数据库配置文件，当添加完毕笔记本之后自动刷新界面，会自动根据用户Id 查找用户所有的笔记本。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="com.sjh.cloud_note.dao.BookDao">
	<select id="findByUserId" parameterType="string" resultType="com.sjh.cloud_note.entity.Book">
		select * from cn_notebook where cn_user_id=#{userId} order by cn_notebook_createtime desc
	</select>
	<insert id="save" parameterType="com.sjh.cloud_note.entity.Book">
		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>
</mapper>