先後臺分離之數據模擬

在先後端分離的項目中，先後端約定好接口之後，就開始進入各自的開發階段了，這時候咱們前端不可避免的就須要進行數據模擬，那麼怎麼進行數據模擬呢？我以爲有兩種：

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未加載修改後的文件，從新啓動試試。

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