用户使用过程中一定需要取消关注等功能,首先后端实现数据库关注表的修改,添加DAO方法:
@Overridepublic 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,实现得到前端传来的数据,根据数据更改数据库:
@Overrideprotected 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();
},