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

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);

4.总结

在js+vue3+python的环境中，实现与服务器之间的通信，并对过长的字符串采用zip算法进行压缩。