簡單的mock數據調試

原創

2020-05-21 12:53

我們做前端的，總是得等到後臺接口出來我們才能開始對接口的部分，

會導致開發時間拖長，影響效率，尤其是在外包公司工作的前端來說效率就是生命

出現這種情況時我們可以使用mock數據來模擬後端接口進行測試

此方案一般適用於接口較少、且數據結構簡單、手動定義數據效率更高的情況。
若接口較多，且數據結構十分複雜，使用本方案手動構建mock數據可能會適得其反，在構造mock數據時反而浪費大量時間

方案詳情

一、安裝

本方案使用的是npm中的json-server，需要Node.js環境
項目是使用webpack構建的，以下兩種安裝方式選一種即可

yarn add json-server --dev、

npm install json-server --save-dev

// 引入僞數據
const list = require('./list.json');
 
module.exports = function(){
    return {
        list
    }
}

通過路由文件可以在不更換真實url的基礎上訪問僞數據,文件內容如下：

{
    // key爲真實訪問的url
    // value爲實際的url
    "/api/position/list":"/list"
}

在終端中開啓一個服務器，默認端口號爲3000

在命令行中輸入以下內容

.\node_modules\.bin\json-server ./src/mock/mock.js -r ./src/mock/route.json

可將此命令添加爲腳本，在package.json中配置

"scripts": {
    "json-server": "json-server ./src/mock/mock.js -r ./src/mock/route.json"
  }

配置完成後，在命令行中直接輸入以下代碼即可開啓服務器

yarn json-server

因爲新建了一個服務器，端口號不同，所有會產生跨域問題，前端頁面想到拿到數據，需要在配置文件中配置反向代理

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }
}

mock數據服務和反向代理已全部搭建完成，接下來就可以模擬真實的數據訪問了

js代碼：

// 發送Ajax請求
$.ajax({
  url: '/api/position/list',
  success(result){
    // 打印數據
    console.log(result);
  }
})

至此在前端控制檯中已成功拿到mock數據

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.