前端请求处理

1.前端登录发起请求

1. 安装 npm install axios

2.在mian.js中导入 axios

import axios from 'axios';

axios.defaults.baseURL="http://127.0.0.1:8080（后端端口）/（后端文件名）/";

3.组装请求数据

this.$http.post("(后端文件名)"，（数据）)

可能出现对象使值无法传输现象，可以通过遍历输出

2.后端接收请求

3.连接数据库

1.创建数据库，创建管理员的表

2.和jdbc连接

导入mysql-connector-java-8.0.16.jar包并解压

输入与数据库的连接处理异常

4.后端响应

1.响应编码与对象

resp.setContentType("text/html;charset=utf-8");

PrintWriter printWriter =resp.getWriter();

一般响应三种东西：状态码、数据、信息

2.接收到dao返回的查询数据

3.进行数据封装，创建了一个类储存数据

4.进行判断

5.异常的处理

5.前端处理

1接收后端响应的数据

2前端路由跳转

3前端存储用户信息

4在main组件中显示用户账号

sessionstStorage中存入数据（在网页结束前存在）

路由跳转this.$router.push("（要跳转的地址）");

6.在前端验证用户是否登录

进行路由导航护卫

//路由导航守卫,每次发生路由跳转时,就会自动的执行此段逻辑
rout.beforeEach((to, from, next) => {
     console.log(to.path)
    if(to.path == '/login') {//如果用户访问的登录页， 直接放行
        return next();//放行,去到to.path
    }else {
        var account =  sessionStorage.getItem("account");//从浏览器中取出用户信息
        if(account == null) {//表示没有登录
            return next("/login");
        } else {//已经登录
            next();
        }
    }
}）

7.web会话跟踪（token）

目的：token的目的是为了减轻服务器的压力，使服务器更加健壮。

因htttp是无状态的，登录成功后客户端与服务器会断开，就会不知道是哪个客户端发送的请求

使用会话跟踪：

1.登录 向后端发送账号和密码

2.后端与数据库连接验证账号密码

3.如果账密正确，在后端生成一个token（唯一的），把token响应给前端

4.在前端储存token

5.每次请求都将token携带向后端

6.后端java对token进行解析

导入commons-codec-1.15jar和Java-jwt-3.8.2.jar

 形成token对象

Base64

base64是指64个编码字符以六个比特位算出一个编号，对应一个字符

8.前端请求拦截

1.在main.js中配置

//axios 请求拦截 每发送一次http请求都会执行此拦截器

axios.interceptors.request.use(config =>{

//为请求头对象，添加 Token 验证的 token 字段

config.headers.adminToken = window.sessionStorage.getItem('adminToken');

return config;

})