第一次项目搭建笔记&路由导航守卫&web前后端会话跟踪

1.重新搭建后端项目

在IDEA中重新创建一个JavaEE项目,记得勾选Web profile

之后在java文件中重新搭建分级的文件夹

按照标准创建com.xxxx.dorm文件夹并创建dao(数据处理),filter(过滤器),model(模型),util(工具),web(服务端)等文件夹进行不同功能部分的分类

搭建完基本的框架后一步步根据需求丰富功能即可,记得要把servlet和过滤器进行注册,一般会固定的设置基础的编码过滤器和跨域过滤器

编码过滤器和跨域过滤器

public class CorsFilter implements Filter {
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
        //允许携带Cookie时不能设置为* 否则前端报错
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie

        filterChain.doFilter(servletRequest, servletResponse);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class EncodingFilter implements Filter {

    String reqencod = "";
    String respencod = "";

    /*
    * 初始化过滤*/
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("初始化过滤器");
        reqencod = filterConfig.getInitParameter("reqencod");
        respencod = filterConfig.getInitParameter("respencod");
        System.out.println(reqencod);
        System.out.println(respencod);
    }

    @Override
    public void destroy() {
        System.out.println("销毁过滤器");
    }

    /*
    * 执行过滤操作的方法*/
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        //设置请求字符集
        servletRequest.setCharacterEncoding(reqencod);
        //设置相应字符集
        servletResponse.setContentType(respencod);
        //让请求离开过滤器继续向下执行,下一个可能是过滤器,也可能是目标servlet
        filterChain.doFilter(servletRequest, servletResponse);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在web.xml中注册过滤器和服务器

<!--    注册登录servlet-->
    <servlet>
        <servlet-name>login</servlet-name>
        <servlet-class>com.george.dorm.web.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>login</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>
    
    
<!--    编码过滤器-->
    <filter>
        <filter-name>encodFilter</filter-name>
        <filter-class>com.george.dorm.fillter.EncodingFilter</filter-class>
        <init-param>
            <param-name>reqencod</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <init-param>
            <param-name>respencod</param-name>
            <param-value>text/html;charset=utf-8</param-value>
        </init-param>
    </filter>
<!--    编码过滤器映射-->
    <filter-mapping>
        <filter-name>encodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
<!--    跨域过滤器-->
    <filter>
        <filter-name>corsFilter</filter-name>
        <filter-class>com.george.dorm.fillter.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>corsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>xm'l
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

之后要在Tomcat中部署项目

2.运行前端项目

前端在之前已经提前搭建好了,只需要在原有的基础上进行微调即可

3.登录向后端发送请求

使用axios发送异步请求

首先需要在vue项目中安装axios
1
2
3

安装axios

安装axios需要在此vue项目的终端中输入

npm install axios
1

如果没有配置镜像文件可能会下载的很慢甚至不下载,所以此时需要配置npm的镜像文件

国内的npm镜像源有以下几种:

npm 官方原始镜像网址是：https://registry.npmjs.org/
淘宝 NPM 镜像：http://registry.npmmirror.com
阿里云 NPM 镜像：https://npm.aliyun.com
腾讯云 NPM 镜像：https://mirrors.cloud.tencent.com/npm/
华为云 NPM 镜像：https://mirrors.huaweicloud.com/repository/npm/
网易 NPM 镜像：https://mirrors.163.com/npm/
1
2
3
4
5
6

如何使用镜像源:

想要使用哪个镜像就通过 npm config set registry + 对应的镜像网址就好了

以华为云为例:

npm config set registry https://mirrors.huaweicloud.com/repository/npm/
1

安装好后检查当前的镜像源是否切换

npm config get registry
1

出现如图的结果则证明镜像源切换完毕

之后再通过npm install axios就可以很快速的下载好axios了

下载好之后在main.js中导入axios

// 导入axios
import axios from 'axios';
//定义后端基本地址   后续发送请求时,只需要写servlet地址即可,会自动将这部分拼接过去
axios.defaults.baseURL="http://192.168.124.26:8899/dorm/"
//将axios挂载到vue对象中
Vue.prototype.$http=axios;
1
2
3
4
5
6

4.后端创建搭建LoginServlet

接收请求数据

调用其他程序处理(jdbc)

向前端做出响应

5.前端接收响应,根据响应做出处理

在浏览器存储当前登录的管理员信息

跳转到main组件

取出并展示管理员信息

安全退出,清除浏览器中的管理员信息,跳转到登录组件

6.前端添加一个路由导航守卫

//配置路由导航守卫, 每当进行一次组件路由时,自动执行此段代码
rout.beforeEach((to,from,next)=>{
	if(to.path=='/login'){ //to.path 访问的路由地址
     	return next();//继续正常访问目标地址
	}else{
		var account = sessionStorage.getItem("account");//获取到浏览器中存储的管理员信息
		if(account==null){ //如果信息为空,说明没有登录
		  return next("/login");
		}else{//说明已经登录,可以正常访问
		  return next();
		}
	 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

7.web前后端之间的会话跟踪

当我们登录成功后,在管理系统中继续其他操作(例如查询自己的成绩)

当我们的请求发送到后端后,后端程序默认不知道本次请求是谁发送的

因为http请求是无状态的,不携带用户信息的,当用户登录成功后.此后再次与服务器交互时,服务器并不知道是哪个用户发送的请求,在web开发中必须解决此问题(之后的请求,还需要让后端知道是哪个账号发送的请求)

具体实现

1,在登录成功后,在后端为用户生成一个成为token的字符串(token令牌)

使用jwt为管理员生成token字符串,可以携带管理员信息,并且可以加密存储

JWT生成的token有三部分

1,声明:生成类型,加密算法

2,载荷:管理员信息(id,账号,头像)

3,签证:结合前两部分,密钥,加密生成的(最重要的)

2.浏览器中储存token

储存的token用于实时验证身份,在不同的操作中都需要验证

3.之后的请求把token携带一起发向后端

axios请求拦截器

把后端验证token的代码提取到一个过滤器中(登录不能进入过滤器)

可以将过滤器的范围设置为某个目录下的所有地址,只需要将login以外的所有地址都放在这个地址之下就可以实现除login之外所有操作均验证token,在过滤器中将token验证失败的情况设置成一种result,错误码设置为401,axios响应拦截器,对错误码为401的情况进行拦截响应

axios响应拦截器

拦截后端响应 把500 401状态码统一拦截

// 添加响应拦截器
axios.interceptors.response.use((resp) =>{//正常响应拦截
if(resp.data.code==500){
ElementUI.Message({message:resp.data.message,type:"error"})
}
if(resp.data==401){
router.replace("/login");
}
return resp;
});
1
2
3
4
5
6
7
8
9
10