moky = (mock + proxy) // 一個簡潔通用的先後端協做工具

時間 2019-11-08

標籤 moky mock proxy 一個簡潔通用後端工具简体版

原文原文鏈接

舊石器時代，Web 開發並不會去刻意區分先後端，寫後端的人以爲寫數據庫跟寫模板都是應該具有的技能。如今通常須要分先後端，由於大量前端框架和工具鏈的涌入（根源是需求複雜了），讓前端能夠跟後端獨立開來。可是，不管是前端去寫模板，亦或是徹底先後端分離去寫 JSX，都脫離不了與後端進行數據交互。css

以上是本工具產生的動因，咱們暫且將先後端交互的數據分爲模板數據（由後端直接填充）和異步數據（經過 HTTP 接口），工具的做用就是平滑地進行數據交互過渡，下降溝通成本。html

名字由來

在開發前期，後端可能並無開始寫或者沒有寫完，前端此時只能經過本地數據模擬實際數據進行佈局和組件的調試，通常叫作 mock 數據。前端

待前端寫的差很少了，後端可能也差很少了，那麼此時須要聯調，由於聯調的過程極可能伴隨着大量的修復工做，先後端雜糅在一塊兒部署的代價過高，高效的方式就是經過代理的方式直接從模擬數據切到後端數據，這裏叫 proxy。java

若是把 mock 和 proxy 結合起來，那麼就叫 moky !webpack

使用說明

項目的 GitHub 裏面已經簡單的說了下使用方法，不過我以爲仍是有必要補充點額外的說明。git

首先，須要強調的是，moky 側重點只有 mock 和 proxy，所以能夠作到代碼也只有 200 行左右，市場上已經有不少人作這方面工做了，而基本都不能知足個人需求。github

使用跟 webpack 很相似，全局安裝 npm i moky -g ，只須要一個配置文件，而後直接運行在配置文件 moky.config.js 所在目錄運行 moky ，或者經過參數指定配置文件路徑 moky -c /path/to/xxx.jsweb

可是，正確使用前通常須要先配置好 moky.config.js，下面針對配置文件作一個羅嗦的介紹：數據庫

// 這裏之因此須要 path，是由於下面的文件路徑都必須是絕對路徑
var path = require('path');

module.exports = {
  // 本地監聽端口，運行 moky 會起一個 server
  localPort: 3000,
  
  // 異步數據的 mock 目錄路徑
  asyncMockPath: path.join(__dirname, 'mock'),
  
  // 同步數據的 mock 目錄路徑
  viewsMockPath: path.join(__dirname, 'tplMock'),
  
  // 模板所在目錄，若是你是徹底先後端分離，沒有模板，那至少有個 index.html 吧
  // 把這個 index.html 所在的目錄看成模板目錄便可
  viewsPath: path.join(__dirname, 'views'),
  
  // 這個並無卵用，若是有 favicon 仍是設置下吧
  faviconPath: path.join(__dirname, 'public', 'favicon.ico'),
  
  // 這裏不要被 js 和 css 誤導了，這裏是設置靜態資源的路由
  // 注意，其優先級比較高哦，因此不要漏了/多了/跟其它衝突了
  publicPaths: {
    '/css': path.join(__dirname, 'public', 'css'),
    '/js': path.join(__dirname, 'public', 'js'),
  },
  
  // 模板引擎的設置，具體參考 koa-views，moky 已經內置了幾個模板引擎，能夠直接設置就用
  // 注意兩點：若是選擇 freemarker 必定保證 JAVA_HOME 等設置是對的；
  // 若是是純 HTML 頁面，你隨便選個模板引擎便可，推薦 nunjucks
  viewConfig: {
    extension: 'html',
    map: { html: 'nunjucks' },
  },
  
  // 這裏爲了解決不少 Web 容器採用的 Virtual Host 機制（一個 IP:PORT 經過域名對應多個服務）
  // 因爲咱們本地啓動的多是 http://localhost:3000，若是有 Virtual Host 機制則通不過的
  // 若是設置了 hostName，在發送請求前程序會自動替換 Host 頭爲 hostName
  hostName: 'hacker-news.firebaseio.com',
  
  // 這裏是proxy 映射表，在啓動的時候若是是 moky -e dev，異步請求會自動走 dev 對應的 proxy
  // 若是沒找到對應的，那麼默認用本地的 mock 數據做爲異步數據
  proxyMaps: {
    dev: 'https://hacker-news.firebaseio.com',
    local: 'http://localhost:8080',
  },
  
  // 這是頁面路由的設置，這裏的 key 是路由（URL 裏見到的），value 是頁面的相對路徑
  // 路徑相對於 viewsPath , 不用加後綴，viewConfig.extension 指明瞭
  urlMaps: {
    '/': 'index',
    '/page': 'page/index',
  },
}

最簡單的試用就是全局安裝 moky，而後 clone 項目，進入 example 目錄，直接運行 moky

先看下目錄結構：

├── mock
│   ├── get
│   │   ├── test
│   │   │   └── index.json
│   │   └── v0
│   │       └── item
│   │           └── 2921983.json.json
│   └── post
│       └── index.json
├── moky.config.js
├── public
│   ├── css
│   │   └── main.css
│   ├── favicon.ico
│   └── js
│       └── main.js
├── tplMock
│   ├── index.json
│   └── page
│       └── index.json
└── views
    ├── index.html
    └── page
        └── index.html

直接運行 moky 會默認使用 mock 模式，數據流是這樣的：