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接口