vue封装请求、合并js、合并多个js

vue封装请求、合并js、合并多个js

作为一个后端开发,写前端时发现,每次导入api接口都会有一堆代码,像下面这样:

import {footprintList, footprintDelete} from '@/api/userApi.js'
import {addressList} from '@/api/userApi.js'
import {getSku} from '@/api/goodsApi.js'// .. 调用方法

要核对名称等一些列操作,我就很苦恼,为什么不能一个次导入,随意调用?(一次编译,到处运行)

参考网上,实现一次导入,任意模块调用。实现了下面的方案:

转自:https://lingkang.top/archives/he-bing-duo-ge-js
转自:https://lingkang.top/archives/he-bing-duo-ge-js
转自:https://lingkang.top/archives/he-bing-duo-ge-js

1、编写一个公用的js --> allApi.js

allApi.js

import * as userApi from './userApi.js'
import * as goodsApi from './goodsApi.js'
import * as cartApi from './cartApi.js'
import * as collectionApi from './collectionApi.js'
import * as footprintApi from './footprintApi.js'export default {userApi,goodsApi,cartApi,collectionApi,footprintApi,
}

例如footprintApi.js中的内容

import request from './request.js'// 浏览足迹------------------------------------
export function footprintAdd(id) {return request.post(("/api/user/footprint/add"), {id})
}export function footprintList(param) {return request.get('/api/user/footprint/list', {params: param})
}export function footprintDelete(id) {return request.post('/api/user/footprint/delete', {id})
}

2、调用聚合js中的方法

通过调用 allApi.模块API.模块的方法 实现接口聚合

<script setup>
import allApi from '@/api/allApi.js'// ....
const onDel = () => {let ids = []selectedList.value.forEach(e => ids.push(e.id))// 调用allApi.cartApi.deleteCart(ids).then(res => {showToast('操作成功')loadData()})
}// ..
const loadData = () => {allApi.collectionApi.collectionList(param.value).then(res => {list.value = list.value.concat(res.data)// 数据全部加载完成if (list.value.length >= res.total) {finished.value = true;}}).finally(() => {loading.value = false;})
}</script>

项目截图

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

PHP定期给自己网站目录做个特征镜像供快速对比

效果图 上代码&#xff1a; <style> h1{font-size:24px;line-height:180%;font-weight:600;margin:1px 2px;color:#0180cf;} h2{font-size:20px;line-height:140%;font-weight:600;margin:2px 4px;color:green;} h3{font-size:16px;line-height:140%;font-weight:600;m…

如何把视频中的画面保存为图片?免费的工具不用白不用

在数字化时代&#xff0c;截取视频中的珍贵瞬间成为了人们创作、分享和保存回忆的重要方式。 那么&#xff0c;如何迅速捕捉视频中的精彩画面&#xff0c;留存美好瞬间呢&#xff1f;有人说直接截图就可以&#xff0c;如果直接截图就可以&#xff0c;小编就不用写这篇文章了&a…

python实现爬虫例子2

网络爬虫是一个可以自动抓取互联网内容的程序。Python有很多库可以用来实现网络爬虫&#xff0c;其中最常用的是requests&#xff08;用于发送HTTP请求&#xff09;和BeautifulSoup&#xff08;用于解析HTML&#xff09;。 以下是一个简单的Python网络爬虫示例&#xff0c;该爬…

《深入浅出.NET框架设计与实现》笔记2——C#源码从编写到执行的流程

中间语言&#xff08;Intermediate Language&#xff0c;IL&#xff09; C#编译器在编译时&#xff0c;会将源代码作为输入&#xff0c;并以中间语言形式输入出&#xff0c;该代码保存在*.exe文件中或*.dll文件中。 公共语言运行时&#xff08;CLR&#xff09; 可以将IL代码…

什么是Git? 工作原理

Git&#xff1a;是一个分布式版本控制系统 what is 版本控制系统&#xff1f; 作用&#xff1a;版本控制系统在一个名为Repository&#xff08;本地仓库&#xff09;的特殊数据库中记录代码随时间的变化 what is 控制系统&#xff1f;区别&#xff1f; 控制系统只能不断地在…

26版SPSS操作教程(高级教程第十三章)

前言 #今日世界读书日&#xff0c;宝子你&#xff0c;读书了嘛~ #本期内容&#xff1a;主成分分析、因子分析、多维偏好分析 #由于导师最近布置了学习SPSS这款软件的任务&#xff0c;因此想来平台和大家一起交流下学习经验&#xff0c;这期推送内容接上一次高级教程第十二章…

STM32cubemx和HAL库的使用入门--点亮一颗LED

一&#xff1a;流程介绍 &#xff08;1&#xff09;环境搭建 1 &#xff1a;stm32cubemx安装 2 &#xff1a;stm32xxFW安装 3 &#xff1a;MDK5安装 4 &#xff1a;生成MDK版本project &#xff08;2&#xff09;stm32cubemx创建工程&#xff0c;选择芯片型…

WAF防范原理

目录 一、什么是WAF 二、纵深安全防御 WAF的组网模式 WAF配置全景 WAF端 服务器 攻击端 拦截SQL注入&#xff0c;XSS攻击&#xff0c;木马文件上传 要求&#xff1a; 使用WAF&#xff0c;通过配置策略要求能防御常见的web漏洞攻击&#xff08;要求至少能够防御SQL、XSS、文…

云原生:10分钟了解一下Kubernetes架构

Kubernetes&#xff0c;作为当今容器编排技术的事实标准&#xff0c;以其强大的功能和灵活的架构设计&#xff0c;在全球范围内得到了广泛的应用和认可。本文将深入简出地探讨Kubernetes的核心架构&#xff0c;帮助大家了解Kubernetes&#xff0c;为今后的高效的学习打下良好的…

01-服务与服务间的通信

这里是极简版&#xff0c;仅用作记录 概述 前端和后端可以使用axios等进行http请求 服务和服务之间也是可以进行http请求的spring封装的RestTemplate可以进行请求 用法 使用bean注解进行依赖注入 在需要的地方&#xff0c;自动注入RestTemplate进行服务和服务之间的通信 注…

【Nginx】(二)Nginx 工作流程与模块功能详解

Nginx 工作流程 Nginx 的工作流程是一系列连续的步骤&#xff0c;从启动到接收请求&#xff0c;处理请求&#xff0c;直到关闭。以下是 Nginx 工作流程的简要概述&#xff1a; 开始&#xff1a;Nginx 服务的启动准备。启动 Nginx&#xff1a;加载配置文件 nginx.conf&#xff…

PHP中的超全局变量及其作用

PHP中的超全局变量及其作用 在PHP编程中&#xff0c;超全局变量是一类非常特殊的变量&#xff0c;它们可以在脚本的任何地方&#xff0c;包括函数或方法内部&#xff0c;无需任何特殊的声明或调用&#xff0c;即可直接访问。这些变量是PHP预先定义好的&#xff0c;它们提供了对…

docker系列7:docker安装ES

目录 传送门 Docker安装ES 确定版本 拉取镜像 执行拉取ES镜像 查看ES镜像 运行ES 创建一个新的docker网络 启动一个Elasticsearch容器 查看运行结果 ES启动内存不足 访问ES 公网访问 传送门 docker系列1&#xff1a;docker安装 docker系列2&#xff1a;阿里云镜…

100290. 使矩阵满足条件的最少操作次数

https://leetcode.cn/problems/minimum-number-of-operations-to-satisfy-conditions/description/ 正难则反。 暴力的遍历每一修改的情况&#xff0c;0-9&#xff1b;根据前一列的状态进行转移过来&#xff0c; 下面是状态转移方程 f ( i , j ) m a x ( f ( i , j ) , f ( i…

【Chapter3】中断与处理机调度,计算机操作系统教程,第四版,左万利,王英

文章目录 一、中断与中断系统1.1 什么是中断&#xff1f;1.1.1 外中断&#xff08;硬件&#xff09;1.1.2 异常&#xff08;内中断&#xff09; 1.2 中断机制的原理1.2.1 中断装置1、中断源与中断字2、中断类型与中断向量3、中断嵌套与系统栈4、中断优先级别与中断屏蔽 1.2.2 中…

C语言超好看的爱心代码!一定不要错过!

如果不想了解代码怎样编写的话&#xff0c;源码在文末自取哟 喜欢的话记得给个三连支持一下❤️❤️❤️ 目录 一、代码的浪漫起源 二、代码解析 主体 三、运行与欣赏 四、结语&#xff08;源码&#xff09; 用C语言绘制爱心&#xff1a;一段代码的浪漫之旅 在编程的世…

轻质砖工艺中墙建材宝山奉贤崇明轻质砖苏州黄浦杨浦加气块闵行嘉定金山吴江姑苏虎丘aac加气砌块松江青浦吴中相城

轻质砖工艺中墙建材宝山奉贤崇明轻质砖苏州黄浦杨浦加气块闵行嘉定金山吴江姑苏虎丘aac加气砌块松江青浦吴中相城 苏州地区的轻质砖生产工艺可能遵循行业通用的制作流程&#xff0c;结合当地资源条件、技术标准及环保政策进行优化。以下是一般轻质砖&#xff08;包括但不限于陶…

互联网大厂ssp面经,数据结构part3

1. 哈希表的原理是什么&#xff1f;如何解决哈希碰撞问题&#xff1f; a. 原理&#xff1a;通过哈希函数将每个键映射到一个唯一的索引位置&#xff0c;然后将值存储在对应索引位置的存储桶中。 b. 关键&#xff1a;将不同的键映射到不同的索引位置&#xff0c;以实现快速的插…

为什么大模型训练需要GPU,以及适合训练大模型的GPU介绍

文章目录 前言 1、为什么大模型训练需要GPU&#xff0c;而非CPU 2、现在都有哪些合适的GPU适合训练&#xff0c;价格如何 前言 今天偶然看到一篇关于介绍GPU的推文&#xff0c;我们在复现代码以及模型训练过程中&#xff0c;GPU的使用是必不可少的&#xff0c;那么大模型训练需…

【电控笔记5.8】数字滤波器设计流程频域特性

数字滤波器设计流程&频域特性 2HZ : w=2pi2=12.56 wc=2*pi*5; Ts=0.001; tf_lpf =