1. 程式人生 > >vue本地開發mock數據.md

vue本地開發mock數據.md

off 數據 get 問題 上線 發出 port ogr value

目錄

  • 一、為什麽要mock數據?
  • 二、如何mock數據?
  • 三、webpack本地代理配置
  • 四、mockjs使用
  • 五、easymock使用

一、為什麽要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
  • vue中使用mockjs
    示例:http://mockjs.com/examples.html

數據模板格式:

‘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

vue本地開發mock數據.md