过滤器、同步异步、跨域问题、json数据格式字符串

1、过滤器

过滤器是将JavaEE中对请求和响应进行拦截的技术，定义一个类实现Filter接口，可以让某些请求地址在到达servlet之前进入到指定的过滤器中从而实现统一管理，例如编码过滤，权限过滤等进行统一过滤。

下面是一个编码过滤的示例

复制代码

package com.ffyc.dormserver.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;


@WebFilter(urlPatterns = "/*")
public class EncodingFilter implements Filter {

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

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        //设置请求编码集
        servletRequest.setCharacterEncoding("utf-8");
        //设置响应编码集
        servletResponse.setContentType("text/html;charset=utf-8");
        //让请求离开过滤器，继续向下执行，下一个可能是过滤器，也可能是目标访问的servlet
        filterChain.doFilter(servletRequest,servletResponse);

    }

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

2、同步、异步概念

同步：同时只能做一件事

同步请求：当前端向后端发送请求时，此时客户端一切操作都会终止，服务器响应回来的内容会覆盖当前网页中的内容，一次只能做一件事，与服务器交互其他事情就不能做了

异步：同时做多件事情

异步请求：当客户端与服务器交互式，不影响客户端页面的其他操作，同时做俩件事情服务器响应回来的内容不会覆盖整个页面

3、如何发送异步请求

1、原始方式：在前端使用一个js对象，XMLhttpRequest 发送请求，接受响应

复制代码

//异步请求方式 1、原始方式
				 var httpobj=new XMLHttpRequest();
				httpobj.open("get","http://127.0.0.1:8088/domServer/checkaccount="+account);
				httpobj.send(null); //发送请求
				
				//2、执行回调函数，接受响应的结果
				 httpobj.onreadystatechange=function(){
					document.getElementById("msg").innerHTML = httpobj.responseText;//后端响应的内容
				}

2、异步框架 axios框架

安装axios：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 安装路径

安装到桌面，复制到项目js中，导入html中进行使用

复制代码

// 2、axios请求框架 get请求调用get方法 post请求调用post方法
				axios.get("http://127.0.0.1:8088/domServer/check?account="+account).then(function(resp){
					console.log(resp);
					if(resp.status==200){
						document.getElementById("msg").innerHTML = resp.data;//后端响应的内容
					}
				})

在vue项目中axios框架

axios是一个HTTP的网络请求库，打开终端进行安装 npm install axios

在main.js中配置axios，导入axios import axios from 'axios';

设置访问后台服务器地址：axios.defaults.baseURL="http://127.0.0.1:9999/api/";

9999是服务器端口号，api是后端服务器项目名称，可以根据自己情况进行修改

将axios挂载到vue全局对象中，使用this可以直接访问 Vue.prototype.$http=axios;

$http是给axios起的别名，方便后面使用

使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息

基本语法：

this. $http.get(地址?Key=value\&key2=val1).then(function(response){ }） this.$ http.post("login",{key:"value",key2:"val2"}).then(function(response){ }）

异步请求出现跨域问题

4、前后端异步交互时出现跨域问题

1、跨域问题：不同服务器间进行访问，浏览器不允许js接收来自其他的服务器响应的数据，只要协议，域名，端口，任何一个不同，都属于跨域访问。

2、为什么要跨域访问

前后端分离（前端和后端各自在不同的服务中）同一家公司不同项目要交互

3、浏览器为什么要阻止跨域访问

为了安全，不能让其他服务器的内容肆意的响应到自己的服务中

4、如何解决跨域问题：前端解决、后端解决

后端解决：在响应时，告知浏览器允许来自某些指定服务响应的内容。（下面是详细代码）

复制代码

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


//后端向前端响应时，告诉前端，本次响应是安全的
@WebFilter(urlPatterns = "/*")
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);
    }
}

5、json数据格式的字符串

是一种同用的数据格式，java和js都认识，是现在前后端交互的一种标配使用方式

{属性:值,属性:值...}

使用前要进行要在pom.xml进行配置

复制代码

 <!--jackson-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.2</version>
        </dependency>

 /*
        不同语言之间进行数据交换
        json :javaScript object notation js对象表现形式
        "{key:value,key:name}"  "{id:10,name:"张三"}"
        在后端将Java对象转为json格式的字符串
        有很多的第三方组件，可以直接将Java对象转为json格式的字符串
         */
        Student student=new Student(1,name,"男","133333333");

        String str=new ObjectMapper().writeValueAsString(student);