vue、java实现前后端分离(登录跳转,路由守卫,拦截器,分页,动态查询)

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

1. sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
2. localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

注意:sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

一、添加包装类ResponesVo(用于controller层返回给前端）

@Data
@AllArgsConstructor//全参构造
@NoArgsConstructor//无参构造
public class ResponseVo {
    private Integer code=1;
    private String msg="操作成功";
    private T data;
    public  ResponseVo(T data){
        this.data=data;
    }
    /*成功*/
    public static  ResponseVo SUCCESS(T data){
        return new ResponseVo(data);
    }
    /*失败*/
    public static  ResponseVo FALL(T data){
        return new ResponseVo(0,"操作失败",data);
    }
}

二，实现用户登录跳转

后端

UserSevice层接口

boolean login(User user);

UserServiceImpl实现

因为使用的是mabatisPlus所以UserServiceImpl继承serviceImpl，getOne是查一个，new一个QueryWrapper后直接把loginname和password给getOne，他会通过loginname和password查到这个人的信息，判断是否为空来返回false，true

 @Resource
    private UserMapper userMapper;
    @Override
    public boolean login(User user) {
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("loginname",user.getLoginname());
        queryWrapper.eq("password",user.getPassword());
        User one = this.getOne(queryWrapper);
        return one==null?false:true;
    }

UserController

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserServiceImpl userService;
    //认证
    @PostMapping
    public ResponseVo loign(@RequestBody User user){
        boolean login = userService.login(user);
        return ResponseVo.SUCCESS(login);
    }
}

前端

三、路由守卫

写入路由守卫后没有登录的情况下不能查看其他页面

在main.js中加入

router.beforeEach((to,from,next)=> {
  // to 代表的是要到达的地方
// from  即将离开的地方
// next
  if (to.path == '/' || localStorage.getItem("user")) {
    next()
  } else {
    next("/")
  }
})

router是路由，beforeEach是跳转之前做什么，to 代表的是要到达的地方， from  即将离开的地方，nex与下面对应的钩子函数确认到哪里

'/'当前是登录页面直接放行或者localStorage有user，如果没有就跳转登录页面

bug（如果浏览器的localStorage中有其他数据并不能识别，也会执行跳转）

四、拦截器

在请求或响应被 then 或catch 处理前拦截它们

在main.js中加入（作用是后端判断是否有用户登录，根据后端返回的code来进行下一步操作）

/**
 *  请求拦截器
 */
instance.interceptors.request.use(config=>{

  // 头里面加一个参数   myname
  config.headers.myname=localStorage.getItem("use");
  //
  // config["headers"]['myname']

  return config;
})
/**
 * 响应拦截器
 */
instance.interceptors.response.use( (response)=> {
  let repdata = response.data.data;

  return repdata;
});

五、分页

添加分页插件

@Configuration
public class PagePlugins {
    /**
     * 添加分页插件
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加
        //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType
        return interceptor;
    }
}

1，部门分页

controller层

@RestController
@CrossOrigin //主要用于跨域
@RequestMapping("/dept")
public class DeptController {
    @Resource
    private IDeptService deptService;

    @GetMapping
    public ResponseVo findAll(Integer currPage,Integer pageSize){
        Page pages = new Page(currPage,pageSize);
        Page page= deptService.page(pages);
        return ResponseVo.SUCCESS(page);

    }
}

前端

写一用于分页公共的类PageInfo

@Data
public class PageInfo {
    private  Integer currPage = 1;

    private Integer pageSize = 5;
}

2，员工分页

controller层

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserServiceImpl userService;
    //认证
    @PostMapping
    public ResponseVo loign(@RequestBody User user){
        boolean login = userService.login(user);
        return ResponseVo.SUCCESS(login);
    }
    @GetMapping
    public ResponseVo getAll(PageInfo pageInfo,User user){
        System.out.println("********************"+user.getDid());
        Page pages = new Page(pageInfo.getCurrPage(),pageInfo.getPageSize());
        Page emplist  = userService.findAll(pages);

        return ResponseVo.SUCCESS(emplist);
    }
}

service层接口

Page findAll(Page pages);

service层实现

@Override
    public Page findAll(Page pages) {
        return userMapper.findAll(pages);

    }

mapper层

Page findAll(Page pages);

mapper映射

 
        
        
            
        
    

    
        select * from user,dept where user.did=dept.did
    

前端

路由在index.js里写main下面

六、部门动态查询

前端

let newparam={...this.page,...this.queryparam};合并成一个对象

mapper映射

 
        select * from user,dept
        
            user.did=dept.did
                 
                   and user.did=#{user.did}
                 
        
    

mapper接口

这里@Param可以不写，给User user起一别名，mapper映射防止sql分不清

Page findAll(Page pages,@Param("user") User user);

service层

Page findAll(Page pages,User user);

serviceImpl

@Override
public Page findAll(Page pages,User user) {
    return userMapper.findAll(pages,user);

}

controller

 @GetMapping
    public ResponseVo getAll(PageInfo pageInfo,User user){
        System.out.println("********************"+user.getDid());
        Page pages = new Page(pageInfo.getCurrPage(),pageInfo.getPageSize());
        Page emplist  = userService.findAll(pages,user);
        return ResponseVo.SUCCESS(emplist);
    }