vuejs應用開發先後端分離

咱們知道，不管是web應用仍是app應用都有一個先後端，前端主要負責界面交互，後端負責數據持久化。在正規公司中通常是由兩個團隊來分別完成前端和後端的開發，在小公司或者我的開發的項目中，先後端頗有多是由一我的完成的。可是不管是一我的完成先後端仍是分別由兩個團隊來完成先後端的開發，都存在一個前端和後端交互的問題。通常來講，前端和後端不可能同時就緒，他們分別會對對方有依賴關係。好比前端開發測試時，後端api接口並不存在，或者後端開發時前端也並不存在。這時就須要先後端獨立開發模式了。支持先後端獨立開發最重要的一點就是數據api接口的mock了，對於前端工程師來講，我但願有一個簡化版的後端，能夠支持簡單的crud便可。對於後端工程師來講，他也須要一個相似postman這樣的啞前端充當headless的前端。

本文重點討論針對前端工程師來講如何創造一個可工做的啞後端。

後端模擬通常有幾種方案：本地mock.js，遠程mock服務，好比easy-mock就是一個好用的mock服務。

具體過程，第一步在vuejs開發環境的配置文件中

proxyTable: {
      sencod: {
        target: 'https://cnodejs.org/',     //從網上趴的接口的
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/api') == 0;   //這裏的abc是和後臺商量好=>api
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
      three: {
        target: ' https://easy-mock.com/mock/59d78f3b9d342f449f2fed3a/', //後面介紹這個接口
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/baseapi') == 0;   //這裏的abc是和後臺商量好=>baseapi
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
    },

上述代碼就是告訴vue若是訪問/baseapi這個url，則proxy到easy-mock的url來提供數據。

第2步：在easy-mock網站上建立本身的api接口