javaEE知识点记录

发布于：2024-04-19 ⋅ 阅读:(21) ⋅ 点赞:(0)

一、过滤器

        在JavaEE中，过滤器（Filter）是一种用于在Web应用程序中对请求和响应进行预处理和后处理的组件。它可以对进入或离开应用程序的请求/响应进行拦截和修改。

        过滤器主要用于以下几个方面：

  1. 认证和授权：可以使用过滤器来验证用户的身份并授予访问权限。通过拦截请求，在进入应用程序之前检查用户的凭证，从而实现安全访问控制。

  2. 日志记录和统计：通过使用过滤器，可以记录和统计应用程序中的请求和响应信息。可以记录请求的URL、参数、响应时间等，从而进行性能监控和问题排查。

  3. 数据压缩和加密：过滤器可以对请求和响应进行压缩和加密，以减少网络传输的数据量和提高传输安全性。

  4. 请求转发和重定向：可以使用过滤器来检查请求并决定是否重定向或转发请求到其他资源，实现请求的转发和重定向。

       在JavaEE中，过滤器是通过实现javax.servlet.Filter接口来创建的。过滤器可以配置在web.xml文件中，也可以使用注解来配置。过滤器可以通过过滤器链（Filter Chain）按照顺序依次执行，也可以使用过滤器映射（Filter Mapping）指定过滤器的作用范围。

       过滤器在Web开发中非常重要，它可以实现对请求和响应的统一处理和拦截，提高应用程序的安全性和性能。使用过滤器可以将公共的逻辑抽象出来，减少代码的冗余，并且可以灵活地配置和管理过滤器的行为。

这里展示两种常用的过滤器：

1.跨域过滤器

        后端解决浏览器跨域问题。

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

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);//让请求和响应通向下一个过滤器
    }
}

2.编码过滤器

        解决编码问题。

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

public class EncodingFilter implements Filter{

    String encod;
    String respencod;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        //初始化获取参数信息
//                <init-param>
//            <param-name>encod</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>
           encod =  filterConfig.getInitParameter("encod");
           respencod =  filterConfig.getInitParameter("respencod");
    }

    /*
           用来执行过滤操作
         */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
           System.out.println("编码过滤器");
          servletRequest.setCharacterEncoding(encod);//设置请求解码格式
          servletResponse.setContentType(respencod);//设置响应体内容格式
          filterChain.doFilter(servletRequest,servletResponse);//让请求离开过滤器,继续向后执行,后一个可能是下一个过滤器,也可能是servlet
    }
}

二、跨域问题

        跨域问题（Cross-Origin Resource Sharing，简称CORS）是指在浏览器中，通过XMLHttpRequest或Fetch API等方式发送Ajax请求时，只能从同源网站（协议、域名、端口号相同）发送请求，而不能向其他域名或端口发送请求。

       跨域问题是由浏览器的同源策略（Same-Origin Policy）导致的。同源策略限制了一个网页中加载的资源只能来自同一域名下，这是为了保护用户的安全和隐私。如果浏览器没有同源策略，那么恶意的网站可以通过跨域请求获取到其他网站上的敏感信息。

跨域问题可以分为以下几种情况：

  1. 域名不同：当请求的URL中的域名部分与当前页面的域名不同，例如从www.example.com发送请求到api.example.com，就会触发跨域问题。

  2. 协议不同：当请求的URL的协议部分与当前页面的协议不同，例如从http://example.com发送请求到https://example.com，也会触发跨域问题。

  3. 端口号不同：当请求的URL的端口号与当前页面的端口号不同，例如从http://example.com:8080发送请求到http://example.com:8888，同样会触发跨域问题。

上述的跨域过滤器就可以解决跨域问题。

三、异步发送请求

1.原生发送

（1）使用XMLHttpRequest对象

post请求：

var xhr = new XMLHttpRequest();
xhr.open('POST', '服务器地址', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    console.error('Request failed with status: ' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

var data = {
  key1: 'value1',
  key2: 'value2'
};

xhr.send(JSON.stringify(data));

get请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', '服务器地址', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    console.error('Request failed with status: ' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

（2）使用Fetch API发送

get请求：

fetch('服务器地址')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

post请求：

fetch('服务器地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error);
});

2.axios发送

        axios是现在应用最多的前后端异步交互方式，适用与原生和vue，其官方文档十分详细，官网链接如下：Axios中文文档 | Axios中文网 (axios-http.cn)

        这里对其使用进行简单演示：

（1）get请求：

// 引入Axios
import axios from 'axios';

// Vue组件中的示例代码
export default {
  data() {
    return {
      responseData: null
    };
  },
  methods: {
    fetchData() {
      axios.get('服务器地址')
        .then(response => {
          this.responseData = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
}

（2）post请求：

// 引入Axios
import axios from 'axios';

// Vue组件中的示例代码
export default {
  data() {
    return {
      postData: {
        key1: 'value1',
        key2: 'value2'
      }
    };
  },
  methods: {
    sendData() {
      axios.post('服务器地址', this.postData)
        .then(response => {
          console.log('Post request successful:', response.data);
        })
        .catch(error => {
          console.error('Error sending data:', error);
        });
    }
  }
}

        除了直接引入外，还可以将axios全局引入：

创建一个名为axios.js的文件，并在其中配置Axios：

// axios.js 
import axios from 'axios'; 
const instance = axios.create({ 
    baseURL: '服务器地址', // 设置基础URL 
    timeout: 5000, // 设置超时时间 
    headers: { 'Content-Type': 'application/json' } 
}); 
export default instance;

在上面的代码中，我们创建了一个名为instance的Axios实例，并配置了基础URL、超时时间和请求头。您可以根据需要进行自定义配置。

在Vue项目的入口文件（通常是main.js）中引入并挂载Axios实例：

// main.js 
import Vue from 'vue'; 
import App from './App.vue'; 
import axios from './axios'; // 引入axios.js文件 
Vue.prototype.$http = axios; // 将Axios实例挂载到Vue原型上 
new Vue({ 
    render: h => h(App),
}).$mount('#app');

通过以上步骤，在整个Vue应用程序中都可以通过this.$http来访问Axios实例，从而发送HTTP请求。例如，在Vue组件中可以这样使用：

this.$http.get('servlet路径') .then(response => { 
    console.log(response.data);
 }).catch(error => { 
    console.error('Error:', error); 
});

四、json文件

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输和存储。它以简洁、易读的方式表示数据结构，具有良好的可扩展性和跨平台兼容性。

JSON文件是使用JSON格式编写的文件，通常以".json"为文件扩展名。它的内容是一个由键值对组成的数据结构，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或null。

JSON文件的特点包括：

  1. 简洁易读：JSON采用类似于JavaScript对象的语法，使数据结构的表达方式简洁明了，易于阅读和理解。

  2. 可扩展性：JSON文件允许嵌套复杂的数据结构，可以表示多层次的对象和数组，以满足不同的数据需求。

  3. 跨平台兼容性：JSON是一种通用的数据格式，几乎所有现代编程语言都支持解析和生成JSON数据，使得在不同平台之间进行数据交换和共享变得更加容易。

JSON文件通常用于以下方面：

  1. 网络数据传输：前后端之间通过JSON格式进行数据交互，例如使用Ajax请求获取服务器返回的JSON数据。

  2. 配置文件：应用程序可以使用JSON文件来存储和读取配置信息，例如数据库连接信息、API密钥等。

  3. 数据存储：将数据以JSON格式存储到文件或数据库中，以便后续读取和处理。

在使用JSON文件时，可以使用各种编程语言提供的JSON解析库或内置函数来读取和解析JSON数据，并对数据进行操作和处理。

总而言之，JSON文件是一种常用的数据交换格式，具有简洁易读、可扩展和跨平台兼容等特点，方便在不同平台和应用程序之间进行数据的传输和存储。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布