提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

H5 Mock Server 汇总

服务
2023-04-18 14:44:04 时间

什么是Mock Server数据？

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

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

1、MockJS

mockJS官网 或者 Mock

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

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

<script src="http://mockjs.com/dist/mock.js"></script>

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 官方

依赖： - 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

成功启动服务：如下图：

接下来编写 router/mian.xml 文件，文件太多，见 gitHub

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

4、最后查看启动服务

marmot server list

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

相关文章