10.用户收藏和取消收藏app

飞一样的编程
飞一样的编程
擅长邻域:Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

分类: springboot vue 专栏: 【带小白做项目】springboot和vue前台开发 标签: 收藏 取消收藏功能

2026-01-31 21:16:01 80浏览

用户取消收藏和收藏功能开发

咱们后台的进阶课是写过这部分功能的,可以直接拿来重复使用

特别注意

我们前台的功能不想让管理员或者开发员这种后台角色登录使用的话,拦截器要做以下处理


public class LoginIntercept implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //检查一下前端传过来的token
        response.setContentType("application/json;charset=UTF-8");
        String token = request.getHeader("token");


        if(!StringUtils.hasText(token)){

            PrintWriter writer = response.getWriter();
            if( request.getRequestURI().startsWith("/front")){
                writer.write(JSON.toJSONString(ResultVo.rejectFront("token没传")));

            }else{
                writer.write(JSON.toJSONString(ResultVo.reject("token没传")));

            }
            writer.close();
            writer.flush();
            return false;
        }

        try {

            String role = JwtUtils.getRole(token);
            if(request.getRequestURI().startsWith("/front") ){
                if(!role.equals("user")){
                    PrintWriter writer = response.getWriter();
                    writer.write(JSON.toJSONString(ResultVo.rejectFront("token传了但传的不是普通用户的角色")));
                    writer.close();
                    writer.flush();
                    return false;
                }

            }
            return true;
        } catch (Exception e) {
            PrintWriter writer = response.getWriter();
            writer.write(JSON.toJSONString(ResultVo.reject(e.getMessage())));
            writer.close();
            writer.flush();
            return false;
        }


    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
    }
}

重点就是

前端取消收藏和收藏功能做到一起

如果当前登陆者已经收藏过该 app 的话,这个收藏按钮变成已收藏按钮(鼠标移动上去提示点击取消收藏)。并且收藏按钮和已收藏按钮的样式要明显不一样。

当然如果当前用户还没登录的话,就默认收藏按钮就行

也就是说这个按钮最少有两种样式,分别是未登录状态下的默认收藏按钮

登录状态下,当前登录者收藏过的话是已收藏按钮,鼠标移动上去可以点击取消收藏后又变成默认收藏按钮样式

如果当前登陆者没有收藏过的话,那就默认样式

主要是三个接口


    //收藏app
    @GetMapping("/collect/{appid}")
    @ApiOperation(value = "收藏app")
    public ResultVo collect(@PathVariable Long appid, HttpServletRequest request){
        String token = request.getHeader("token");
        String userName = JwtUtils.getUserName(token);
        userinfoService.collect(appid,userName);

        return ResultVo.success("收藏成功");
    }

    //检查是否收藏
    @GetMapping("/checkCollected/{appid}")
    public  ResultVo checkCollected(@PathVariable Long appid,HttpServletRequest request){
        String token = request.getHeader("token");
        String userName = JwtUtils.getUserName(token);
        Userinfo userinfo=userinfoService.getByUserName(userName);
        Integer count = userinfoCollectService.checkCollected(userinfo.getId(), appid);
        if(count>0){
            return ResultVo.success("已收藏",true);
        }else{
            return ResultVo.success("未收藏",false);
        }
    }

    //取消收藏

    @DeleteMapping("/cancelCollect/{appid}")
    public ResultVo cancelCollect(@PathVariable Long appid,HttpServletRequest request){

        //确认一下是不是本人操作
        String token = request.getHeader("token");
        String userName = JwtUtils.getUserName(token);
        Userinfo userinfo=userinfoService.getByUserName(userName);

        userinfo.getId();//当前的登录者id


        userinfoCollectService.cancelCollect(userinfo.getId(),appid);
        return ResultVo.success("取消收藏");
    }

好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695