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)之后的下…...
树、二叉树(C语言版)详解
🍕博客主页:️自信不孤单 🍬文章专栏:数据结构与算法 🍚代码仓库:破浪晓梦 🍭欢迎关注:欢迎大家点赞收藏关注 文章目录 🍊树的概念及结构1. 树的概念2. 树的相关概念3.树…...
vue中Cascader 级联选择器实现-修改实现
vue 的cascader研究了好长时间,看了官网给的示例,上网查找了好多信息,才解决修改时回显的问题,现将方法总结如下: vue代码: <el-form-item label"芯片" prop"firmware"> <…...
C语言实现三子棋游戏
test.c源文件 - 三子棋游戏测试 game.h头文件 - 三子棋游戏函数的声明 game.c源文件 - 三子棋游戏函数的实现 主函数源文件: #define _CRT_SECURE_NO_WARNINGS 1#include"game.h" //自己定义的用"" void menu() {printf("*************…...
机器学习深度学习——softmax回归从零开始实现
👨🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——向量求导问题 📚订阅专栏:机器学习&&深度学习 希望文章对你们有所帮助 …...
Windows如何安装Django及如何创建项目
目录 1、Windows安装Django--pip命令行 2、创建项目 2.1、终端创建项目 2.2、在Pycharm中创建项目 2.3、二者创建的项目有何不同 2.4、项目目录说明 1、Windows安装Django--pip命令行 安装Django有两种方式: pip命令行【推荐--简单】手动安装【稍微复杂一丢丢…...
在CSDN学Golang云原生(监控解决方案Prometheus)
一,记录规则配置 在golang云原生中,通常使用日志库记录应用程序的日志。其中比较常见的有logrus、zap等日志库。这些库一般支持自定义的输出格式和级别,可以根据需要进行配置。 对于云原生应用程序,我们通常会采用容器化技术将其…...
双重for循环优化
项目中有段代码逻辑是个双重for循环,发现数据量大的时候,直接导致数据接口响应超时,这里记录下不断优化的过程,算是抛砖引玉吧~ Talk is cheap,show me your code! 双重for循环优化 1、数据准备2、原始双重for循环3、…...
golang利用go mod巧妙替换使用本地项目的包
问题 拉了两个项目下来,其中一个项目依赖另一个项目,因为改动了被依赖的项目,想重新导入测试一下。 解决办法 go.mod文件的require中想要被代替的包名在replace中进行一个替换,注意:用来替换的需要用绝对路径…...
使用 docker 一键部署 MySQL
目录 1. 前期准备 2. 导入镜像 3. 创建部署脚本文件 4. MySQL 服务器配置文件模板 5. 执行脚本创建容器 6. 后续工作 7. 基本维护 1. 前期准备 新部署前可以从仓库(repository)下载 MySQL 镜像,或者从已有部署中的镜像生成文件&#x…...
MyBatis-Plus 查询PostgreSQL数据库jsonb类型保持原格式
文章目录 前言数据库问题背景后端返回实体对象前端 实现后端返回List<Map<String, Object>>前端 前言 在这篇文章,我们保存了数据库的jsonb类型: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 学习笔记 更多干货 分布式实战(干货)spring cloud 实战(干货)mybatis 实战(干货)spring boot 实战(干货)React 入门实战(干货)构建中小型互联网企业…...
视频做网站背景/厦门百度关键词推广
JOL全称为Java Object Layout,是用来分析JVM中对象布局的工具,它可以帮我们在运行时计算某个对象的大小。 引入JOL依赖,如下: <!-- https://mvnrepository.com/artifact/org.openjdk.jol/jol-core --> <dependency>…...
vultr做网站怎么样/郑州外贸网站推广
这个其实网上很多,一百度一大把,但是网上得都有一个通病导致不成功,我也不知道他们当时是怎们通过的。 前面怎们打开环境变量就不细说了,网上很多。 在添加路径时双击path,j进入编辑页面,然后添加所在python所在的安…...
网站建设与维护考试卷/首页排名优化公司
既上一篇文章之后又看到一篇文章关于教育的,当今日新月异的生活,给我们带来高质的生活的同时也引发了我们深刻的思考。 今天,即使你幽居偏远山沟,通过视频,也可以面对面地和海外朋友对话交流;你要学金融&am…...
做网站公司599/黄页88网络营销宝典
在进行数据解析时,先来看看excel测试数据格式,这里采用接口和测试数据分离的方式,即分为两个sheet页签分别存放接口信息,用例信息excel封装成对象步骤1、导入easypoi的坐标2、加载excel的流对象3、导入参数对象ImportParams4、工具…...