note_cloud--笔记分享功能

笔记的分享功能
------------------------------------------------------------------------------------------------

 

发送请求

发送事件：点击“分享”事件

请求参数：noteId

请求地址：/share/add.do

服务器处理

创建Share的实体类

Controller

Service

Dao

cn_share（insert）

回调处理

success：

1.增加图标处理<i class="fa fa-sitemap"></i>

2.提示分享成功

error：

提示分享失败

------------------------------------------------------------------------------------------------

实体类：

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;

------------------------------------------------------------------------------------------------

Dao接口：

package cn.tedu.cloud_note.dao;

import cn.tedu.cloud_note.entity.Share;

public interface ShareDao {
	//分享笔记(插入数据)
	public void share(Share share);
}

------------------------------------------------------------------------------------------------

映射文件：

<mapper namespace="cn.tedu.cloud_note.dao.ShareDao">
	
	<!-- 分享笔记 -->
	<insert id="save" parameterType="cn.tedu.cloud_note.entity.Share">
		INSERT INTO cn_share VALUES(
			#{cn_share_id},
			#{cn_share_title},
			#{cn_share_body},
			#{cn_note_id}
		)
	</insert>
</mapper>

------------------------------------------------------------------------------------------------

业务层接口：

package cn.tedu.cloud_note.service;

import cn.tedu.cloud_note.util.NoteResult;

public interface ShareService {
	//分享笔记
	public NoteResult<Object> shareNote(String noteId);
}

------------------------------------------------------------------------------------------------

业务层实现类;

package cn.tedu.cloud_note.service;

import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import cn.tedu.cloud_note.dao.NoteDao;
import cn.tedu.cloud_note.dao.ShareDao;
import cn.tedu.cloud_note.entity.Share;
import cn.tedu.cloud_note.util.NoteResult;
import cn.tedu.cloud_note.util.NoteUtil;

@Service("shareService")
public class ShareServiceImpl implements ShareService {
	@Resource(name="shareDao")
	private ShareDao shareDao;
	
	@Resource(name="noteDao")
	private NoteDao noteDao;
	
	//分享笔记
	public NoteResult<Object> shareNote(String noteId) {
		NoteResult<Object> result= new NoteResult<Object>();
		//实例化Share
		Share share = new Share();
		share.setCn_note_id(noteId);
		//获取id
		String shareId = NoteUtil.createId();
		share.setCn_share_id(shareId);//主键
		
		//根据传入的参数noteId查找出其余所需的参数
		Map<String,String> map = noteDao.findByNoteId(noteId);
		String noteTitle = map.get("cn_note_title");
		String noteBody = map.get("cn_note_body");
		share.setCn_share_title(noteTitle);
		share.setCn_share_body(noteBody);
		//分享笔记
		shareDao.share(share);
		result.setStatus(0);
		result.setMsg("分享笔记成功");
		return result;
	}
}

注意事项：

1.Share有4个属性，在业务层中要对其进行实例化,并调用Dao时传入

2.ajax中发送请求参数noteId，在业务层中通过noteId访问数据库查到noteTitle和noteBody用于给Share的属性赋值，还有一个属性通过UUID获取

 

------------------------------------------------------------------------------------------------

控制层Controller：

 

package cn.tedu.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 cn.tedu.cloud_note.service.ShareService;
import cn.tedu.cloud_note.util.NoteResult;

@Controller
@RequestMapping("/share")
public class ShareController {
	@Resource(name="shareService")
	private ShareService service;
	//分享笔记
	
	@RequestMapping("/add.do")
	@ResponseBody
	public NoteResult<Object> execute(String noteId){
		NoteResult<Object> result = service.shareNote(noteId);
		return result;
	}
}

 

------------------------------------------------------------------------------------------------

HTML部分代码：

//笔记下拉按钮的分享功能(单击分享,成功后弹窗提示成功)
$("#note_ul").on("click",".btn_share",share);

------------------------------------------------------------------------------------------------

引用的JS代码：

//分享笔记
function share(){
	  //获取请求参数--$(this)表示当前点击的jQuery
	  var $li = $(this).parents("li");
	  var noteId = $li.data("noteId");
	  //alert(noteId);
	  //发送ajax
	  $.ajax({
		  url:path + "/share/add.do",
		  type:"post",
		  data:{"noteId":noteId},
		  dataType:"json",
		  success:function(result){
			  if(result.status == 0){//回调成功
				  //新节点的图标(title还可以通过$li.text()获取)
				  var a = '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+
					  $li.text() + '<i class="fa fa-sitemap"></i>'+
				    '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
				  //将笔记的li元素的<a>标记内容替换
				  $li.find("a").html(a);
				  //提示分享成功
				  alert(result.msg);
			  }
		  },
		  error:function(){alert("分享笔记失败");}
	  });
  }

注意事项：

1.$(this).parents("li")获取笔记列表的li（jQuery对象）

2.回调函数中对li中的<a>标签进行了重新定义

3.$li.text()可以获得li标签里的内容（不包括标签）

4.回调中可以不修改<a>标签，在button标签前面添加图片

如下所示：

success:function(result){
	if(result.status == 0){
		alert(result.msg);//提示成功
		//增加图标处理
		var $btn = $li.find(".btn_slide_down");
		//在按钮前面追加图标
		$btn.before('<i class="fa fa-sitemap"></i>');
	}
}

------------------------------------------------------------------------------------------------

测试结果：