前端开发没拿到接口该如何模拟数据呢？_前端开发没有接口怎么办-CSDN博客

本文链接：https://blog.csdn.net/qq_56126374/article/details/120867767

在接口未完成时，开发者可通过本地json文件或Mock工具模拟数据。本文介绍了如何使用Mockjs创建本地模拟数据，并生成json文件。此外，还提及了在线模拟数据工具如Wemock和Easy-Mock，它们提供便捷的线上接口模拟服务，方便前后端协同开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在日常开发过程中后端有时接口还没出来，这个时候我们需要用到数据，那么就需要模拟数据了。

本地json文件：

这种方法很简单，就是新建一个json文件作为数据请求

mock数据

线下

需要下载mockjs

yarn add mockjs -d

根目录下建立mock文件夹，mock下建立index.js

官方文档: http://mockjs.com/

index.js代码

var Mock = require('mockjs')
var fs = require( 'fs' )
var path = require( 'path' )
var data = Mock.mock({
  "banner|4": [
    {
      "id|+1": [ 1, 2, 3, 4],
      "img|+1": [
        "https://s18.mogucdn.com/mlcdn/c45406/190509_55i5fi9lgkbdajd68j8gaji32jkjh_750x300.png_999x999.v1c0.81.webp",
        "https://s2.mogucdn.com/mlcdn/c45406/190225_533fe4d24h6ckfj918j78302dbc98_750x300.jpg_999x999.v1c0.81.webp",
        "https://s2.mogucdn.com/mlcdn/c45406/190509_5b77ajb40141cdf18h0gd2g22k3lg_750x300.jpg_999x999.v1c0.81.webp",
        "https://s11.mogucdn.com/mlcdn/c45406/190411_7i3ic1k8k7hl4hgak2982i3bl18kl_750x300.jpg_999x999.v1c0.81.webp"
      ]
    }
  ]
})
// 输出结果
var result = JSON.stringify(data["banner"], null, 4)

//同过对文件的操作生成数据文件到指定的目录
fs.writeFile( path.join( __dirname, '../public/banner.json' ),result, function( error ) {
  if( error ) throw error 
  console.log( '数据生成成功' )
})

然后node index.js

在这里插入图片描述

接着就public目录下就会生成一个banner.json文件

[
    {
        "id": 1,
        "img": "https://s18.mogucdn.com/mlcdn/c45406/190509_55i5fi9lgkbdajd68j8gaji32jkjh_750x300.png_999x999.v1c0.81.webp"
    },
    {
        "id": 2,
        "img": "https://s2.mogucdn.com/mlcdn/c45406/190225_533fe4d24h6ckfj918j78302dbc98_750x300.jpg_999x999.v1c0.81.webp"
    },
    {
        "id": 3,
        "img": "https://s2.mogucdn.com/mlcdn/c45406/190509_5b77ajb40141cdf18h0gd2g22k3lg_750x300.jpg_999x999.v1c0.81.webp"
    },
    {
        "id": 4,
        "img": "https://s11.mogucdn.com/mlcdn/c45406/190411_7i3ic1k8k7hl4hgak2982i3bl18kl_750x300.jpg_999x999.v1c0.81.webp"
    }
]

然后就可以做请求了