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

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…...

如何利用量化接口进行数据分析和计算?

量化交易作为一种利用数据和算法进行投资的方式&#xff0c;数据分析和计算是量化交易的核心。量化接口作为连接量化交易者和交易所的桥梁&#xff0c;提供了获取市场数据和执行交易指令的功能&#xff0c;为量化交易的数据分析和计算提供了基础。 一、数据获取&#xff1a; 市…...

electron-egg 加密报错

electron框架&#xff1a;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种处理方式&#xff1a; ①牺牲一个单元 ②增设表示元素个数的数据成员 ③增设tag数据成员 1.front->队头元素&#xff0c;rear->队尾元素下一位置 1.1牺牲一个单元 1.1.1定义 #define MaxSize 50 typedef struct {ElemType data[MaxSize];int fron…...

react的特点

React的特点包括以下几个方面&#xff1a; 组件化&#xff1a;React将用户界面分解成小而独立的组件&#xff0c;每个组件都有自己的状态和属性。通过组合这些组件&#xff0c;可以构建复杂而灵活的用户界面。 虚拟DOM&#xff1a;React使用虚拟DOM&#xff08;Virtual DOM&am…...

MATLAB实现图像处理:图像识别、去雨、去雾、去噪、去模糊等等(附上20个完整仿真源码)

图像处理是计算机视觉领域的重要研究方向&#xff0c;MATLAB是一种功能强大的数学计算软件&#xff0c;可以用于图像处理和分析。下面是一些简单的MATLAB图像处理代码示例&#xff0c;包括图像增强、边缘检测、形态学处理、特征提取等。 文章目录 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 随机更换主界面背景

实例说明 如果开发的软件用户使用频率非常高&#xff0c;可以为程序设计随机更换背景的程序。这样不但可以使用户心情愉快&#xff0c;也增加了软件的人性化设计。下面的界面就是一个随机更换主界面的例子&#xff0c;效果如图1.26所示。 技术要点 随机更换主界面背景使用了…...

PostgreSQL 简洁、使用、正排索引与倒排索引、空间搜索、用户与角色

PostgreSQL使用 PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS)&#xff0c;在灵活的BSD许可证下发行。PostgreSQL 9.0 &#xff1a;支持64位windows系统&#xff0c;异步流数据复制、Hot Standby&#xff1b;生产环境主流的版本是PostgreSQL 12 BSD协议 与 GPL协议 …...

querySubObject(“Cells(int,int)“, j,i)->property(“Value“)读不到数据问题

在使用qt读取Excel文件内容的时候&#xff0c;使用下列方式&#xff1a; worksheet->querySubObject("Cells(int,int)", j,i)->property("Value").toString(); 不会报错&#xff0c;但读取不到数据。多次尝试发现应该将property改为dynamicCall 下…...

AutoSAR系列讲解(实践篇)10.2-EcuM的上下电流程

目录 一、上电(StartUp) 二、下电(Shutdown) 三、睡眠(Sleep) 上下电,说白了就是给Ecu上下电后,Ecu的代码执行顺序。这里还讲到了大家可能经常会用到的Sleep流程,主要就是可以归纳为以下这张图,大家 掌握这张图就基本掌握了EcuM的上下电流程了。这张图的具体内容博…...

科研院所用泛微搭建信创办公平台,统一办公,业务融合,安全便捷

国家全面推动重要领域的信创改造工作&#xff0c;要求到2027年底&#xff0c;对综合办公、经营管理、生产运营等系统实现“应替尽替、能替则替”。 科研机构作为智力、知识密集型机构&#xff0c;承载着大量数据、信息资产&#xff0c;数字化程度高&#xff0c;业务系统多样&a…...

基于LoRA进行Stable Diffusion的微调

文章目录 基于LoRA进行Stable Diffusion的微调数据集模型下载环境配置微调过程 推理WebUI部署 基于LoRA进行Stable Diffusion的微调 数据集 本次微调使用的数据集为&#xff1a; LambdaLabs的Pokemon数据集 使用git clone命令下载数据集 git clone https://huggingface.co/…...

C++STL序列式容器——list容器及其常用操作(详解)

纵有疾风起&#xff0c;人生不言弃。本文篇幅较长&#xff0c;如有错误请不吝赐教&#xff0c;感谢支持。 &#x1f4ac;文章目录 一.list容器基本概念二.list容器的常用操作list构造函数list迭代器获取list特性操作list元素操作list赋值操作list的交换、反转、排序、归并操作…...

【雕爷学编程】MicroPython动手做(15)——掌控板之AB按键2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…...

Spring Boot中整合MyBatis(基于xml方式基于注解实现方式)

一、前提准备 在Spring Boot中整合MyBatis时&#xff0c;你需要导入JDBC&#xff08;不需要手动添加&#xff09;和Druid的相关依赖。 JDBC依赖&#xff1a;在Spring Boot中整合MyBatis时&#xff0c;并不需要显式地添加JDBC的包依赖。这是因为&#xff0c;当你添加mybatis-sp…...

ChatGPT漫谈(三)

AIGC(AI Generated Content)指的是使用人工智能技术生成的内容,包括文字、图像、视频等多种形式。通过机器学习、深度学习等技术,AI系统可以学习和模仿人类的创作风格和思维模式,自动生成大量高质量的内容。AIGC被视为继用户生成内容(UGC)和专业生成内容(PGC)之后的下…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

使用ch340继电器完成随机断电测试

前言 如图所示是市面上常见的OTA压测继电器&#xff0c;通过ch340串口模块完成对继电器的分路控制&#xff0c;这里我编写了一个脚本方便对4路继电器的控制&#xff0c;可以设置开启时间&#xff0c;关闭时间&#xff0c;复位等功能 软件界面 在设备管理器查看串口号后&…...