✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本

 api.js

//封装ajax方法
import $g from "../sg";//vue项目使用
import $ from 'jquery';//(提示:原生开发页面请前往https://jquery.com下载最新版jQuery)
import { Message } from "element-ui";//element项目使用
// import axios from "axios";// 不同环境的api配置项________________________________________________________________________________
let APIs = [{ label: '师大外网服务器', origins: ['mzjyzyk.ynnu.edu.cn'], API_ROOT_URL: `https://mzjyzyk.ynnu.edu.cn/api`, isProduct: true, },{ label: '师大内网服务器', origins: ['10.10.4.87'], API_ROOT_URL: `http://10.10.4.87:30107/api`, },{ label: '维度云线上测试服务器运行', origins: ['wedoyun.cn'], API_ROOT_URL: `//sr.wedoyun.cn:82/api`, },{label: '本地个人开发环境', origins: ["localhost", "127.0.0.1", "192.168.", "172.20.", "0.0.0.0",], isLocal: true,API_ROOT_URL: "//192.168.1.108:9088/sr", //鲁宝键的IP// API_ROOT_URL = "//192.168.7.95:9088/sr", //无忌的IPAPI_ROOT_URL: "//sr.wedoyun.cn:82/api", //测试服务器的IP},
];
let API = APIs.find(({ origins }) => origins.some(v => location.href.includes(v))) || APIs[0];
let API_ROOT_URL = API.API_ROOT_URL;//一些前提条件和方法________________________________________________________________________________
localStorage.sgAPI && (API_ROOT_URL = localStorage.sgAPI);//如果localStorage.sgAPI存在,优先用这个前缀路径接口访问所有接口
//跳转到登录页面
let jumpLoginPage = ({ url, } = {}) => {url && console.log(`导致跳转到登录页面的接口路径`, url);$g.cookie.clearAll();//清空所有缓存(需要引入sg.js)Object.keys(localStorage).forEach(k => delete localStorage[k]);//清空对象键、值location.hash.includes('/login') || location.replace(`${$g.getWebURLBeforeHash()}#/login?url=${encodeURIComponent(location.href)}`);
}
// 普通报错提示
let sgAlert = (d = `很抱歉,服务太火爆了,请您稍后再试!`) => Message ? Message({ message: d, dangerouslyUseHTMLString: true, showClose: true, }) : alert(d.replace(/\<br\>/g, `\n\r`));
// 接口报错提示
let errAlert = (url, d) => sgAlert(`💡可能是后端报错:<br>接口地址👉${url}<br>返回报文👉${JSON.stringify(d, null, 4)}`);
// 本地接口提示
$g.getUrlParam('isLocal') && (API.isLocal = true);//手动添加开发者开发模式
API.isLocal && sgAlert(`温馨提示:当前处于开发模式,接口访问地址为<b  style="color: #67C23A;" >${API_ROOT_URL}</b>`);//主体请求________________________________________________________________________________
export default {// 共享变量、方法share: {// 一些共享出去的变量$g,isLocal: API.isLocal,//是否本地环境isProduct: API.isProduct,//是否生产环境API_ROOT_URL,//接口根路径imgPrePath: `${API_ROOT_URL}/`,//图片前缀// 一些共享出去的方法jumpLoginPage,},//API FUNCTION ________________________________________________________________________________do(url, data, r, otherConfig = {}) {if (!r) return sgAlert(`注意检查接口${url}的传参“r”是否写成了“doing”`);// delete (data || {}).sgLog;//清除调试状态下的接口标记说明字段let type = otherConfig.type;//请求方式,默认POSTtype || (type = 'POST');//noToken=true代表该接口无需保持登录状态就可以获取信息,譬如一些公共对外开放的接口let token = localStorage.token; //获取tokenif (!otherConfig.noToken) {//判断如果本地没有token,否者直接跳转到登录页面if (!token) return jumpLoginPage({ url });}// 建议:一般情况就不要设置headers了,ajax会根据data结构自动判断类型let headers = {// withCredentials: true ,// 这里可以设置withCredentials// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//FormData方式提交数据// 'Content-Type': 'application/json;charset=UTF-8',//报跨域错误...otherConfig.headers,};//判断是否需要令牌字符串if (!otherConfig.noToken) {token && (headers["kkToken"] || (headers["kkToken"] = token));data || (data = {});}// 判断是否为下载接口,防止下载导出文件乱码let xhrFields = otherConfig.isDownload ? { xhrFields: { responseType: "arraybuffer" } } : null;// 判断是否为上传接口let contentType = {};if (otherConfig.isUpload) {/*
【警告!千万不要设置请求头格式!!! 用<form>表单上传的时候, 请求自动会设置为multipart/form-data; boundary=----WebKitFormBoundary****************】 
如果是用的ajax请求上传File文件必须设置最外层contentType:false,且删除headers中的“Content-Type”,
否则就会导致提示跨域或传参格式没有序列化变成类似:
------WebKitFormBoundaryxWRglNw6MXxmBjr2
Content-Disposition: form-data; name: "字段名1"
EBE29C03DA9E4FB4A050F4D820A834BC
------WebKitFormBoundaryxWRglNw6MXxmBjr2
Content-Disposition: form-data; name="字段名2"
这样的格式。
ajax正确参数如下:
$.ajax({
...headers:{不要有“Content-Type”},processData:false,//必须是falsecontentType:false,//必须是false
...
})*/data = $g.convertObejct2FormData(data);//转换为multipart/form-data数据格式contentType = { contentType: false };//如果不设置就会导致提示跨域或传参格式没有序列化变成类似 ------WebKitFormBoundary... 的分隔请求体}// 序列化设置(是否将数据转换为查询字符串的形式发送给服务器,默认情况下,processData的值为true)let processData = true;(data instanceof FormData) && (processData = false);(typeof otherConfig.processData !== 'undefined') && (processData = otherConfig.processData);// 精简别名r.s && (r.success = r.s); //响应请求成功r.f && (r.fail = r.f); //响应请求失败r.e && (r.error = r.e); //响应请求报错r.l && (r.loading = r.l, r.loading.show && r.loading.show()); //加载$.ajax({timeout: 24 * 60 * 60 * 1000, //设置默认超时时间24小时type,url: otherConfig.isCompleteURL ? url : `${API_ROOT_URL}${url}`,//使用完整接口路径data,//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。headers,//请求头...xhrFields,//设置XMLHttpRequest对象的属性...contentType,//默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。processData,//默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。beforeSend: xhr => {/* 发送请求前运行的函数。发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。*/},success: d => {if (url.toLocaleLowerCase().includes(`download`) && !otherConfig.hasOwnProperty('isDownload') && typeof d === 'string') return sgAlert(`注意检查接口${url}的“otherConfig”参数是否加入了“isDownload:true”配置"`);if (!otherConfig.isDownload && typeof d === 'string') return sgAlert(`请联系后端开发人员给接口${url}添加@RequestMapping(value=...produces="application/json)"`);// typeof d === 'string' && (d = JSON.parse(d));//如果是字符串返回值,则转换为JSON格式(如果用这句话就会纵容后端开发,导致以后复杂的返回报文也用字符串,会有问题!)r.loading && r.loading.close && r.loading.close(); //关闭加载if (otherConfig.isDownload) return r.success(d); //如果是下载,直接返回文档流switch (d.success) {case true: //登录成功r.success && r.success((otherConfig.isGetAllData || d.hasOwnProperty('totalCount')) ? d : (d.hasOwnProperty('data') ? d.data : d));break;case false: //登录失败(当token密码失效的时候)r.fail ? r.fail(d) : sgAlert(d.msg);break;}switch (d.code) {case 403: //登录失败(当token密码失效的时候)case 404: //登录失败(当token密码失效的时候)jumpLoginPage(); r.fail ? r.fail(d) : sgAlert(d.msg);break;case -2: //扫码失败case -1: //请求失败r.fail ? r.fail(d) : sgAlert(d.msg);break;}},error: d => {//请求报错if (d.status == 403) { jumpLoginPage(); return r.error ? r.error(d) : sgAlert(JSON.parse(d.responseText).msg); }r.loading && r.loading.close && r.loading.close(); //关闭加载r.error ? r.error(d) : errAlert(url, d);// console.log("【报错】" + JSON.stringify(d, null, 4),d);},complete: (xhr, status) => {//请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。}});},
}

sd.js

//公共接口定义2024.11.22----------------------------------------
import $api from "./api";
import $g from "./sg";//vue项目使用
export default {...$api.share,//【通用接口demo】________________________________________________________________________________API_NAME({ data, r, config }) { $api.do(`${API_ROOT_URL}/xxx/xxx/xxx`, data, r, config); },//提交用例________________________________________get({ r }) { $api.do(`${API_ROOT_URL}/get.do`, null, r, { isGetAllData: true, type:`get`, }); },post({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r); },login({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r, { noToken: true }); },download({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r, { isDownload: true }); },}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

理解折半查找法

理解折半查找法&#xff1a;高效的查找算法 折半查找法&#xff08;又称二分查找法&#xff09;是一种高效的查找算法&#xff0c;用于查找一个已排序数组中的目标元素。与线性查找方法不同&#xff0c;折半查找每次都将搜索范围减半&#xff0c;从而大幅提升查找效率。本文将详…

解决前端页面报错:Not allowed to load local resource

在前后端分离项目中&#xff0c;在前端页面里使用file://的绝对路径访问本地图片&#xff0c;在加载图片的 时候会报出Not allowed to load local resource 的错误。 这是因为浏览器出于安全因素&#xff0c;禁止通过绝对路径访问图片&#xff0c;需要通过虚拟路径进行访问。 …

VM虚拟机装MAC后无法联网,如何解决?

✨在vm虚拟机上&#xff0c;给虚拟机MacOS设置网络适配器。选择NAT模式用于共享主机的IP地址 ✨在MacOS设置中设置网络 以太网 使用DHCP ✨回到本地电脑上&#xff0c;打开 服务&#xff0c;找到VMware DHCP和VMware NAT&#xff0c;把这两个服务打开&#xff0c;专一般问题就…

力扣 LeetCode 236. 二叉树的最近公共祖先(Day10:二叉树)

解题思路&#xff1a; 后序遍历 注意&#xff1a; p和q其中一个就是它们的公共祖先的情况也考虑到了&#xff0c;假设q是公共祖先&#xff0c;遇到q就直接返回&#xff0c;相当于是下面一边为空&#xff0c;一边不为空的情况&#xff0c;返回不为空就一边即可 class Solutio…

前端速通(HTML)

1. HTML HTML基础&#xff1a; 什么是HTML&#xff1f; 超文本&#xff1a; "超文本"是指通过链接连接不同网页或资源的能力。HTML支持通过<a>标签创建超链接&#xff0c;方便用户从一个页面跳转到另一个页面。 标记语言&#xff1a; HTML使用一组预定义的标签…

python语言基础-5 进阶语法-5.4 正则表达式

声明&#xff1a;本内容非盈利性质&#xff0c;也不支持任何组织或个人将其用作盈利用途。本内容来源于参考书或网站&#xff0c;会尽量附上原文链接&#xff0c;并鼓励大家看原文。侵删。 5.4 正则表达式 5.4.1 正则表达式 正则表达式的概念&#xff1a; 正则表达式是用来…

论文阅读——Performance Evaluation of Passive Tag to Tag Communications(一)

文章目录 摘要一、互耦对监听器标签输入阻抗的影响A. 无限细偶极子互阻抗的理论研究B. 电细偶极子的情况&#xff1a;理论与模拟C. 印刷偶极子的情况&#xff1a;电磁模拟与测量 二、T2T 通信系统的性能评估总结 论文来源&#xff1a;https://ieeexplore.ieee.org/document/970…

Palo Alto Networks PAN-OS身份认证绕过漏洞复现(CVE-2024-0012)

0x01 产品描述: PAN-OS 是运行 Palo Alto Networks 下一代防火墙的软件。通过利用 PAN-OS 本机内置的关键技术(App-ID、Content-ID、设备 ID 和用户 ID),可以在任何时间、任何地点完全了解和控制所有用户和设备中正在使用的应用程序。0x02 漏洞描述: PAN-OS 设备管理 Web …

使用ENSP实现静态路由

一、双路由器静态路由 1.项目拓扑 2.项目实现 (1)路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为1.1.1.1/24 ip address 1.1.1.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为192.168.1.1/24 ip ad…

版本控制和idea简体中文教程

版本控制是一种管理软件开发过程中代码变更的技术。它允许多个开发者协作编辑同一个项目&#xff0c;同时跟踪每个变更的历史记录&#xff0c;以便在需要时恢复到之前的版本。版本控制系统&#xff08;Version Control System, VCS&#xff09;是实现版本控制的具体工具。 16.…

自制游戏:监狱逃亡

第一个游戏&#xff0c;不喜勿喷&#xff1a; #include<bits/stdc.h> #include<windows.h> using namespace std; int xz; int ruond_1(int n){if(xz1){printf("撬开了&#xff0c;但站在你面前的是俄罗斯内务部特种部队的奥摩大帝&#xff0c;你被九把加特…

Claude3.5-Sonnet和GPT-4o怎么选(附使用链接)

随着人工智能模型的不断进化&#xff0c;传统的评估标准已经逐渐变得陈旧和不再适用。以经典的“喝水测试”为例&#xff0c;过去广泛应用于检测模型能力&#xff0c;但现如今即便是国内的一些先进模型&#xff0c;也能够轻松答对这些简单的问题。因此&#xff0c;我们亟需引入…

uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

uniappvue3ts H5端使用Quill富文本插件以及解决上传图片反显的问题 1.在项目中安装Quill npm i quill1.3.72.需要显示富文本的页面完整代码 <template><view><div ref"quillEditor" style"height: 65vh"></div></view> &…

QML —— 3种等待指示控件(附源码)

效果如下 说明 BusyIndicator应用于指示在加载内容或UI被阻止等待资源可用时的活动。BusyIndicator类似于一个不确定的ProgressBar。两者都可以用来指示背景活动。主要区别在于视觉效果,ProgressBar还可以显示具体的进度(当可以确定时)。由于视觉差异,繁忙指示器和不确定的…

数字后端零基础入门系列 | Innovus零基础LAB学习Day11(Function ECO流程)

###LAB 20 Engineering Change Orders (ECO) 这个章节的学习目标是学习数字IC后端实现innovus中的一种做function eco的flow。对于初学者&#xff0c;如果前面的lab还没掌握好的&#xff0c;可以直接跳过这节内容。有时间的同学&#xff0c;可以熟悉掌握下这个flow。 数字后端…

Swift从0开始学习 协议和扩展 day5

协议:定义行为的契约 协议类似于其他语言中的接口。它们定义了一组方法、属性或其他需求,供结构体、类、枚举等类型去遵循和实现。协议并不实现这些需求,而是作为一种约定或合同,确保实现协议的类型会遵循特定的行为。 协议的定义和遵循 在 Swift 中,使用 protocol 关键…

R语言绘图过程中遇到图例的图块中出现字符“a“的解决方法

R语言绘图过程中遇到图例的图块中出现字符的解决方法 因为我遇到这个问题的时候没在网上找到合适的方法&#xff0c;找到个需要付费的&#xff0c;算了。也许是因为问的方式不同&#xff0c;问了半天AI也回答出来&#xff0c;莫名有些烦躁&#xff0c;打算对代码做个分析&…

云服务器部署WebSocket项目

WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;其设计的目的是在Web浏览器和Web服务器之间进行实时通信&#xff08;实时Web&#xff09; WebSocket协议的优点包括&#xff1a; 1. 更高效的网络利用率&#xff1a;与HTTP相比&#xff0c;WebSocket的握手只…

二十:HTML Form表单提交时的协议格式

在Web开发中,HTML表单(form)是与用户交互的一个重要组件,常用于收集用户输入并将数据发送到服务器进行处理。HTML表单的提交是通过HTTP协议进行的,而表单的提交格式是由表单的method、action、enctype等属性决定的。在本文中,我们将详细探讨HTML表单在提交数据时的协议格…

数字反向输出

数字反向输出 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 小明听到广播里的数字后&#xff0c;总喜欢反着念给妈妈听。请聪明的你将小明听到的数字反向输出。 输入 输入为一个整型的四位数n 输出 …