react中使用json-server mock數據

我們需要使用json-server創建一個json的服務器，相當於后端，當我們前端使用axios請求數據時，返回接口文檔中對應的字段

最近在項目中需要數據測試，為了方便，直接引入mockjs。

安裝模塊

npm i json-server -g
npm i axios -S

首先在react-app/src下創建mock文件夾

-src
--mock
---mock.json
---route.json
---banner.json // 請求的數據也放在mock文文件中son

banner.json數據示例

{
    "code": "200",
    "message": "獲取輪播圖的數據",
    "data": [{
        "bannerid": "banner_1",
        "img": "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/89951/22/13835/67854/5e64a4b8E84c207d9/7367dad332fe905b.jpg!cr_1125x445_0_171!q70.jpg.dpg",
        "href": "",
        "alt": ""
    },{
        "bannerid": "banner_4",
        "img": "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/93827/39/13300/60640/5e561c60Edd0d8e34/73428f511893f63e.jpg!cr_1125x445_0_171!q70.jpg.dpg",
        "href": "",
        "alt": ""
    }]
}

mock.json

const banner = require('./banner.json');
module.exports = function() {
    return {
        banner
    }
}

route.json,配置路由

{
    "/api/hotcate":"/hotcate",
    "/api/list":"/list",
    "/api/category":"/category"
}

在package.json文件中添加配置

"scripts": {
    "mock": "json-server ./src/mock/mock.js --routes ./src/mock/route.json --port 9000 --watch"
  }// 使用npm run mock開啟json服務器，如下圖即為成功

使用axios請求數據

axios.get('http://localhost:9000/api/banner').then(res => {}) //就能得到數據

可以將axios方法封裝起來，當我們有了后端的數據之后，只需要替換‘http://localhost:9000’就可以了