当前位置: 首页 > 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)之后的下…...

树、二叉树(C语言版)详解

&#x1f355;博客主页&#xff1a;️自信不孤单 &#x1f36c;文章专栏&#xff1a;数据结构与算法 &#x1f35a;代码仓库&#xff1a;破浪晓梦 &#x1f36d;欢迎关注&#xff1a;欢迎大家点赞收藏关注 文章目录 &#x1f34a;树的概念及结构1. 树的概念2. 树的相关概念3.树…...

vue中Cascader 级联选择器实现-修改实现

vue 的cascader研究了好长时间&#xff0c;看了官网给的示例&#xff0c;上网查找了好多信息&#xff0c;才解决修改时回显的问题&#xff0c;现将方法总结如下&#xff1a; vue代码&#xff1a; <el-form-item label"芯片" prop"firmware"> <…...

C语言实现三子棋游戏

test.c源文件 - 三子棋游戏测试 game.h头文件 - 三子棋游戏函数的声明 game.c源文件 - 三子棋游戏函数的实现 主函数源文件&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1#include"game.h" //自己定义的用"" void menu() {printf("*************…...

机器学习深度学习——softmax回归从零开始实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——向量求导问题 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 …...

Windows如何安装Django及如何创建项目

目录 1、Windows安装Django--pip命令行 2、创建项目 2.1、终端创建项目 2.2、在Pycharm中创建项目 2.3、二者创建的项目有何不同 2.4、项目目录说明 1、Windows安装Django--pip命令行 安装Django有两种方式&#xff1a; pip命令行【推荐--简单】手动安装【稍微复杂一丢丢…...

在CSDN学Golang云原生(监控解决方案Prometheus)

一&#xff0c;记录规则配置 在golang云原生中&#xff0c;通常使用日志库记录应用程序的日志。其中比较常见的有logrus、zap等日志库。这些库一般支持自定义的输出格式和级别&#xff0c;可以根据需要进行配置。 对于云原生应用程序&#xff0c;我们通常会采用容器化技术将其…...

双重for循环优化

项目中有段代码逻辑是个双重for循环&#xff0c;发现数据量大的时候&#xff0c;直接导致数据接口响应超时&#xff0c;这里记录下不断优化的过程&#xff0c;算是抛砖引玉吧~ Talk is cheap,show me your code&#xff01; 双重for循环优化 1、数据准备2、原始双重for循环3、…...

golang利用go mod巧妙替换使用本地项目的包

问题 拉了两个项目下来&#xff0c;其中一个项目依赖另一个项目&#xff0c;因为改动了被依赖的项目&#xff0c;想重新导入测试一下。 解决办法 go.mod文件的require中想要被代替的包名在replace中进行一个替换&#xff0c;注意&#xff1a;用来替换的需要用绝对路径&#xf…...

使用 docker 一键部署 MySQL

目录 1. 前期准备 2. 导入镜像 3. 创建部署脚本文件 4. MySQL 服务器配置文件模板 5. 执行脚本创建容器 6. 后续工作 7. 基本维护 1. 前期准备 新部署前可以从仓库&#xff08;repository&#xff09;下载 MySQL 镜像&#xff0c;或者从已有部署中的镜像生成文件&#x…...

MyBatis-Plus 查询PostgreSQL数据库jsonb类型保持原格式

文章目录 前言数据库问题背景后端返回实体对象前端 实现后端返回List<Map<String, Object>>前端 前言 在这篇文章&#xff0c;我们保存了数据库的jsonb类型&#xff1a;MyBatis-Plus 实现PostgreSQL数据库jsonb类型的保存与查询 这篇文章介绍了模糊查询json/json…...

晋城网站设计/指数搜索

学习Tensorflow之基本操作Tensorflow基本操作1. 创建张量(1) 创建标量(2) 创建向量(3) 创建矩阵(4) shape属性(5) 判别张量类型(6) 列表和ndarray转张量2. 创建特殊张量(1) tf.ones与tf.ones_like(2) tf.zeros与tf.zeros_like(3) tf.fill(3) tf.random.normal(4) tf.random.uni…...

阳春市建设局网站/品牌活动策划

20 scala 学习笔记 更多干货 分布式实战&#xff08;干货&#xff09;spring cloud 实战&#xff08;干货&#xff09;mybatis 实战&#xff08;干货&#xff09;spring boot 实战&#xff08;干货&#xff09;React 入门实战&#xff08;干货&#xff09;构建中小型互联网企业…...

视频做网站背景/厦门百度关键词推广

JOL全称为Java Object Layout&#xff0c;是用来分析JVM中对象布局的工具&#xff0c;它可以帮我们在运行时计算某个对象的大小。 引入JOL依赖&#xff0c;如下&#xff1a; <!-- https://mvnrepository.com/artifact/org.openjdk.jol/jol-core --> <dependency>…...

vultr做网站怎么样/郑州外贸网站推广

这个其实网上很多&#xff0c;一百度一大把&#xff0c;但是网上得都有一个通病导致不成功&#xff0c;我也不知道他们当时是怎们通过的。 前面怎们打开环境变量就不细说了&#xff0c;网上很多。 在添加路径时双击path,j进入编辑页面&#xff0c;然后添加所在python所在的安…...

网站建设与维护考试卷/首页排名优化公司

既上一篇文章之后又看到一篇文章关于教育的&#xff0c;当今日新月异的生活&#xff0c;给我们带来高质的生活的同时也引发了我们深刻的思考。 今天&#xff0c;即使你幽居偏远山沟&#xff0c;通过视频&#xff0c;也可以面对面地和海外朋友对话交流&#xff1b;你要学金融&am…...

做网站公司599/黄页88网络营销宝典

在进行数据解析时&#xff0c;先来看看excel测试数据格式&#xff0c;这里采用接口和测试数据分离的方式&#xff0c;即分为两个sheet页签分别存放接口信息&#xff0c;用例信息excel封装成对象步骤1、导入easypoi的坐标2、加载excel的流对象3、导入参数对象ImportParams4、工具…...