用户使用过程中一定需要取消关注等功能,首先后端实现数据库关注表的修改,添加DAO方法:
@Override

public int deleteFollow(String user_name, String follow_name) {
    Connection conn=getConnection();
    String sql="";
    PreparedStatement pstmt;
    sql="DELETE FROM follow WHERE user_name = ? AND follow_name = ?";
    try{
        pstmt=conn.prepareStatement(sql);
        pstmt.setString(1, user_name);
        pstmt.setString(2, follow_name);
        
        return pstmt.executeUpdate();
    }catch(SQLException e){
        e.printStackTrace();
        return 0;
    }finally{
        closeConnection(conn);
    }
}

servlet,实现得到前端传来的数据,根据数据更改数据库:

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {

    
    
    req.setCharacterEncoding("UTF-8");
    resp.setCharacterEncoding("UTF-8");
    
    String name = req.getParameter("name");
    String follow = req.getParameter("follow");
    int result = new UserDAO().deleteFollow(name, follow);
    
    // 创建一个json的对象,把结果保存到result键中
    JsonObject result_obj= new JsonObject();
    result_obj.addProperty("result", result);
    
    resp.setContentType("application/json");
    PrintWriter out = resp.getWriter();
    
    // 输出响应结果的时候,以json字符串响应
    out.println(result_obj.toString());
}

前端需要实现随时更新会话,保证用户互动及时性,所以要修改多个组件异步请求,涉及登录组件,触发关注弹窗组件等,这里就只贴follow组件的methods:
deleteFollow(index){

        var f=this.$refs.ref1[index].innerText;
        f=f.substring(0,f.length-5);
        
        this.$http.post('/api/UserManager/DeleteFollow?name='+sessionStorage.getItem('login_user')+'&follow='+f)
                        .then((response)=>{
                            
                        })
                        .catch(function(err){
                          console.log(err);
                        });
                        this.$refs.ref1[index].remove();
    },