H5 Mock Server 汇总

小鱼儿 2022-06-02 09:15 179阅读 0赞

什么是Mock Server数据？

简单来讲，就是API （也就是服务器接口）没有写好前提下，前端无法进行调试，Mock Server 就是用来模拟Api接口返回JSON数据的服务！

--------------------

下面介绍 3 种 **mock**处理，同时也有很多第三方的，比如（jsonServer + mockJS、webpack + lorem-ipsum等等）：

#### **1、MockJS** ####

[mockJS官网][mockJS] 或者 [Mock][]

==注意：目前为止 mockJS 不支持 fetch，但是可以跟webpack搭配使用==

基于没有任何打包工具（webpack/gulp/node等），纯静态H5使用，推荐：

mockJS是拦截 ajax 请求再生成随机数据响应的工具！

下面附上简单的demo，方便理解：[gitHub][]

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
            <title>MockJs测试</title>
            <style> #write { width: 50%; height: 100%; min-height: 500px; } </style>
        </head>
    
        <body>
            <h1>MockJS 使用测试</h1>
            <p>结果如下：</p>
            <p><textarea id="write"></textarea></p>
        </body>
        <script src="http://mockjs.com/dist/mock.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
        <script> var obj = { 'aa': '11', 'bb': '22', 'cc': '33', 'dd': '44' }, d = document, g = "querySelector"; // Mock响应模板 Mock.mock('http://AAA.com', { "user|1-3": [{ // 随机生成1到3个数组元素 'name': '@cname', // 中文名称 'id|+1': 88, // 属性值自动加 1，初始值为88 'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型 'birthday': '@date("yyyy-MM-dd")', // 日期 'city': '@city(true)', // 中国城市 'color': '@color', // 16进制颜色 'isMale|1': true, // 布尔值 'isFat|1-2': true, // true的概率是1/3 'fromObj|2': obj, // 从obj对象中随机获取2个属性 'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性 'brother|1': ['jack', 'jim'], // 随机选取 1 个元素 'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果 'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组 }, { 'gf': '@cname' }] }); $.ajax({ url: 'http://AAA.com', type: 'get', dataType: 'json' }).done(function(data, status, xhr) { console.log(data) var str = JSON.stringify(data, null, 4) console.log(str); d[g]("#write").innerHTML = str; }); </script>
    
    </html>

--------------------

#### **2、marmot介绍** ####

[marmot 官方][marmot]

**依赖：**  
\- Node.js 4.0+  
\- JDK 7+

**操作使用分为几步骤：**

1、安装

//window
    npm install -g marmot
    
    //mac
    sudo npm install -g marmot

2、初始化

marmot init

3、启动服务

//启动服务，默认服务8080
    marmot server start
    //指定端口启动服务
    marmot server start -p 8090
    
    
    //关闭服务
    marmot server stop
    //指定端口进行关闭服务
    marmot server stop -p 8090
    
    //移除服务
    marmot server remove
    //移除指定服务
    marmot server remove -p 8090

成功启动服务：如下图：

![图片描述][SouthEast]  
接下来编写 router/mian.xml 文件，文件太多，见 [gitHub][gitHub 1]

操作成功后，可本地查看页面效果：[http://127.0.0.1:8099/index.html][http_127.0.0.1_8099_index.html]

![图片3][3]

4、最后查看启动服务

marmot server list

![图片2][2]

--------------------

**3、Webpack devServer使用**

主要是利用 Webpack devServer proxy 处理

devServer: {
        inline: true, //设置为true，代码有变化，浏览器端刷新。
        open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0)
        port: config.server.port,
        compress: true, //使用gzip压缩
        host: ip.address(), //ip地址，同时也可以设置成是localhost,
        progress: true, //让编译的输出内容带有进度和颜色
        historyApiFallback: true, //回退:支持历史API。
        contentBase: "./", //本地服务器所加载的页面所在的目录
        proxy: {
            'api/**': {
                target: config.server.target, //跨域Ip地址
                pathRewrite: {
       "^/api" : ""},
                secure: false
            },
            '/mock/**': {
                target: `http://${ip.address()}:${config.server.port}/`,
                pathRewrite: {
       "^/mock" : ""},
                changeOrigin: true,
                secure: false
            }
    
        },
    }

使用

axios.post('/news/index', 'type=top&key=123456')
    .then(res => {
        console.log(res);
        that.newsListShow = res.data.articles;
    });

特别的声明下，这里的 `proxy` 的 `target`指向地址为自己，为 请求本地`mock`

--------------------

全部demo：[GItHub][]

[mockJS]: https://github.com/nuysoft/Mock/wiki/Getting-Started
[Mock]: http://highsea90.com/t/mock/
[gitHub]: https://github.com/Rkatsiteli/H5-archiving/tree/master/H5%20Mock%20Server/marmot/mock
[marmot]: https://github.com/evan2x/node-marmot#usage
[SouthEast]: /images/20220602/6adbd65948234adea0be11fe4b41df0a.png
[gitHub 1]: https://github.com/Rkatsiteli/H5-archiving/tree/master/H5%20Mock%20Server/marmot
[http_127.0.0.1_8099_index.html]: http://127.0.0.1:8099/index.html
[3]: /images/20220602/b78235f06ec146f2b7879d027adfa119.png
[2]: /images/20220602/ac7ebcb084ed409ea290f283f06fb59f.png
[GItHub]: https://github.com/Rkatsiteli/H5-archiving/tree/master/H5%20Mock%20Server