前后端请求数据gzip压缩方案

最新推荐文章于 2024-08-19 14:58:02 发布

我好高冷

最新推荐文章于 2024-08-19 14:58:02 发布

阅读量5k

点赞数 1

文章标签： json 前端 javascript java

本文链接：https://blog.csdn.net/qq_36821517/article/details/127118422

版权

本文介绍了前端和后端如何实现数据的gzip压缩和解压。前端使用pako库进行gzip压缩，并通过axios发送base64编码的压缩数据。后端利用hutool工具进行解压操作。在响应处理中，前端接收到数据后同样使用pako进行解压还原。这种方案提高了数据传输效率。

摘要由CSDN通过智能技术生成

前后端请求数据gzip压缩方案

1、前端请求压缩

采用pako工具进行gzip压缩处理

首先引入依赖，在package.json下添加pako依赖

"dependencies": {
    "pako": "^1.0.11"
 }

前端采用axios发送请求，所以在需要请求的接口下进行请求参数的处理

export function save(id, data) {
  return axios({
    url: `/save/${id}`,
    method: "post",
    headers: {'Content-Encoding': 'gzip'},
    data: data,
    transformRequest: [function (data, headers) {
      // 将数据压缩
      const gzip = pako.gzip(encodeURIComponent(JSON.stringify(data)), {to: "string"});
      const base64 = btoa(gzip);
      return base64;
    }],
  });
}

在请求头内添加'Content-Encoding': 'gzip'，同时在请求转换器transformRequest内实现数据压缩，首先使用pako将数据进行gzip压缩，然后转为base64提交到后台保存。

2、前端获取数据并解压

通过压缩数据提交到后台保存后，前端获取该数据为压缩后的数据，需要进行解压操作才可以正常使用，解压方法如下：

export function get(id) {
  return axios({
    url: `/get/${id}`,
    method: "get",
    transformResponse: [function (res) {
      res = JSON.parse(res);
      if (res.code === 200) {
        let strData = atob(res.data)
        let charData = strData.split('').map(function (x) { return x.charCodeAt(0); })
        let binData = new Uint8Array(charData)
        let data = pako.inflate(binData)

        strData = ''
        let chunk = 8 * 1024;
        let i;
        for (i = 0; i < data.length / chunk; i++) {
          strData += String.fromCharCode.apply(null, data.slice(i * chunk, (i + 1) * chunk));
        }
        strData += String.fromCharCode.apply(null, data.slice(i * chunk));

        // 解压后数据
        res.data = decodeURIComponent(strData);
      }
      return res;
    }],
  });
}

3、后台获取数据并解压

通常后台从数据库内获取到数据进行操作，这个时候也需要进行解压操作，通过hutool的工具来进行解压

首先引入依赖，在pom.xml文件内添加hutool依赖

<!-- hutool工具类库 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.7.21</version>
</dependency>

解压代码如下：

String base64 = this.getData(id);
// base64解码
byte[] gzip = Base64.decode(base64);
// gzip解压
String unGzip = ZipUtil.unGzip(gzip, "UTF-8");
// uri解码
String data = URLUtil.decode(unGzip, "UTF-8");