Vue js封装接口

天梦星服务平台 (tmxkj.top)icon-default.png?t=N7T8https://tmxkj.top/#/

1.安装axios

npm install axios -g

2.在src下新建一个Api文件夹,再创建一个js文件

import axios from 'axios'
let configuration = {
	url:"http://localhost:9090"
}
/**
 * 请求项目数据的请求体
 */
async function http({ url, method, param }) {
	const httpUrl = configuration.url + url
	if (method === 'GET') {
		httpUrl + jsonToGetParams(param)
	}
	const { data } = await axios({
		url: httpUrl,
		method: method ? method : 'GET',
		data: method === 'GET' ? {} : param,
		headers: {
			'content-type': 'application/json',
			token: localStorage.getItem('token') || ''
		}
	})
	return data
}
async function ask(e) {
	return http({
		url: e[0],
		method: e[1],
		param: e[2]
	})
}
export { ask }

/**
 * GET参数转字符串
 * @param jsonObj
 * @returns {string}
 */
function jsonToGetParams(jsonObj) {
	const params = Object.entries(jsonObj)
		.map(([key, value]) => `${key}=${value}`)
		.join('&')
	if (params.length >= 1) {
		return '?' + params
	} else {
		return params
	}
}

3.在src下新建一个Interface文件夹,里面单独存放接口,用户接口就创建UserApi.js文件,文件接口就创建FileApi.js

import {ask} from "../Api/requestBody";

/**
 * 查询用户接口
 */
export function getQueryUser(param){
    return ask(['/user/queryUser','GET',param]);
}

4.来到vue页面调用

 getQueryUserFun(){
      getQueryUser({
        id:"2222"
      }).then(res=>{
        console.log(res)
      })
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

记录在项目中引用本地的npm包

1、先把需要的包下载下来,以Photo Sphere Viewer 为引用的npm包、项目以shpereRepo为例子 git clone https://github.com/mistic100/Photo-Sphere-Viewer2、拉下代码后修改之后执行 ./build.sh build.sh #!/usr/bin/env bashyarn run build targetDir"../sh…

桌面便签软件哪个好?哪种好用便签实用?

在繁忙的工作和生活中,能够在桌面上直接记录事项,无疑会为我们带来极大的便利。这时,一款好用的桌面便签软件就显得尤为重要。它能够轻松助我们一臂之力,让我们的工作和生活更加有条不紊。 在众多便签软件中,敬业签便…

k8s入门到实战(四)—— k8s核心概念以及基本操作命令详细介绍

k8s 核心概念及操作命令 namespace(命名空间,简称 ns) k8s 资源创建的两种方式:使用命令行创建、使用 yaml 文件创建 什么是 ns 在 k8s 中,ns 是一种用于对集群资源进行逻辑分组和隔离的机制。它允许将 k8s 集群划…

海量数据处理项目-账号微服务和流量包数据库表+索引规范(下)

海量数据处理项目-账号微服务和流量包数据库表索引规范(下) 第2集 账号微服务和流量包数据库表索引规范讲解《下》 简介:账号微服务和流量包数据库表索引规范讲解 账号和流量包的关系:一对多traffic流量包表思考点 海量数据下每…

迭代器模式(统一对集合的访问方式)

目录 前言 UML plantuml 类图 实战代码 Iterator ArrayList Client 自定义迭代器 TreeNode TreeUtils Client 前言 在实际开发过程中,常用各种集合来存储业务数据并处理,比如使用 List,Map,Set 等等集合来存储业务数…

一键采集主流电商平台商品详情数据以及接入演示示例

一键抓取电商平台数据通常涉及到网络爬虫技术,该技术可以自动化地从网页上提取信息。不过要注意,任何形式的数据采集都应遵守相关网站的使用条款和隐私政策,以及当地的法律法规。 以下是一个概念性的步骤说明,展示如何通过API采集…

数据结构-树-006

1二叉树 1.1目标二叉树 前序遍历:ABDHIEJCFKG 中序遍历:HDIBEJAFKCG 后序遍历:HIDJEBKFGCA 层序遍历:ABCDEFGHIJK运行结果: 运行结果符合目标二叉树的深度优先(前序遍历,中序遍历,…

Bert基础(八)--Bert实战之理解Bert微调

到目前为止,我们已经介绍了如何使用预训练的BERT模型。现在,我们将学习如何针对下游任务微调预训练的BERT模型。需要注意的是,微调并非需要我们从头开始训练BERT模型,而是使用预训练的BERT模型,并根据任务需要更新模型…

基于单片机的太阳能充电系统设计

摘要:本文所设计的太阳能充电系统主要由以下几个模块组成:STC89C52 主控模块、TP4056 充电电路、电压AD 采集模块、LCD1602 液晶显示模块和太阳能充电电池等组成。此太阳能充电器制作简单,性价比高,性能稳定。 关键词:LCD1602;太阳能充电系统;ADC0832 太阳能充电系统的充…

【C++】基础:STL容器库

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍STL容器库。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更新不迷路&#x1f95…

vue动态渲染本地路径图片不显示的解决方案,v-fro 渲染本地图片路径不显示

1、第一种解决方法 如果直接使用本地路径渲染是渲染不出来的&#xff0c;因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。 这样怎么能找到路径&#xff1f;解决方案如下 // 渲染正常渲染即可 <div v-for"(item, index) in imgPath" :key&quo…

【WEEK4】 【DAY4】AJAX第一部分【中文版】

2024.3.21 Thursday 目录 8.AJAX8.1.简介8.2.伪造ajax8.2.1.新建module&#xff1a;springmvc-06-ajax8.2.2.添加web支持&#xff0c;导入pom依赖8.2.2.1.修改web.xml8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml8.2.4.新建AjaxController.java8.2.5.配置Tomcat8.…

【MATLAB源码-第9期】基于matlab的DQPSK的误码率BER和误符号率SER仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 DQPSK信号的解调与2DPSK信号的解调类似&#xff0c;也有两种方法&#xff0c;分别是极性比较法和相位比较法 极性比较法。其原理方框图如下图所示。由于DQPSK信号可以看做是两路2DPSK信号的合成&#xff0c;解 调时也可以分别…

Python环境下5种TE过程(Tennessee Eastman Process)故障检测方法

田纳西-伊斯特曼过程&#xff0c;也被称作TE过程&#xff0c;主要模拟美国田纳西州一家名为伊斯曼的化工公司的化工过程。TE过程是一个高度复杂、非线性和多变量的过程&#xff0c;涉及到多个阶段和多个控制参数&#xff0c;其中某些参数会相互影响&#xff0c;因此&#xff0c…

读研究生的时候早恋被导师发现了怎么办?

研究生早恋这事&#xff0c;危险重重&#xff0c;比走钢丝还紧张&#xff0c;这根本就是走在科研生涯的悬崖边上&#xff0c;随时都有掉下去的危险。 让我们来详细分析一下为什么你应该立刻收心&#xff0c;专注于你的实验和论文&#xff0c;而不是浪费时间在所谓的“早恋”上。…

[2023] 14届

1.日期统计 题意 1.日期统计 - 蓝桥云课 (lanqiao.cn) 思路 用dfs扫 对每一个位进行限制 花了一个小时 注意把答案枚举出来 对应一下看到底对不对 code #include<iostream> #include<cstdio> #include<stack> #include<vector> #include<al…

电脑桌面记事本便签软件,记事本软件哪个好用

正在电脑前忙碌工作&#xff0c;突然想起今晚有个重要的会议&#xff0c;或者是明天有一个重要的任务需要完成&#xff0c;但是手头的工作又无法让你离开电脑&#xff0c;这时候&#xff0c;你多么希望有一个便捷的电脑桌面记事本便签软件&#xff0c;可以让你快速记录下这些重…

Python时间

UTC ~ 北京时间 【差8小时】 格式化日期时间为字符串:strftime 时间戳-1970.1.1到现在的秒数:time.time() AttributeError: partially initialized module ‘datetime’ has no attribute ‘fromtimestamp’ (most likely due to a circular import) 改正&#xff1a;文件名和…

【C++】隐藏的this指针

文章目录 1.this指针的引出2.this指针的特性 1.this指针的引出 我们通过日期类来学习this指针&#xff0c;首先我们先定义一个日期类。 class Date { public:void Display(){cout << _year << "-" << _month << "-" << _d…

1688商品API接口数据采集助力电商ERP

1688商品API接口数据采集可以帮助电商供应链ERP系统搭建&#xff0c;提供所需的商品信息和数据。 通过使用1688商品API接口&#xff0c;可以直接从1688网站上抓取商品信息&#xff0c;包括商品名称、价格、库存、属性等。这样&#xff0c;可以省去手动复制粘贴的步骤&#xff…
最新文章