mock数据 - json-server

JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为请求的数据源。

安装:

npm install json-server --save

创建数据文件:

 

数据文件(外层需要加一层ReportDetail):

{
    "ReportDetail": 
    {
        "errno": 0,
        "errmsg": "success",
        "data": {
            "content": "",
            "roadname": "",
            "contact": "",
            "time": "2020-05-07 15:09",
            "status": "\u5f85\u5b8c\u5584",
            "color": 1,
            "event": "\u7981\u884c\u6807\u5fd7\u62a5\u9519",
            "parent_type": "15",
            "resubmit_flag": 1,
            "supply": 1,
            "image_url": "http://pics5.baidu.com/feed/9a504fc2d562853532e7bec5c61077c1a5ef63d1.jpeg?token=bddb1bc34b845756c0ce20b2580ea57b",
            "audit_detail": [{
                "time": "2020-05-07 15:09",
                "describe": "\u8bf7\u5b8c\u5584\u7167\u7247\u6216\u8005\u8be6\u7ec6\u63cf\u8ff0\u540e\u518d\u6b21\u63d0\u4ea4\u3002"
            }],
            "event_help": 0,
            "useful": 0,
            "useless": 0,
            "video_info": [],
            "life_time": "\u8d85\u8fc71\u5929",
            "display_type": 0,
            "commentlist": [],
            "interact_num": 0,
            "start_point": "12948121,4845160",
            "start_name": "信息路",
            "end_point": "12948432,4845543",
            "end_name": "石化路",
            "point": "12948121,4845160",
            "address": "杏石口路"
        }
    }
}

 在package.json里设置:

"scripts": {
    "dev:mock": "npm run mock & NODE_ENV=dev npm run dev",
    "mock": "json-server --watch src/mock/data.json",
    ......
  },

vue.config.js里需要配置:

module.exports = {
    devServer: {
        proxy: {
            '/mock': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                pathRewrite: {
                    '^/mock': ''
                }
            }
        }
    },
};

请求配置:

ReportDetail: {
        method: 'post',
        url: '/mock/ReportDetail',
},

执行:

nom run dev:mock

响应接口的请求会获取到数据文件里配置的数据。

 

posted @ 2020-09-08 12:05  seeBetter  阅读(264)  评论(0)    收藏  举报