前後臺分離之資料模擬

ma125120發表於2018-07-27

在前後端分離的專案中，前後端約定好介面以後，就開始進入各自的開發階段了，這時候我們前端不可避免的就需要進行資料模擬，那麼怎麼進行資料模擬呢？我覺得有兩種：

  1. 在 客戶端 模擬資料，也就是在我們的前端專案中，使用js手寫或者使用mockjs。使用這種方式的時候，不管怎麼分離，程式碼中都會存在多餘的東西，如獨立開發時使用模擬資料，而前後臺聯調時就要註釋掉之前的模擬資料，這樣來回的切換，開發體驗真的是很不爽有沒有？
  2. 在 伺服器端 模擬資料，我私以為這種應該是更好的方式吧？獨立開發時，將ajax庫的baseurl設定為本機伺服器端的url，而前後端聯調時只需將baseurl改為相應的url即可。這樣只需要簡單的修改baseurl就可以隨意切換所需要的資料了，其他的東西都無需更改，很方便有沒有？

下面就來個小小的demo吧。

假設前後端的介面約定如下： baseurl: http://test.com

獲取使用者列表:

  1. 介面地址： /index/getUserList
  2. 所需引數（GET）：無
  3. 輸出引數說明 | 引數 | 型別 | 引數名說明 | | :-------------: |:-------------:| :-----:| | id| Number| 使用者id | | username | String | 使用者名稱 | | realname | String | 真實姓名|

接下來就可以進行後臺搭建了。

既然是前端，無疑是選擇nodejs作為後臺語言了，框架的話express,koa,thinkjs就隨意了，我就偷下懶用 thinkjs 給大家說一說了。

$ npm install -g think-cli
$ thinkjs new demo;
$ cd demo;
$ npm i; 
$ npm i mockjs --save;
$ npm start
複製程式碼

如此一來，後臺伺服器就已經啟動了。

因為瀏覽器的跨域問題，後臺伺服器還需要設定CORS。在app/controller/base.js中新增以下程式碼：

__before() {
    this.setCORS();
    const isOption = this.isMethod('options');
    if (isOption) {
      this.ctx.json();
      return false;
    }
  }
  setCORS() {
    this.header('Access-Control-Allow-Origin', this.header('origin') || '*');
    this.header('Access-Control-Allow-Headers', 'x-requested-with,token');
    this.header('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');
    this.header('Access-Control-Allow-Credentials', true);
  }
複製程式碼

接下來就是根據介面編寫相應的函式對應介面了，

index/getUserList介面對應的函式為app/controller/index.js檔案中的getUserListAction，

getUserListAction() {
    var data = Mock.mock({
      'arr|3-9': [{
        'id|+1': 1,
        'username': '@email',
        'realname': '@name',
      }]
    });
    return this.ctx.success(data.arr);
  }
複製程式碼

注：thinkjs單模組路由預設最大支援三級路由，多模組路由預設最大支援四級路由。單模組時，兩級路由A/B對應的函式為controller/A.js的BAction函式，三級路由A/B/C對應的函式為controller/A/B.js的CAction函式；多模組可類比。若修改後thinkjs訪問介面報錯，可能是thinkjs未載入修改後的檔案，重新啟動試試。

今天就介紹到這裡了，有問題的歡迎下方進行評論。

相關文章