簡單的mock數據調試

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

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

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

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

 

方案詳情

一、安裝

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

yarn add json-server --dev、

npm install json-server --save-dev

 

二. 創建mock數據及服務器

1. 在開發環境中創建mock文件夾

2. 在mock文件夾中創建list.json文件，該文件中存放的是自己定義的mock數據

3. 在mock文件夾中創建mock.js，文件內容：

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

4. 配置路由文件,在mock文件夾中創建route.json文件

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

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

 

5.開啟mock數據服務器

在終端中開啟一個服務器，默認端口號為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數據

轉載至https://blog.csdn.net/weixin_34281477/article/details/91379767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase