react中如何mock数据

1.需求说明

因为前后端分离开发项目,就会存在前端静态页面写好了,后端数据接口还没写好;这时候前端就需要自己定义数据来使用。

定义数据有三种方式:直接写死数据、使用mock软件、json-server工具

这里讲解通过json-server工具来获取数据

2.安装插件

javascript 复制代码
npm i -D json-server

3.新建数据文件

在根目录下新建server文件,该文件夹下新建data.json文件用于存储数据

4.更改项目配置文件

package.json

更改前

javascript 复制代码
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

更改后

javascript 复制代码
"scripts": {
    "start": "react-scripts start & npm run server",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server ./server/data.json --port 8888"
  },

说明:

1.需要同时启动项目和工具,工具启动命令是npm run server,项目启动命令是npm run start

2."server": "json-server ./server/data.json --port 8888"代码意思是,server是启动命令、json-server是工具、./server/data.json是数据源位置、--port 8888是设置端口号

3."start": "react-scripts start & npm run server"的意思是,start是启动命令、react-scripts start不知道是什么、& npm run server是代表同时启动server工具;整行代码就是通过npm run start就同时启动项目和启动server工具

4.启动项目和工具可以分开在两个终端控制台启动,分别在两个终端控制台输入各自的命令就行了;也可以在一个控制终端上通过npm run start,前提是有写"react-scripts start & npm run server"

5.测试

javascript 复制代码
import axios from "axios"
function Home() {
    async function shower() {
        //    const data =  await axios.get('http://localhost:8888/kanno') // 通过axios来请求数据
        const response = await fetch('http://localhost:8888/kanno'); // 通过fetch来请求数据
        const data = await response.json();
        console.log('Data:', data);
    }
    return (
        <div>
            <div>我是home</div>
            <button onClick={shower}>点击请求数据</button>
        </div>
    )
}

export default Home

说明:接口地址来源于使用npm run server启动server工具时

6.最终效果

相关推荐
奇舞精选5 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
小陈phd27 分钟前
langchain从入门到精通(四十一)——基于ReACT架构的Agent智能体设计与实现
react.js·架构·langchain
我命由我1234528 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO28 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了33 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅37 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂1 小时前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅1 小时前
Electron 应用打包全指南
前端·javascript·electron
shushushu1 小时前
Web如何自动播放音视频
前端·javascript
帅夫帅夫1 小时前
前端存储入门:Cookie 与用户登录状态管理
前端·架构