如何在webpack项目中使用mock服务

2021年03月25日作者:井井客来源:井井客整理

来源于同事做的一次关于前端mock数据的分享,然后抽空瞅了瞅,再参照我觉得一篇不错的文章,整合到了我自己的博客上面~

什么是mock

通俗点讲就是模拟后端接口数据。
在后端接口未完成开发时,借助mock.js,我们搭建mock服务,使之在访问接口(实际接口可能404或报错)时,依然能够返回我们期望的数据。

为了达到期望,我们理所当然需要对ajax进行拦截,而如何操作呢?

借助webpack-dev-server

因为我们在开发模式,使用的是webpack-dev-server,它有提供了一个before配置项,参见以下官方案例。

before(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

表面上的意思就是使用get方法请求'/some/path'接口时,返回一个json结果:{ custom: 'response' }。

相当于为某个后端接口指定其返回数据。而mock.js就是可以生成这样的随机返回数据。

mock的使用

mock.js主要用于生成数据的方法:Mock.mock()。

Mock.mock( rurl?, rtype?, template|function( options ) )

其中最基础的则是Mock.mock(template),数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值(数据模板定义规范):

'name|rule': value

另外也可以通过Mock.Random自带的随机类型生成数据(数据占位符定义规范),并应用在模板上。

@占位符
@占位符(参数 [, 参数])

这块内容比较细,可以参数官方讲解,址址:https://github.com/nuysoft/Mock/wiki/Syntax-Specification,不在此赘述。

综合应用

将webpack与mock结合起来,我们可以走一个基础的案例。

第一步,安装mock

npm install mockjs --save-dev

第二步,在根目录创建mock文件夹,并在该文件夹下创建index.js,内容如下:

// 导入依赖模块
const Mock = require("mockjs");
// 抛出方法
module.exports = function (app) {
    app.post("/api/studentList", function (rep, res) {
        res.json(
            Mock.mock({
                resCode: 100000,
                result: {
                    totle: 5,
                    date: "@date()",
                    "list|5": [{
                        id: "@id()",
                        username: "@cname()",
                        email: "@email()",
                    }]
                }
            })
        );
    });
};

上面是为"/api/studentList"接口(post请求),配置带有5个学生基础信息的列表数据。

第三步,打开webpack.dev.conf.js文件找到devServer处,添加before。

    ......
    devServer: {
        ......
        before: require('../mock')
    },
    ......

完成以上步骤就可以实现,当用post请求"/api/studentList"接口时,返回如下结果:

{
    "resCode":100000,
    "result":{
        "totle":5,
        "date":"1997-05-02",
        "list":[
            {
                "id":"350000198307202229",
                "username":"胡静",
                "email":"e.tnnlora@refq.in"
            },
            {
                "id":"33000019950722786X",
                "username":"邵秀英",
                "email":"p.xyebkdw@skfeb.sn"
            },
            {
                "id":"15000019900806584X",
                "username":"苏明",
                "email":"j.lgxcjf@xchompsh.jm"
            },
            {
                "id":"650000201303297879",
                "username":"陆平",
                "email":"d.xxg@wqyhyy.gn"
            },
            {
                "id":"360000197703018789",
                "username":"汤丽",
                "email":"o.kopmtwtin@mmii.fj"
            }
        ]
    }
}

到这里,应该可以理解如何用mock来拦截接口请求。但是当需要配置的接口较多时,我们要不断的去配置,如何进一步优化,需要借助node中的fs模块。

mock升级用法

理想化,通过创建文件,并以文件在mock文件夹的目录结构+文件名作为接口名,文件内容作为接口下发结果。

mock文件夹下的index.js可以修改为:

// 导入依赖模块
const Mock = require('mockjs');
const fs = require('fs');
const path = require('path');

// 抛出方法
module.exports = function(app) {
    // 找到post文件夹下所有定义的json文件,生成接口mock
    let fileList = jsonFile(path.resolve(__dirname, '../mock/post'));
    for (let path in fileList) {
        app.post(path, function(rep, res) {
            res.json(Mock.mock(fileList[path]));
        });
    }
};

// 整合路径与文件内容,使之关联
function jsonFile(path) {
    let array = [];
    getFile(array, path);
    // 上面获取完文件后,将文件以路径:内容的形式输入
    let obj = {};
    array.forEach(function(file) {
        // 提取路径并获取文件内容放置于对象中
        let interPath = file.match(new RegExp(path + '(.*)\..*'))[1];
        obj[interPath] = JSON.parse(fs.readFileSync(file, 'utf-8'));
    });
    return obj;
}

// 将文件夹下的所有文件添加到数组中
function getFile(array, path) {
    let files = fs.readdirSync(path);
    files.forEach(function(file, index) {
        // 判断是文件夹还是文件,若是文件夹还需往下层找
        console.log(path + file);
        let stat = fs.statSync(path + '/' + file);
        if (stat.isDirectory()) {
            getFile(array, path + '/' + file);
        } else {
            array.push(path + '/' + file);
        }
    });
}

这个是结合我自己项目编写的配置。
因为我都是使用post请求,所以我在mock文件夹下面创建了post文件夹,用于存放请求相关数据。

结合基础方法,再在post文件夹下面创建一个api文件夹,然后在api文件夹下面创建一个studentList.json文件,这时文件路径相当于xxx/post/api/studentList.json,内容为:

{
    "resCode": 100000,
    "result": {
        "totle": 5,
        "date": "@date()",
        "list|5": [{
            "id": "@id()",
            "username": "@cname()",
            "email": "@email()"
        }]
    }
}

当我同之前一样请求/api/studentList接口时,返回的效果也如同之前一样。

如此,便可以通过在post文件下添加文件的方式,添加接口mock了。

文章TAG:webpack

本文标题:如何在webpack项目中使用mock服务
本文链接:http://www.jingjingke.com/c/25373.html

上一篇:webpack打包中css静态资源设置为相对路径
下一篇:TBS Studio调试微信公众号