手机网站建设免费,鹰潭网站开发,网站建设品牌策划,wordpress4.9博客模板文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.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-string3.1.java… 文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.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-string3.1.javascript压缩之后转为base643.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 axios2.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.总结
在jsvue3python的环境中实现与服务器之间的通信并对过长的字符串采用zip算法进行压缩。
