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…

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

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

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…

docker系列7:docker安装ES

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

【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 中…

互联网大厂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 =

stm32F407-PS手柄代码,20240424

一、硬件接线 手柄接收器—stm32板子 GND—GND VCC—5V DAT–F3 CMD–F5 CS–F6 CLK–F4 二、PStwo.h #ifndef __PSTWO_H #define __PSTWO_H//F3 F5 F6 F4 F10 // #include "delay.h" #include "sys.h"#define DI PFin(3) //PB12 输入#defin…

C++从入门到出门

C 概述 c 融合了3中不同的编程方式&#xff1a; C语言代表的过程性语言C 在C语言基础上添加的类代表的面向对象语言C 模板支持的泛型编程 1、在c语言中头文件使用扩展名.h,将其作为一种通过名称标识文件类型的简单方式。但是c得用法改变了&#xff0c;c头文件没有扩展名。但是…

YOLO新鲜腐烂水果检测数据集:8类,11000多张图像,标注完整

YOLO新鲜腐烂水果检测数据集&#xff1a;8类&#xff0c;11000多张图像&#xff0c;yolo标注完整&#xff0c;包含烂苹果&#xff0c;烂香蕉&#xff0c;烂橙子&#xff0c;烂石榴&#xff0c;好苹果&#xff0c;好香蕉&#xff0c;好橙子&#xff0c;好石榴8个类别 图像统一大…

什么是行子查询(Row Subqueries)?

什么是行子查询&#xff08;Row Subqueries&#xff09;&#xff1f; 行子查询&#xff0c;也称为行构造子查询&#xff0c;是SQL中的一种子查询形式&#xff0c;它返回单个行而不仅仅是单个字段的值。这意味着&#xff0c;与标准的标量或列子查询不同&#xff0c;行子查询可以…

Mybatis框架怎么查看执行的sql语句

文章目录 一、打开idea搜索mybatis SimpleExecutor类二、找到类中doQuery方法&#xff0c;并打断点二、发请求后&#xff0c;查看boundSql 一、打开idea搜索mybatis SimpleExecutor类 org.apache.ibatis.executor.SimpleExecutor二、找到类中doQuery方法&#xff0c;并打断点 …

Lombok的使用

1、什么是lombok lombok是一种实用的工具&#xff0c;可以用来帮助开发人员消除Java中的冗余代码&#xff0c;尤其是对于简单的Java对象&#xff08;POJO&#xff09;&#xff0c;它通过注解达到这一目的。 2、Lombok常用注解 2.1 Getter/Setter 从名字上理解&#xff0c;相…