uniapp 微信小程序 封装公共的请求js(api版本)

news2024/10/6 14:26:12

一、新建api文件夹
在项目目录下创建api文件夹,内放files跟index.js文件夹,files文件夹内放每个页面对应的js请求接口
在这里插入图片描述
1、index.js

/**
 * api接口的统一出口
 */
const api = {};
const requireComponent = require.context('./files', false, /\.js$/)
requireComponent.keys().forEach(fileName => {
  const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  const componentConfig = requireComponent(fileName)
  api[componentName] = componentConfig.default
})
export default api;

2、例如:login.js

/**
 * 登录用到的接口
 */
import http from '@/utils/http.js'
import config from '@/utils/config.js'
const login = {
	//角色001-账号登录
	transportLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.adminDomain,//接口ip地址+端口号(第一种)
				url: "/user/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	},
	//角色002-账号登录
	regulatorLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.domain,//接口ip地址+端口号(第二种)
				url: "/wx/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	}
}
export default login;

二、config.js

const domain = "http://192.888.888.6:80/my"
const adminDomain = "http://192.888.444.9:800"
const adminH5 = "http://192.888.666.7:82/#";
module.exports = {
	domain,
	adminDomain,
	adminH5
}

三、main.js
在这里插入图片描述

四、页面使用

<template>
	<view class="login-btn" @click="toLogin">登录</view>
	<view class="login-btn" @click="toLogin2">登录</view>
</template>
methods: {
	toLogin(){
		this.$api.login.transportLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	},
	toLogin2(){
		let data = {
			account: "", //用户名
			pwd: "" //密码
		};
		this.$api.login.regulatorLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	}
}

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

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

相关文章

3.2 防火墙

数据参考&#xff1a;CISP官方 目录 防火墙基础概念防火墙的典型技术防火墙企业部署防火墙的局限性 一、防火墙基础概念 防火墙基础概念&#xff1a; 防火墙&#xff08;Firewall&#xff09;一词来源于早期的欧式建筑&#xff0c;它是建筑物之间的一道矮墙&#xff0c;用…

【基础IO】文件系统 {磁盘的物理结构,存储结构,逻辑结构;CHS 和 LBA 寻址方式;磁盘分区和块组;文件inode;软硬链接}

文件系统 文件分为&#xff1a; 内存文件&#xff1a;被进程打开的文件&#xff0c;文件被加载到内存中供进程快速读写。磁盘文件&#xff1a;没有被打开的文件&#xff0c;保存在磁盘上。磁盘文件被分门别类的存储和管理&#xff0c;用于支持更好的存取。 提示&#xff1a; …

Amazon CodeWhisperer亚马逊云代码生成器idea体验使用

阿丹&#xff1a; 自从接触到微服务以来发现要写的代码越来越多了&#xff0c;之前一直面向ChatGPT来编程&#xff0c;今天找到了一个新的ai代码生成器。体验一下。安装的过程给兄弟们演示一下。 关键还是免费的。 连接如下:AI 代码生成器 - Amazon CodeWhisperer - AWS 查看…

记录第一篇被”华为开发者联盟鸿蒙专区 “收录的文章

记录第一篇被”华为开发者联盟鸿蒙专区 “社区收录的文章。 坚持写作的动力是什么&#xff1f; 是记录、分享&#xff0c;以及更好的思考 。

地理信息系统空间分析实验教程 第三版 第八章示例与练习 寻找最佳路径

寻找最佳路径 背景 随着社会经济的发展&#xff0c;公路的重要性日益提高。在一些交通欠发达的地区&#xff0c;公路 设迫在眉睫。如何根据实际地形情况设计出比较合理的公路&#xff0c;是一个值得研究的问题 目的 通过练习&#xff0c;熟悉 ArcGIS 栅格数据距离制图、表…

Docker搭建zookeeper

问题背景 前言 本文参考自&#xff1a;docker-compose快速搭建Zookeeper集群还有一种更加详细更加全面的部署方式&#xff1a;Docker之docker-compose一键部署Zookeeper集群&#xff0c;但笔者还未验证&#xff0c;先记录下来 搭建 安装docker-ce 此处不赘述 安装docker-co…

skywalking日志收集

文章目录 一、介绍二、添加依赖三、修改日志配置1. 添加链路表示traceId2. 添加链路上下文3. 异步日志 四、收集链路日志 一、介绍 在上一篇文章skywalking全链路追踪中我们介绍了在微服务项目中使用skywalking进行服务调用链路的追踪。 本文在全链路追踪的基础上&#xff0c…

小研究 - 基于 MySQL 数据库的数据安全应用设计(一)

信息系统工程领域对数据安全的要求比较高&#xff0c;MySQL 数据库管理系统普遍应用于各种信息系统应用软件的开发之中&#xff0c;而角色与权限设计不仅关乎数据库中数据保密性的性能高低&#xff0c;也关系到用户使用数据库的最低要求。在对数据库的安全性进行设计时&#xf…

vscode连接远程Linux服务器

文章目录 一、环境安装1.1 下载vscode1.2 下载vscode-sever 二、ssh链接2.1 安装Remote-SSH2.2 设置vscode ssh2.3 设置免密登录2.3.1 本地生成公私钥2.3.2 服务器端添加公钥 三、安装插件3.1 vscode安装插件3.1.1 在线安装插件3.1.2.1 下载插件3.1.2.2 安装插件 3.2 vscode-se…

SQL注入实操三(SQLilabs Less41-65)

文章目录 一、sqli-labs靶场1.轮子模式总结2.Less-41 stacked Query Intiger type blinda.注入点判断b.轮子测试c.获取数据库名称d.堆叠注入e.堆叠注入外带注入获取表名f.堆叠注入外带注入获取列名g.堆叠注入外带注入获取表内数据 3.Less-42 Stacked Query error baseda.注入点…

小学语文思维导图:如何写一篇好的作文

大家都知道&#xff0c;思维导图是一款非常高效的工具。我们利用思维导图不仅可以做读书笔记、还可以运用到很多具体细分的场景。今天我们就“如何利用思维导图写好一篇作文”和大家进行分享。 思维导图在写作文的过程中&#xff0c;可以帮助我们整理思路。提高效率。将混乱的内…

排序八卦炉之总复习

文章目录 1.总代码1.1Stack.h1.2Stack.c1.3Sort.h1.4Sort.c1.5Test.c 2.总结 1.总代码 点击 排序&#xff08;C&#xff09; 跳转码云获取完整代码 1.1Stack.h #pragma once #include <stdio.h> #include <assert.h> #include <stdlib.h> #include <st…

web前端html

文章目录 快捷方式一、html5的声明二、html5基本骨架 2.1 html标签 2.2 head标签 2.3 body和head同级 2.4 body标签 2.5 title标签 2.6 meta标签 三、标题标签介绍与应用 3.1 标题的介绍 3.2 标题标签位置摆放 3.3 标签之段落、换行、水平线 3.3 标签之图片 3.3.1 图…

【快应用】list组件如何区分滑动的方向?

【关键词】 list组件、滑动方向、scroll 【问题背景】 有cp反馈list这个组件在使用的时候&#xff0c;不知道如何区分它是上滑还是下滑。 【问题分析】 list组件除了通用事件之外&#xff0c;还提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件&#x…

Spark官方调优三部曲之三:其它优化思路

前言 前面介绍了关于spark性能调优两个最重要的点: 数据序列化内存调优这两个方向都进行调优后,如果想进一步继续优化你的程序,可以参考下面的思路。 设置合理的并行度 除非将每个操作的并行级别设置得足够高,否则集群资源不会得到充分利用。Spark根据每个文件的大小自动…

【5G NR】逻辑信道、传输信道和物理信道的映射关系

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

微信开发之朋友圈自动点赞的技术实现

简要描述&#xff1a; 朋友圈点赞 请求URL&#xff1a; http://域名地址/snsPraise 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId…

WSL安装

WSL安装 1.Microsoft store 安装 1.1 启动WSL功能 在【程序和功能 -> 启用或关闭 Windows 功能】中勾选【适用于 Linux 的 Windows 子系统】 1.2 Store中下载安装 在 Microsoft Store 中下载并安装需要的 Linux 发行版 2.不使用Store安装WSL 注&#xff1a;1.1也要…

Nios初体验之——Hello world!

文章目录 前言一、系统设计1、系统模块框图2、系统涉及到的模块1、时钟2、nios2_qsys3、片内存储&#xff08;onchip_rom、onchip_ram&#xff09;4、串行通信&#xff08;jtag_uart&#xff09;5、System ID&#xff08;sysid_qsys&#xff09; 二、硬件设计1、创建Qsys2、重命…

vue中vue-lazyload报错

1.问题&#xff1a; 说明&#xff1a;也就是版本不兼容&#xff0c;我安装的是vue2,因此需要 "vue-lazyload": "^1.2.6"或者更低 2.解决 npm i vue-lazyload1.2.6