当前位置: 首页 > news >正文

uniapp 配置网络请求并使用请求轮播图

由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

官方文档:@escook/request-miniprogram - npm (npmjs.com)

  • 1、安装 相应的包

1、安装一个npm包管理文件:
npm init -y2、安装我们这个网络请求第三方工具
npm i @escook/request-miniprogram

  • 2、导入 $http 对象

import { $http } from '@escook/request-miniprogram'uni.$http = $http

  • 3、配置 请求根路径、请求拦截器

// 2、配置请求根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net'// 3、请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})
}// 4、请求完成之后做一些事情
$http.afterRequest = function () {uni.hideLoading()
}

  • 4、使用 网络请求

先在pages下建立需要的文件夹,再在这些文件夹上右键点击新建页面,创建就行 

<template><view><!-- 轮播图区域 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 循环渲染轮播图的 item 项 --><swiper-item v-for="(item, i) in swiperList" :key="i"><view class="swiper-item"><!-- 动态绑定图片的 src 属性 --><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template><script>export default {data() {return {// 1. 轮播图的数据列表,默认为空数组swiperList: [],}},onLoad() {// 2. 在小程序页面刚加载的时候,调用获取轮播图数据的方法this.getSwiperList()},methods: {// 3. 获取轮播图数据的方法async getSwiperList() {// 3.1 发起请求 【把data从res{data}中解构出来】const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')console.log(res);// 3.2 请求失败if (res.meta.status !== 200) {return uni.showToast({title: '数据请求失败!',duration: 1500,icon: 'none',})}// 3.3 请求成功,为 data 中的数据赋值this.swiperList = res.message},},}
</script><style lang="scss">swiper {height: 330rpx;.swiper-item,image {width: 100%;height: 100%;}}
</style>

相关文章:

uniapp 配置网络请求并使用请求轮播图

由于平台的限制&#xff0c;小程序项目中不支持 axios&#xff0c;而且原生的 wx.request() API 功能较为简单&#xff0c;不支持拦截器等全局定制的功能。因此&#xff0c;建议在 uni-app 项目中使用 escook/request-miniprogram 第三方包发起网络数据请求。 官方文档&#xf…...

c#在MVC Api(.net framework)当中使用Swagger,以及Demo下载

主要的步骤就是创建项目&#xff0c;通过nuget 添加Swashbuckle包&#xff0c;然后在SwaggerConfig当中进行相关的配置。 具体的步骤&#xff0c;可以参考下面的链接&#xff1a; https://www.cnblogs.com/94pm/p/8046580.htmlhttps://blog.csdn.net/xiaouncle/article/detail…...

Linux 常见命令操作

一、目录管理 1.1 列出目录 ls # ls 命令 # -a 参数&#xff0c;查看全部的文件&#xff0c;包括隐藏的文件 # -l 参数&#xff0c;列出所有的文件&#xff0c;包括文件的属性和权限&#xff0c;不显示隐藏文件 [rootlocalhost /]# ls bin boot dev etc home lib lib64…...

前端实习第七周周记

前言 第六周没写&#xff0c;是因为第六周的前两天在处理第五周的样本库部分。问题解决一个是嵌套问题&#xff08;因为我用到了递归&#xff09;&#xff0c;还有一个问题在于本机没有问题&#xff0c;打包上线接口404。这个问题我会在这周的总结中说。 第六周第三天才谈好新…...

DevOps理念:开发与运维的融合

在现代软件开发领域&#xff0c;DevOps 不仅仅是一个流行的词汇&#xff0c;更是一种文化、一种哲学和一种方法论。DevOps 的核心理念是通过开发和运维之间的紧密合作&#xff0c;实现快速交付、高质量和持续创新。本文将深入探讨 DevOps 文化的重要性、原则以及如何在团队中实…...

windows下Mysql安装配置教程

Mysql下载 在官网下载mysql community Server https://dev.mysql.com/downloads/mysql/ 可以选择下载压缩包或者MSI安装程序 使用压缩包安装 MySQL 压缩包安装通常需要以下步骤&#xff1a; 1. 下载 MySQL 安装包 你可以从 MySQL 官网上下载适合你系统的 MySQL 安装包&am…...

[开发|java] activeJdbc的model的isModified方法说明

在 ActiveJDBC 中&#xff0c;每个数据库表都对应一个继承自 org.javalite.activejdbc.Model 的类&#xff0c;该类用于表示数据库表中的记录。这些类允许您以面向对象的方式与数据库交互。 import org.javalite.activejdbc.Model;public class User extends Model {static {v…...

23062day6

作业&#xff1a;将dict.txt导入到数据库中。 方法1&#xff1a;创建shell脚本&#xff0c; 调用指令创建数据库和表格&#xff0c;使用循环在循环中用数组存储dict.txt的内容并插入表格中。 方法2&#xff1a;在终端创建数据库和表格&#xff0c;将dict.txt中的内容手动输入…...

MiniExcel

MiniExcel 是一个在 .NET 平台上用于操作 Excel 文件的库。它的特点是轻量级、简单易用&#xff0c;并且支持读取和写入 Excel 文件的功能。 使用 MiniExcel 可以进行以下操作&#xff1a; 读取 Excel 文件的数据&#xff0c;并将其转换为多维数组或实体对象。将多维数组或实…...

全球公链进展| Shibarium重新开放跨链桥提款;USDC计划在Polygon PoS等 6 个新区块链上推出

一周速览 过去一周&#xff0c;明星项目动态如下&#xff1a; Holesky 公共测试网创世文件已生成 Shibarium主网重新开放跨链桥提款 BNB Greenfield 测试网将于 8 月 31 日重置 BNB Smart Chain&#xff08;BEP20&#xff09;将进行网络升级及硬分叉 USDC 将在6个新区块链…...

关于C# halcon内存泄漏的研究

开发环境&#xff1a;Win7 VS2002 halcon12&#xff0c; 直接运行Debug的exe 不释放 private void butTemp_Click(object sender, EventArgs e) { HOperatorSet.SetSystem("clip_region", "false"); HObject region; …...

高精度地图定位在高速公路自动驾驶系统中的应用

近年来随着汽车保有量不断增加&#xff0c;随之而来的是: ( 1) 严重的交通拥堵&#xff0c;通行效率低下&#xff0c;用在通行上的时间不断增加; ( 2) 交通事故频发&#xff0c;交通事故导致的伤亡人数和费用不断增加&#xff0c;而且绝大多数事故是由人为因素导致的; ( 3) 大气…...

【Apollo学习笔记】——规划模块TASK之SPEED_HEURISTIC_OPTIMIZER

文章目录 前言SPEED_BOUNDS_PRIORI_DECIDER功能简介SPEED_BOUNDS_PRIORI_DECIDER相关配置SPEED_BOUNDS_PRIORI_DECIDER流程1. 对路程和时间进行采样以及速度限制2. 设计状态转移方程&#xff08;cost计算&#xff09;2.0 CalculateCostAt代价计算2.1 GetObstacleCost障碍物cost…...

R语言APRIORI关联规则、K-MEANS均值聚类分析中药专利复方治疗用药规律网络可视化...

全文链接&#xff1a;http://tecdat.cn/?p30605 应用关联规则、聚类方法等数据挖掘技术分析治疗的中药专利复方组方配伍规律&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 方法检索治疗中药专利复方&#xff0c;排除外用中药及中西药物合用的复方。最近我们…...

3. MySql 5.7安装方式

服务器ip数据库版本硬件要求10.1.1.31mysql-boost-5.7.31.tar.gz2G/40G,内存不够需要开swap空间10.1.1.32mysql-boost-5.7.31.tar.gz2G/40G关闭swap swapoff -a && sed -i ‘/ swap / s/^(.*)$/#\1/g’ /etc/fstab 安装依赖 yum -y install make cmake gcc gcc-c++ bis…...

Flink 如何定位反压节点?

分析&回答 Flink Web UI 自带的反压监控 —— 直接方式 Flink Web UI 的反压监控提供了 Subtask 级别的反压监控。监控的原理是通过Thread.getStackTrace() 采集在 TaskManager 上正在运行的所有线程&#xff0c;收集在缓冲区请求中阻塞的线程数&#xff08;意味着下游阻…...

LeetCode-1005-K次取反后最大化的数组和-贪心算法

题目描述&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后&#xff0c;返回数组 可能的最大和 。 …...

Linux内核源码分析 (5)多处理器调度

Linux内核源码分析 (5)多处理器调度 文章目录 Linux内核源码分析 (5)多处理器调度注&#xff1a;本章节使用的内核版本为Linux 5.6.18一、 SMT和NUMA1、SMP (对称多处理器结构)2、NUMA &#xff08;非一致内存访问结构&#xff09; 二、多核调度三、调度域和调度组四、SMP调度详…...

华为云云服务器评测|华为云云耀云服务器L实例使用教学

文章目录 教学小故事 教学 华为云云耀云服务器L实例是一款提供高效、可靠、安全的基础设施服务的云服务器。下面是使用教学&#xff1a; 登录华为云官网。 测评产品链接&#xff1a;https://www.huaweicloud.com/product/hecs-light.html 进入云耀云服务器管理控制台&#xf…...

这个在线网站让你三分钟制作出一份精美简历

今天&#xff0c;我要向大家推荐一个神奇的在线工具网站&#xff0c;它能够提供免费简历模板、简历范文&#xff0c;支持在线编辑&#xff0c;并且一键下载为PDF。这个工具让你的简历制作变得轻松便捷&#xff01; 首先&#xff0c;这个网站的简历模板非常丰富多样。无论你是刚…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

ubuntu22.04有线网络无法连接,图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

C++ Saucer 编写Windows桌面应用

文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架&#xff0c;开发Windows桌面应用&#xff0c;把一个html页面作为GUI设计放到Saucer里&#xff0c;隐藏掉运行时弹…...

ABB馈线保护 REJ601 BD446NN1XG

配电网基本量程数字继电器 REJ601是一种专用馈线保护继电器&#xff0c;用于保护一次和二次配电网络中的公用事业和工业电力系统。该继电器在一个单元中提供了保护和监控功能的优化组合&#xff0c;具有同类产品中最佳的性能和可用性。 REJ601是一种专用馈线保护继电器&#xf…...

从0开始一篇文章学习Nginx

Nginx服务 HTTP介绍 ## HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。 ## HTTP工作在 TCP/IP协议体系中的TCP协议上&#…...

android计算器代码

本次作业要求实现一个计算器应用的基础框架。以下是布局文件的核心代码&#xff1a; <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"andr…...