前端模擬數據的方法

在日常開發過程中后端有時接口還沒出來，這個時候我們需要用到數據，那么就需要模擬數據了。

本地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" } ]

然后就可以做請求了

線上

mock除了可以本地使用,還可以線上做數據接口,即遠程模擬

網站入口: https://wemock.cn

常用數據模擬（我也在用）

可以模擬接口，線上，簡答，操作方便

web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。