• 如何Mock数据


    mock 数据的好处

    1. 团队可以并行工作
      有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。

    2. 开启TDD模式,即测试驱动开发
      单元测试是TDD实现的基石,而TDD经常会碰到协同模块尚未开发完成的情况,但是有了mock,这些一切都不是问题。当接口定义好后,测试人员就可以创建一个Mock,把接口添加到自动化测试环境,提前创建测试。

    3. 可以模拟那些无法访问的资源
      比如说,你需要调用一个“墙”外的资源来方便自己调试,就可以自己Mock一个。

    4. 隔离系统
      假如我们需要调用一个post请求,为了获得某个响应,来看当前系统是否能正确处理返回的“响应”,但是这个post请求会造成数据库中数据的污染,那么就可以充分利用Mock,构造一个虚拟的post请求,我们给他指定返回就好了

    5. 可以用来演示
      假如我们需要创建一个演示程序,并且做了简单的UI,那么在完全没有开发后端服务的情况下,也可以进行演示。说到演示了,假如你已经做好了一个系统,并且需要给客户进行演示,但是里面有些真实数据并不想让用户看到,那么同样,你可以用Mock接口把这些敏感信息接口全部替换。

    6. 测试覆盖度
      假如有一个接口,有100个不同类型的返回,我们需要测试它在不同返回下,系统是否能够正常响应,但是有些返回在正常情况下基本不会发生,难道你要千方百计地给系统做各种手脚让他返回以便测试吗?比如,我们需要测试在当接口发生500错误的时候,app是否崩溃,别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock,这一切就都好办了,想要什么返回就模拟什么返回,妈妈再也不用担心我的测试覆盖度了

    如何mock数据

    React

    1.不能再network中获取 (不推荐)

    import Mock from 'mockjs';
    import axiaos from 'axios';
    
    
    Mock.setup({timeout:'100-200'});
    
    
    Mock.mock('/number',{
        data: {
            'data|10': [{ 'name|1': '@ctitle', 'avatar': '@image', 'organization|1.3': '@ctitle'}],
            'page|+1': 1,
            'pers': 10,
            'count|10-1000':10,
            'message': '@MESSAGE',
            'status|10000': 1,
        }
    });
    
    axiaos.get('/data',{},).then(res=>{
        console.log('res',res);
    });

    2.可以在network中获取 (推荐)

    import mockjs from 'mockjs';
    mockjs.Random.extend({
        message: function(date) {
            let message = ['success', 'fail'];
            return this.pick(message);
        },
    });
    export default {
        'POST /api/list': mockjs.mock({
            'data|10': [{ name: '@name', 'status|1-2': 1 }],
            'page|+1': 1,
            'pers': 10,
            'count|10-1000':10,
            'message': '@MESSAGE',
            'status|10000':1,
        }),
        //用户列表
        'POST /api/user/list': mockjs.mock({
            'data|10': [{ 'name|1': '@ctitle', 'avatar': '@image', 'organization|1.3': '@ctitle'}],
            'page|+1': 1,
            'pers': 10,
            'count|10-1000':10,
            'message': '@MESSAGE',
            'status|10000': 1,
        }),
        //作品列表
        'POST /api/works/list': mockjs.mock({
            'data|10': [{
                'user': { 'name|1': '@name', 'avatar': '@image', 'organization|1.3': '@ctitle'},
                'content':'@cparagraph',
                'previewCount|30-1200':1,
                'likeCount|30-1200':1,
                'commentCount|30-1200':1,
            }],
            'page|+1': 1,
            'pers': 10,
            'count|10-1000':10,
            'message': '@MESSAGE',
            'status|10000': 1,
        }),
    };

    使用

    import Http from 'axios';
    import '../../../mock/api' // 这就是上面那个接口文件
    
    
      Http.post('/api/user/list',{dataType:'json'}).then(res=>{
                console.log('让我康康',res);
            })

    HTML:

    1.安装Node.js ,通过http-server开启本地服务器
    获取端口http://localhost:8000
    然后通过在文件夹创建html和json文件来测试数据
    示例:

    //html文件
       <body>
       <script>
        var xhr = new XMLHttpRequest()
        xhr.open('GET','/hello.json',true)
        xhr.send()
        xhr.addEventListener('load',function(){
            var date = xhr.responseText;
            console.log(date)
        })
        </script>
    //json文件
    {
        "name":"jirengu",
        "age":"2"
    }

    我们打开浏览器的控制台就能看到输出的数据


     
    image

    2.通过线上来mock数据

    1. 使用 https://easy-mock.com
    2. 使用 http://rapapi.org/org/index.do

    以第一种为例,进入网站后建立个人项目
    进入项目后通过创建接口


     
    image

    选择接口类型


     
    image

     
    image

     
    内容

    进行创建

    进行查看


     
    image

    控制台结果


     



  • 相关阅读:
    围炉夜话(3)
    围炉夜话(2)
    一步步学习SPD2010--第十一章节--处理母版页(9)--导出母版页
    一步步学习SPD2010--第十一章节--处理母版页(8)--从母版页创建网页
    一步步学习SPD2010--第十一章节--处理母版页(7)--管理Content Placeholders
    一步步学习SPD2010--第十一章节--处理母版页(6)--改变默认母版页
    一步步学习SPD2010--第十一章节--处理母版页(5)--自定义母版页
    一步步学习SPD2010--第十一章节--处理母版页(4)--复制和保存母版页
    一步步学习SPD2010--第十一章节--处理母版页(3)--母版页上使用的控件
    如何使用外部数据列创建SP列表
  • 原文地址:https://www.cnblogs.com/it-Ren/p/12738039.html
Copyright © 2020-2023  润新知