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

在 客戶端 模擬數據，也就是在我們的前端項目中，使用js手寫或者使用mockjs。使用這種方式的時候，不管怎么分離，代碼中都會存在多余的東西，如獨立開發時使用模擬數據，而前后臺聯調時就要注釋掉之前的模擬數據，這樣來回的切換，開發體驗真的是很不爽有沒有？

在 服務器端 模擬數據，我私以為這種應該是更好的方式吧？獨立開發時，將ajax庫的baseurl設置為本機服務器端的url，而前后端聯調時只需將baseurl改為相應的url即可。這樣只需要簡單的修改baseurl就可以隨意切換所需要的數據了，其他的東西都無需更改，很方便有沒有？

下面就來個小小的demo吧。

假設前后端的接口約定如下： baseurl: http://test.com

獲取用戶列表:

接口地址： /index/getUserList

所需參數（GET）：無

輸出參數說明 | 參數 | 類型 | 參數名說明 | | :-------------: |:-------------:| :-----:| | 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未加載修改后的文件，重新啟動試試。

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

總結

以上是生活随笔為你收集整理的前后台分离之数据模拟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。