前后端实现增删改查

• 给页面添加“增删改查”的按钮。

删除

• 前台给删除按钮注册事件，通过事件冒泡方式，让表格的所有的删除按钮都有这个事件。
• 首先给确认按钮注销事件
• 获取id，在删除按钮处用data-id=“cell” 方式获取id，通过json.val("")获取id值。
• 把id包装成json格式准备传递
• var param={“id”:id}
• 弹出模态框
• 给确认按钮注册事件（发送请求删除数据，关闭模态框，刷新页面。）

	/* 给删除按钮注册事件 */
  	//表格id table-demo-baseCode
	$("#table-demo-baseCode" ).on("click","a[data-id]",function(){
		//给模态框删除按钮注销事件  
		$("#deleteId a[code='confirm']").off();
		//获取id
		var id=$(this).data("id");
		//弹出模态框
		$("#deleteId").modal("show");
		//给确认按钮注册事件
		$("#deleteId a[code='confirm']").on("click",function(){
			//包装id准备传递
			var param={"id":id};
			//发送请求删除数据
			$.get("/system/article/delete",param,function(result){
				if(result.success){
					//删除成功关闭模态框
					$("#deleteId").modal("hide");
					//刷新页面，返回主展示页面
					//使用工具刷新
					GridManager.refreshGrid('demo-baseCode');//与gridManagerName的值相对应
				}
			})
		})
	})	

• 后台逻辑 写一个工具类AjaxResult 用来返回操作状态（成功与失败）
• mapper层通过id删除文章，service层先通过id去查询文章，先删除文章静态资源，然后在去删除数据库。controler层调用delete方法删除，返回Ajax。

- 增加

• 准备新增，修改模态框
• 给增加按钮注册事件
• 使用插件，清空表单
• 清空UEditer内容
• 手动清空id
• 默认选中启用状态
• 弹出模态框

- 修改

• 给修改按钮注册事件
• 清空表单
• 清空UEditer内容
• 手动清空id
• 获取数据
• 使用插件表单数据回显
• 弹出模态框

	//给修改按钮注册事件
   $("#table-demo-baseCode").on("click","a[data-obj]",function(){
	  //清空模态框
	  $("#addupdate").clearForm();
	//清空UEditer的内容
		//创建ueditor的实例
		var ue = UE.getEditor('container');
		//清空UEditor中的内容
		ue.ready(function() {
			ue.setContent("");
		});
		//手动清空id
		$("#add input[name='id']").val("");
		//获取数据
		var obj=$(this).data("obj");
		//使用工具回显数据
		$("#upform").setForm(obj);
		//弹出模态框
		$("#addupdate").modal("show");
   })

- 保存

• 给保存按钮注册事件
• 使用ajaxSubmit提交表单数据到后台
• 回掉函数成功就是关闭模态框，使用工具刷新页面。
• 失败就弹出提示信息。

//给保存按钮注册事件
$("#save").on("click",function(){
	   //使用ajaxsubmit提交
	   $("#upform").ajaxSubmit({
			//回调函数
		   success:function(result){
			   if(result.success){
				   //关闭模态框
				   $("#addupdate").modal("hide");
				   //刷新列表
				   GridManageger:refreshGrid('demo-baseCode');
			   }else{
				   alert(result.msg);
			   }
		   }
	   })
   })

后台逻辑

• 在controller层调用save，新增修改方法
• 在service层判断id是否为空，为空就是添加，不为空就是修改。
• 在修改前应该先去删除静态资源。
• 新增和修改都重新的去生成html页面。
• 判断父路径是否存在，不存在就去创建。
• 设置文章的url

/**
	 * 修改或者新增文章
	 */
	@Override
	public void save(Article article,HttpServletRequest request) {
	try { 
		//获取上下文路径
		ServletContext context = request.getServletContext();
		//获取真实路径
		String realPath = context.getRealPath("/");
		
			//如果id不为空
			if(article.getId()!=null){
				//根据id去查询这篇文章
				Article article2 = articleMapper.selectById(article.getId());
				//定位静态资源，如果存在就先删除静态资源
				File file=new File(realPath, article2.getUrl());
				if(file.exists()){
					file.delete();
				}	
			}
			//使用模板技术将jsp页面静态化成html页面
			//创建freemark核心对象
			Configuration configuration = new Configuration(Configuration.VERSION_2_3_28);
			//加载模板路径
			configuration.setDirectoryForTemplateLoading(new File(realPath,"/static/template"));
			//设置模板的字符集
			configuration.setDefaultEncoding("UTF-8");
			//获取模板对象
			Template template = configuration.getTemplate("articlt.ftl");
			//创建一个随机名给文件命名
			String url="/home/article"+System.currentTimeMillis()+".html";
			//创建新的静态资源
			File file=new File(realPath, url);
			//判断父路径是否存在，如果不存在就创建
			if(!file.getParentFile().exists()){
				//创建夫文件夹
				file.getParentFile().mkdirs();
			}
			//创建输出流
			FileWriter fw=new FileWriter(file);
			//模板和数据合并
			template.process(article, fw);
			//关闭流
			fw.close();
			//重新设置url
			article.setUrl(url);
		} catch (Exception e) {
			// TODO: handle exception
		}
		//id为空就新增，不为空就修改
		if(article.getId()!=null){
			articleMapper.update(article);
		}else{
			articleMapper.save(article);
		}
	}