路由守卫&拦截器

一、路由守卫

1、登录

登录之后 跳转到 main 页面

在之前我们用 session.getAttribute(" ")

现在实现前后端分离

前端 Vue 后端SpringBoot

前后端分离之后，后端是无法直接控制前端的

没有登陆 跳转到 登录 页面

2、写一个实体类

package com.aaa.util;
import lombok.AllArgsConstructor; 
import lombok.Data; 
import lombok.NoArgsConstructor;
@Data 
@AllArgsConstructor //全参构造 
@NoArgsConstructor //无参构造 
public class ResponseVo<T> {
 /** 
* code /private Integer code = 200;/*
 * msg /private String msg = "操作成功";/*
 * data */
private T data; 
public ResponseVo (T data){ 
this.data=data;
 } 
/**
 * 成功 
* @param data
 * @return
 * @param <T> */
public static<T> ResponseVo SUCCESS(T data){ 
return new ResponseVo(data);
 } 
/** 
* 失败
 * @param data
 * @return
 * @param <T> */ 
public static<T> ResponseVo FAIL(T data){ 
return new ResponseVo(500,"操作失败",data); 
}
 }

3、controller层

package com.aaa.controller;
import com.aaa.entity.User;
import com.aaa.service.IUserService;
import com.aaa.util.ResponseVo;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
/**
<p>
用户信息表 前端控制器
</p>

@author gkf
@since 2024-01-06
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private IUserService userService;
//认证
@PostMapping
public ResponseVo login(@RequestBody User user){
  System.out.println(user);
 boolean login = userService.login(user);
 return ResponseVo.SUCCESS(login);
}
}

4、service层

package com.aaa.service;
import com.aaa.entity.User;
import com.baomidou.mybatisplus.extension.service.IService;
/**
<p>
用户信息表 服务类
</p>

@author gkf
@since 2024-01-06
*/
public interface IUserService extends IService<User> {
boolean login(User user);
}

5、serviceImpl层

package com.aaa.service.impl;
import com.aaa.entity.User;
import com.aaa.mapper.UserMapper;
import com.aaa.service.IUserService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
/**
<p>
用户信息表 服务实现类
</p>

@author gkf
@since 2024-01-06
*/
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
@Override
public boolean login(User user) {
//根据账号和密码，去数据库中查询是否存在用户 存在 true   不存在 false
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("loginname",user.getLoginname());
queryWrapper.eq("password",user.getPassword());
//select * from user where loginname=? and password=?
User one= this.getOne(queryWrapper);
return one == null?false : true;
}
}

6、前端页面

二、本地储存localStorage

1、标识

如果不添加标识，依旧可以从这个路径直接进入

http://localhost:8686/

2、临时存储

sessionStorage （临时存储）为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

3、长期存储

与seccsionStorage 一样， 但是浏览器关闭后，数据依然会一直存在，注意

seccsionStoage和localStorage 的用法基本一直，引用类型的值要转换成JSON

也可转换成JSON字符串

 methods: {
submitForm(formName) {
this.$axios.post("user",{loginname:this.ruleForm.loginName,password:this.ruleForm.password}).then(res=>{
/*
用户名和密码
如果成功
跳转main
路由 更改 path
*/
if (res.data.data==true){
//标识
//存放用户名字
localStorage.setItem("user",this.ruleForm.loginName)
//ruleForm 转换成json字符串
// localStorage.setItem("userInfo",JSON.stringify(this.ruleForm))
this.$router.push("/main");
}
})
}
},

路由守卫：

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

三、拦截器

请求拦截器

四、分页

1、逻辑分页

所有的数据全部查出来，放到内存中

2、物理分页

在数据库中进行分页查询

判断是否有条件进行分页查询