一、需求描述:

假设用户需要申请加入一个team,在点击申请加入后向team的创建者发送一条消息。这时候会在用户的右下角有弹窗提示操作是否成功。(当然,我这里为了演示,还没有把如果已经在团队里则拒绝申请的逻辑加进去,后面真正做项目的时候加)流程如下面这些图:

1.点击加入团队按钮

2.输入需要加入的团队名字

3.输入Team01,点击搜索


4.点击申请加入,右下角根据服务器端执行状态弹出提示。然后5秒后消失,比如第一次申请时,成功


5.第二次申请时,失败。


二、实现

2.1 数据库

简单的一个信息表,四个字段

fromusername:发消息的人
tousername:接收消息的人
ishandle:消息是否处理
msgcontent:消息内容

2.2 前端Ajax

前端发起Post请求,根据服务端返回过来的JSON数据,进行相应的操作,发送消息成功或失败都使用 $.amaran()进行右下角的提示,只不过提示的内容是根据服务端的数据显示的。

有关amaranJS的使用参考官方文档

    //为加入团队对话框生成的团队搜索结果中的 申请加入按钮添加点击事件
    $(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<String, Object> applyJoinTeam(HttpServletRequest request, JoinTeamMsg joinTeamMsg) {
        Map<String, Object> map = new HashMap<String, Object>();
        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创建者的浏览器弹出消息提示。做完再记录。