vue3-环境变量-JavaScript-axio-基础使用-lzstring-字符串压缩-python

news2025/2/28 0:01:29

文章目录

1.Vue3环境变量
- 1.1.简介
- 1.2.全局变量的引用
- 1.3.package.json文件
2.axio
- 2.1.promise
- 2.2.安装
- 2.3.配置
- - 2.3.1.全局 axios 默认值
  - 2.3.2.响应信息格式
- 2.4.Axios的拦截器
- - 2.4.1.请求拦截器
  - 2.4.2.响应拦截器
  - 2.4.3.移除拦截器
  - 2.4.4.自定义实例添加拦截器
3.lz-string
- 3.1.javascript压缩之后转为base64
- 3.2.python压缩之后转为base64
4.总结

1.Vue3环境变量

1.1.简介

在项目的根目录下创建.env文件，在Vue项目的根目录下：
创建一个.env文件，用于存储全局环境变量。
创建一个.env.production文件，用于存储生产环境的配置。
创建一个.env.development文件，用于存储开发环境的配置。
在这里插入图片描述

.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件.
.env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件.

1.2.全局变量的引用

通过cli加载env，配置中名字需要以VUE_APP开头，如：

process.env.变量名

定义:

# 后端接口地址及端口(域名)
VUE_APP_API = "http://127.0.0.1:8000"

使用:

// 创建axios实例对象
const service = axios.create({
  baseURL: process.env.VUE_APP_API,
});

1.3.package.json文件

{
  "name": "ruleVue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint --mode test"
  },
  ...
}

2.axio

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React和VUE等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js。

2.1.promise

异步编程的一种解决方案：

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 (英语意思就是“承诺”，表示其他手段无法改变)
与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

2.2.安装

 npm install axios

2.3.配置

可以设置全局默认配置，是为了避免多种重复配置在不同请求中重复，比如baseURL、timeout等，这里设置baseURL。

2.3.1.全局 axios 默认值

axios.defaults.baseURL = 'https://127.0.0.1:8000';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"""
自定义实例默认值
"""

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://127.0.0.1:8000'
});
 
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置将会按优先级进行合并。它的顺序是：在 lib/defaults.js 中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。

  axios.create({
        baseURL:'', //请求的域名（基本地址）
        timeout:2000, //请求的超时时长，单位毫秒，默认。
        url:'/data.json', //请求路径
        method:'get', //请求方法
        headers:{
            token:''
        }, //设置请求头
        params:{
        },//将请求参数拼接到url上
        data:{
        }, //将请求参数放置到请求体里
    });

2.3.2.响应信息格式

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // `config` 是 `axios` 请求的配置信息
  config: {},
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data); //返回数据
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

2.4.Axios的拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

2.4.1.请求拦截器

请求拦截器用于处理请求，并可以在请求发送之前进行一些操作，例如添加认证头，或者取消请求。

// 添加请求拦截器
/*需要拦截请求的原因
  *   1.config中包含了某些不符合服务器要求的信息
  *   2.发送网络请求的时候需要向用户展示一些加载中的图标
  *   3.网站需要登录才能请求资源，也就是需要token才能请求资源*/
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么-附加token标记
    let user = JSON.parse(window.sessionStorage.getItem('access-user'));
    if (user) {
      token = user.token;
    }
    config.headers.common['token'] ='JWT ' + token;
    return config; //拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
  }, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2.4.2.响应拦截器

响应拦截器用于处理所有请求的响应，并可以在发送响应之前对其进行错误处理或者进行一些操作。例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页等。

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

2.4.3.移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

2.4.4.自定义实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

3.lz-string

在nodejs和python中使用字符串压缩库。

3.1.javascript压缩之后转为base64

在javascript中的lzstring库实现类似功能。

      var LZString = require('lz-string');
      var originalString = "这是一个需要压缩的字符串";
      // 压缩并编码为 Base64 的字符串
      var compressedToBase64String = LZString.compressToBase64(originalString);
      console.log(compressedToBase64String);  // 输出压缩并编码为 Base64 的字符串
      console.log(originalString);  // 输出压缩后的字符串
      // 解码并解压缩 Base64 字符串
      var decompressedFromBase64String = LZString.decompressFromBase64("pvxnozQAcoVHKADpiBkY0cqEp/QIW6HVtQZN6CY5IA==");
      console.log(decompressedFromBase64String);  // 输出解码并解压缩后的字符串，应该与原始字符串相同

3.2.python压缩之后转为base64

在python中的lzstring库实现类似功能。

import lzstring
# 将临时文件数据进行压缩编码
fileData = "这是一个需要压缩的字符串";
lzx = lzstring.LZString();
compressed = lzx.compressToBase64(str(fileData));
print(compressed);
WriteFile(tmpFullFilename1, compressed);