Vue项目中用json-server搭建mock服务

Vue项目中用json-server搭建mock服务

1.首先：
nam install json-server —save-dev

2.新增一个mock目录， 用于存放MOCK数据



db.js中的数据格式：

const config = {
    'getSide': getSide
}

module.exports = function () {
    let data = {};

    for (let c in config) {
        if (config.hasOwnProperty(c)) {
            data[c] = config[c]();
        }
    }
    return data;
};

// 返回的数据 （具体结构可以自己调整）
function getSide() {
    return {
        status: 0,
        errno: 0,
        data: {
            banner: _.times(3, function (n) {
                return {
                    auto_id: "10" + n,
                    class: "banner",
                    stime: "2016-12-01",
                    etime: "2018-01-31"
        };
            })
        }
    };
}

routes.json 文件中的内容：

{
    "/api/getSide": "/getSide"
}

3.在devserver中这样配置：

proxy: { //代理服务器
        '/api/*': {
            target: {
                protocol: 'http',
                host: 'localhost',
                port: 9999
            },
            changeOrigin: true,
            secure: true
        }
}

4.在package.json文件中的scripts中加上：

"mock": "json-server mock/db.js --routes mock/routes.json --port 9999",

好了， 如上述执行npm run mock后我们只要将我们请求的路径前面加上/api/xxx, 那么我们就能够使用我们自定义的MOCK数据了