一、需求描述:
假设用户需要申请加入一个team,在点击申请加入后向team的创建者发送一条消息。这时候会在用户的右下角有弹窗提示操作是否成功。(当然,我这里为了演示,还没有把如果已经在团队里则拒绝申请的逻辑加进去,后面真正做项目的时候加)流程如下面这些图:
1.点击加入团队按钮
2.输入需要加入的团队名字
3.输入Team01,点击搜索
4.点击申请加入,右下角根据服务器端执行状态弹出提示。然后5秒后消失,比如第一次申请时,成功
5.第二次申请时,失败。
二、实现
2.1 数据库
简单的一个信息表,四个字段
fromusername:发消息的人
tousername:接收消息的人
ishandle:消息是否处理
msgcontent:消息内容
2.2 前端Ajax
前端发起Post请求,根据服务端返回过来的JSON数据,进行相应的操作,发送消息成功或失败都使用 $.amaran()进行右下角的提示,只不过提示的内容是根据服务端的数据显示的。
//为加入团队对话框生成的团队搜索结果中的 申请加入按钮添加点击事件
$(document).on("click","#btn_shenqingjiaru",function(){
var relativepath = $("#ctxValue").attr("value");
$.post(
relativepath + 'applyJoinTeam.do',
{
tousername: $("td[value='td_teamCreatorName']").text(),
msgcontent: "申请加入"
},
function(data,status){
if(data.code=="success"){
$.amaran({
content:{
title:'通知',
message:'申请成功',
info:'',
icon:'fa fa-check-square'
},
theme:'awesome ok'
});
}else if(data.code="failed"){
$.amaran({
content:{
title:'通知',
//message:'申请成功',
message: data.msg,
info:'',
icon:'fa fa-warning'
},
theme:'awesome error'
});
}
}
);
});
2.3 后端controller的处理
实体类 JoinTeamMsg, 省略Get Set方法
package cn.cloud.kysq.team.entity;
/**
* 申请加入团队的消息实体类
* @author zhb
*/
public class JoinTeamMsg {
private String fromusername; // 发消息的人
private String tousername; // 收消息的人
private Integer ishandle; // 是否处理了,未处理0,处理1。 默认值为0未处理
private String msgcontent; // 消息内容
public JoinTeamMsg() {
}
// 对应用户申请加入团队的请求
@ResponseBody
@RequestMapping(value = "/applyJoinTeam.do", method = RequestMethod.POST)
public Map applyJoinTeam(HttpServletRequest request, JoinTeamMsg joinTeamMsg) {
Map map = new HashMap();
String fromusername = ((User)request.getSession().getAttribute("user")).getUsername();
boolean issuccess = teamService.applyjoinTeam(fromusername, joinTeamMsg.getTousername(), joinTeamMsg.getMsgcontent());
if (issuccess) {
map.put("code", "success");
map.put("msg", "申请加入成功");
}else {
map.put("code", "failed");
map.put("msg", "申请加入失败,网络错误或不能重复申请");
}
return map;
}
后序还需要在team创建者的浏览器弹出消息提示。做完再记录。