美文网首页Vue
vue本地开发mock数据.md

vue本地开发mock数据.md

作者: 唐人不自醉 | 来源:发表于2019-03-02 02:15 被阅读61次

    一、为什么要mock数据?

    VUE项目开发过程中,前后端是完全分离,后端负责提供数据,前端负责数据展示,因此就会存在这种情况:前端需要用到数据接口的时候,后端还没开发出来,此时前端就要挂起吗?当然不是了,我们要解决的就是如何给前端模拟数据?从而实现前后端完成独立开发。

    二、如何mock数据?

    在团队协作过程中,在人员角色分工明确的情况下,我们可以先根据产品功能文档,定义好一份前后端交互的api文档,开发人员可根据api文档独立编码;后端比较简单,按api文档实现相应的接口,并为接口编写单元测试,mock前端请求参数即可;而前端可以引入第三者,mock接口返回结果。

    如何搭建Mock API:

    • 本地json文件
      这是最原始的方法了,直接将接口返回的结果,写死在本地文本文件中,如user.json,这种方式也是可以,只是会污染到我们的代码,到了项目上线的,需要修改代码请求接口;
    • 本地mock api或远程mock api
      本地用mockjs,远程用easymock,这两种都可以,可以非常灵活的模拟真实api请求交互,如:http://mockapi/user模拟http://restapi/user,前后端开发完成后,可以通过修改api host一键切换至我们的api。

    三、webpack本地代理配置

    我们在本地开发的时候,调用远程api,存在ajax跨域请求的问题,此时可通过webpack proxy配置,实现本地请求转发至远程,解决跨域问题。
    找到config/index.js修改proxyTable,如下:

       proxyTable: {
          '/refundApi': {
            target: 'https://easy-mock.com/mock/5af0f80305d45458a763bc65', // 接口的域名
            // secure: false, // 如果是https接口,需要配置这个参数
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
            pathRewrite: {
              '^/refundApi': ''
            }
          }
        },
    

    假如vue的启动端口是8081,即http://localhost:8081,此时请求http://localhost:8081/refundApi/user会转发至https://easy-mock.com/mock/5af0f80305d45458a763bc65/user

    四、mockjs使用

    Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests. 
    The official site: http://mockjs.com
    
    
    • vue安装mockjs
    npm install mockjs
    

    数据模板格式:

    'name|rule': value
    属性名|生成规则: 属性值
    

    定义mock api:

    // mock/user.js
    import Mock from 'mockjs';//es6语法引入mock模块
    Mock.mock('/test/', {
        // 属性 list 的值是一个数组,其中含有5个元素
        'list|5': [{
            'url': '@url'
        }]
    }); 
    

    调用mock api:

    // use in test.vue
    import axios from 'axios'
    import data from '../mock/user.js'
    
    axios.get('/test/').then(function(res){
       var data = res.data;
       console.log(JSON.stringify(data));
    }).catch(function(err){
      console.log(err);
    });
    

    请求成功,输出结果:

    {
        "list": [
            {
                "url": "http://pqibpj.gt/tqreffku"
            },
            {
                "url": "tn3270://huqptk.tv/wejcc"
            },
            {
                "url": "mid://kncn.bt/hpjutggpn"
            }
        ]
    }
    

    五、easymock使用

    mockjs确实可以满足我的需求,不过在无意间发现了easymock,就喜欢上这个工具了,easymock其实就是一个在线的mockjs,提供可视化管理界面,能快速配置api地址,生成模拟数据,而其实接触mockjs那会我就有想基于mockjs自己搭建一个专门的mock api服务,没想到早就有人这么干了。

    并且easymock还基于GPL3.0开放了源码,企业或个人可下载源码进行私有化部署。
    github地址:https://github.com/easy-mock/easy-mock
    在线服务:https://easy-mock.com

    原文:https://blog.csdn.net/vipinchan/article/details/80795948
    版权声明:本文为混迹在Amoy博主原创文章,转载!

    相关文章

      网友评论

        本文标题:vue本地开发mock数据.md

        本文链接:https://www.haomeiwen.com/subject/kvmsuqtx.html