前端mock資料初學

2021-09-27 03:34:42 字數 948 閱讀 3875

此方法最為簡便,下圖為easy mock的截圖

例如在@vue/cli專案中,可以在vue.config.js中配置

open: false,

host: '0.0.0.0', // 允許外部ip訪問

port: 8022, // 埠

https: false, // 啟用https

overlay: , // 錯誤、警告在頁面彈出

proxy:

}} // ****配置,用於除錯環境

}

注意:設定反向**需配置不同環境下的baseurl 例如:』/api』設定為開發環境的 設定axios在不同環境下不同的baseurl

npm i mockjs -d 安裝mockjs依賴

建立mock資料夾 index.js中配置mock介面規則

import mock from 'mockjs';

const gettree = require('./data.json')

mock.mock("/strategy/tree", gettree)

main.js中引入

if (process.env.node_env !== 『production』) require(』@/mock』)

缺點: 在瀏覽器中無法看到網路請求,需加入其它配置才可以

vue.config.js中配置

devserver: 

}}));}},

根路徑建立.data資料夾,請求介面對應相應的請求資料夾 例如:'strategy/tree』則對應.data資料夾下的strategy資料夾,tree.json檔案

前端資料請求 及mock

ajax傳送的get請求 ajax ajax傳送的post請求 ajax script 具體 src script 執行 get 請求 axios.get user?id 12345 then function response catch function error 可選地,上面的請求可以這樣做...

前端mock資料,跨域處理

前端模擬資料,我時自己引入乙個後端koa外掛程式,自己讓後端設定資料,傳送乙個api給前端 用的是 react webpack框架 首先後端建立資料 npm i koa koa router d 建立乙個server服務 server.js var router require koa router...

如何mock資料

在之前前後端不分離的情況下,很多時候都要等到後端寫好介面,前端很多功能才 能開發,而前後端分離,前端無需等待,可以與後端並行開發,前端需要的資料 可以mock出來,利用nodejs再生成介面,可以直接呼叫,等後端開發出介面再來 更換。在build的webpack.dev.conf.js裡修改1.匯入...