用户使用过程中一定需要取消关注等功能,首先后端实现数据库关注表的修改,添加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();},