React Dva项目中模仿网络请求数据方法
我们都已经选择react了 那么自然是一个前后端分离的开发形式
至少我在公司中 大部分时候是前后端同时开发的
一般你在开发界面没有接口直接给你 但你可以和后端约定数据格式 然后在前端模拟数据
我们在自己的Dva项目中 在根目录下的 mock 目录下创建一个js文件 我这里叫 filmData.js

filmData.j参考代码如下
module.exports = {"GET /api/filmDataList":{state: 200,message: "请求成功",data: [{name: "午夜凶铃",describe: "《午夜凶铃》是日本地区最知名的恐怖片之一,影片主导演是中田秀夫。本部影片在1998年的1月31日正式在日本地区上映,影片的内容主要改编于由小说家铃木光司所写的同名小说。"},{name: "咒怨",describe: "《咒怨》是日本地区的恐怖系列影视作品之一,内容主要讲述了有怨气的人在死后会在之前所居住的地方长期停留,进入到这些地方的人都会受到诅咒。本部影片上映的时间是2003年的1月25日。"},{name: "死寂",describe: "《死寂》上映于2007年的3月16日,是由温子仁作为总导演创作的一部恐怖电影。"}]}
}
这里 我们定义了一个 GET类型 路径/api/filmDataList
返回值一个对象 对象内的内容你们就直接看情况该就行了
然后 我们根目录下面有一个 .roadhogrc.mock.js 我们刚刚写的内容 在这个 文件中就可以做调用了

这里 我们写
...require("./mock/filmData")

引入刚刚写的 filmData.js文件
然后 我们打开 src目录下的services下的example.js
这里是api所在的地方

这里 我们加一个函数 来调用我们自己写的/api/filmDataList接口
export function getFilmData() {return request('/api/filmDataList');
}

此时 我们调用 getFilmData 函数就可以了
例如 我们在components中创建一个组件 编写代码如下
import React from "react"
import { getFilmData } from "../services/example";
class Product extends React.Component {constructor(props){super(props);this.state = {}}componentDidMount() {getFilmData().then(res =>{console.log(res);})}render(){return (<div></div>)}
}export default Product
然后 我们运行项目 如果你根组件引入了刚刚创建的 调用了getFilmData的组件 就会看到如下数据

我们浏览器看网络请求 数据也是在的

相关文章:
React Dva项目中模仿网络请求数据方法
我们都已经选择react了 那么自然是一个前后端分离的开发形式 至少我在公司中 大部分时候是前后端同时开发的 一般你在开发界面没有接口直接给你 但你可以和后端约定数据格式 然后在前端模拟数据 我们在自己的Dva项目中 在根目录下的 mock 目录下创建一个js文件 我这里叫 filmDa…...
【云原生】Docker容器命令监控+Prometheus监控平台
目录 1.常用命令监控 docker ps docker top docker stats 2.weave scope 1.下载 2.安装 3.访问查询即可 3.Prometheus监控平台 1.部署数据收集器cadvisor 2.部署Prometheus 3.部署可视化平台Gragana 4.进入后台控制台 1.常用命令监控 docker ps [rootlocalhost ~…...
DBA 职责及日常工作职责
DBA 职责及日常工作职责: 1.安装和升级数据库服务器,以及应用程序工具构建和配置网络环境. 2.熟悉数据库系统的存储结构预测未来的存储需求,制订数据库的存储方案. 3.根据开发人员设计的应用系统需求创建数据库存储结构. 4.根据开发人员设计的应用系统需求创建数据库对象 5…...
如何利用量化接口进行数据分析和计算?
量化交易作为一种利用数据和算法进行投资的方式,数据分析和计算是量化交易的核心。量化接口作为连接量化交易者和交易所的桥梁,提供了获取市场数据和执行交易指令的功能,为量化交易的数据分析和计算提供了基础。 一、数据获取: 市…...
electron-egg 加密报错
electron框架:electron-egg 解决方式 npm uninstall bytenode npm install bytenode1.3.6node:internal/modules/cjs/loader:928 throw err; ^ Error: Cannot find module ‘node:assert/strict’ Require stack: D:\electron-egg-test\new-electron-egg\electr…...
循环队列的基本操作(3种处理方式,2种实现方式)
为区分队空队满有3种处理方式: ①牺牲一个单元 ②增设表示元素个数的数据成员 ③增设tag数据成员 1.front->队头元素,rear->队尾元素下一位置 1.1牺牲一个单元 1.1.1定义 #define MaxSize 50 typedef struct {ElemType data[MaxSize];int fron…...
react的特点
React的特点包括以下几个方面: 组件化:React将用户界面分解成小而独立的组件,每个组件都有自己的状态和属性。通过组合这些组件,可以构建复杂而灵活的用户界面。 虚拟DOM:React使用虚拟DOM(Virtual DOM&am…...
MATLAB实现图像处理:图像识别、去雨、去雾、去噪、去模糊等等(附上20个完整仿真源码)
图像处理是计算机视觉领域的重要研究方向,MATLAB是一种功能强大的数学计算软件,可以用于图像处理和分析。下面是一些简单的MATLAB图像处理代码示例,包括图像增强、边缘检测、形态学处理、特征提取等。 文章目录 1. 图像增强2. 边缘检测3. 形态…...
cmake stm32 模板
文件结构 ├─.vscode ├─build ├─cmake ├─Drivers │ ├─CMSIS │ │ ├─Device │ │ │ └─ST │ │ │ └─STM32F1xx │ │ │ ├─Include │ │ │ └─Source │ │ │ └─Templates │ │ └─Include │ └─STM32F1xx_HAL_Driver │ ├─Inc │ │ └─Leg…...
STM32 UDS Bootloader开发-上位机篇-CANoe制作(2)
文章目录 前言CANoe增加NodeCAPL脚本获取GUI中的参数刷写过程诊断仪在线接收回调函数发送函数总结前言 在上一篇文章中,介绍了UDS Bootloadaer上位机软件基于CANoe的界面设计。本文继续介绍CAPL脚本的编写以实现刷写过程。 CANoe增加Node 在开始编写CAPL之前,需要在Simula…...
实例026 随机更换主界面背景
实例说明 如果开发的软件用户使用频率非常高,可以为程序设计随机更换背景的程序。这样不但可以使用户心情愉快,也增加了软件的人性化设计。下面的界面就是一个随机更换主界面的例子,效果如图1.26所示。 技术要点 随机更换主界面背景使用了…...
PostgreSQL 简洁、使用、正排索引与倒排索引、空间搜索、用户与角色
PostgreSQL使用 PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS),在灵活的BSD许可证下发行。PostgreSQL 9.0 :支持64位windows系统,异步流数据复制、Hot Standby;生产环境主流的版本是PostgreSQL 12 BSD协议 与 GPL协议 …...
querySubObject(“Cells(int,int)“, j,i)->property(“Value“)读不到数据问题
在使用qt读取Excel文件内容的时候,使用下列方式: worksheet->querySubObject("Cells(int,int)", j,i)->property("Value").toString(); 不会报错,但读取不到数据。多次尝试发现应该将property改为dynamicCall 下…...
AutoSAR系列讲解(实践篇)10.2-EcuM的上下电流程
目录 一、上电(StartUp) 二、下电(Shutdown) 三、睡眠(Sleep) 上下电,说白了就是给Ecu上下电后,Ecu的代码执行顺序。这里还讲到了大家可能经常会用到的Sleep流程,主要就是可以归纳为以下这张图,大家 掌握这张图就基本掌握了EcuM的上下电流程了。这张图的具体内容博…...
科研院所用泛微搭建信创办公平台,统一办公,业务融合,安全便捷
国家全面推动重要领域的信创改造工作,要求到2027年底,对综合办公、经营管理、生产运营等系统实现“应替尽替、能替则替”。 科研机构作为智力、知识密集型机构,承载着大量数据、信息资产,数字化程度高,业务系统多样&a…...
基于LoRA进行Stable Diffusion的微调
文章目录 基于LoRA进行Stable Diffusion的微调数据集模型下载环境配置微调过程 推理WebUI部署 基于LoRA进行Stable Diffusion的微调 数据集 本次微调使用的数据集为: LambdaLabs的Pokemon数据集 使用git clone命令下载数据集 git clone https://huggingface.co/…...
C++STL序列式容器——list容器及其常用操作(详解)
纵有疾风起,人生不言弃。本文篇幅较长,如有错误请不吝赐教,感谢支持。 💬文章目录 一.list容器基本概念二.list容器的常用操作list构造函数list迭代器获取list特性操作list元素操作list赋值操作list的交换、反转、排序、归并操作…...
【雕爷学编程】MicroPython动手做(15)——掌控板之AB按键2
知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…...
Spring Boot中整合MyBatis(基于xml方式基于注解实现方式)
一、前提准备 在Spring Boot中整合MyBatis时,你需要导入JDBC(不需要手动添加)和Druid的相关依赖。 JDBC依赖:在Spring Boot中整合MyBatis时,并不需要显式地添加JDBC的包依赖。这是因为,当你添加mybatis-sp…...
ChatGPT漫谈(三)
AIGC(AI Generated Content)指的是使用人工智能技术生成的内容,包括文字、图像、视频等多种形式。通过机器学习、深度学习等技术,AI系统可以学习和模仿人类的创作风格和思维模式,自动生成大量高质量的内容。AIGC被视为继用户生成内容(UGC)和专业生成内容(PGC)之后的下…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
