最近使用vue-cli做了一個小小的專案，在專案中需要使用vue-resource來與後臺進行資料互動，所以我使用了本地json資料來模仿後臺獲取資料的流程。至於vue-resource的安裝和json的準備我就不贅述了、、、
下面是操作方法：
1、首先介紹一下專案的結構：我將本地的json檔案放在最外層和index.html在一起，姑且叫做db.json。
2、接著在build的dev-server.js進行加入程式碼：

var app = express()

// 新增的、、、、
var appData = require('../db.json');
var sites=appData.sites;
var
 
 notes=appData.notes;
var apiRoutes = express.Router();

apiRoutes.get('/server01',function (req,res) {
  res.json({
    errno:0,
    data:sites
  });//'/server01'是URL要使用的路徑；data:sites則是db.json中物件中的一個小的鍵名（詳見下圖），這兩個名字可以相同也可以不同，但是隻有將data:sites這塊對應json寫對了，才能獲取到json相應的資料塊。（也就是說這一段獲取的不是整個json檔案，而是json檔案中的sites這個鍵的值）
 

});
apiRoutes.post('/server01',function (req,res) {
  res.json({
    errno:0,
    data:sites
  });
});
apiRoutes.get('/notes',function (req,res) {
  res.json({
    errno:0,
    data:notes
  });
});
app.use('/api',apiRoutes);



var compiler = webpack(webpackConfig)

修改好後重新進行cnpm run dev(注意當dev-server.js和db.json改變後都需要進行該步驟，經驗之談)。
下面進行一下解釋：

首先請求根目錄下的db.json檔案，獲取到檔案內容並將其賦值給appData變數，然後獲取其中的各個欄位資料，分別定義變數sites、notes來賦值。之後，通過express提供的Router物件及其一些方法（這裡用的get方法）來設定介面（請求路徑）以及請求成功後的回撥函式來處理要返回給請求端的資料。（errno這個類似以js請求中的code值）最後，我們要“使用”這個Router物件，為了統一管理api介面，我們在要請求的路由前邊都加上‘api/’來表明這個路徑是專門用來提供api資料的。在這個“介面”中，當我們訪問“http://localhost:8080/api/sites”路徑的時候，就會返回db.json裡的sites物件給我們。（摘抄）
3、使用

在vue-cli還可以使用jquery來獲取後臺資料，大家可以自己試一試

-----------------------------更新-----------------------------------------

最近又接觸到了另外一種可以幫助我們在本地模擬服務端返回資料的神器—–json-server
在它的幫助下可以在很短的時間內搭建一個Rest API, 然後就可以讓前端在不依賴後端的情況下進行開發啦！

首先安裝json-server：cnpm install json-server –save-dev

其次根據json-server教程上的example在dev-server.js進行修改，如圖所示：

然後再index.html的目錄下放入db.json
下圖是db.json的內容，json-server和我們上面介紹的方法一樣，它會獲取json中的各個欄位資料，然後對它們進行定義，這樣就可以模擬api 獲取特定的資料。

最後cnpm run dev 開啟http://localhost:8081/（因為我們監聽的是8080旁邊的埠）

下圖是執行結果：

由圖可見，json-server自動的幫我們將json資料分成了多個欄位，點開連結可以讀取相應欄位的內容。

但是在專案中我們還要區分一下，訪問什麼樣的api就會到json-server呢？什麼樣的不能達到，這裡我們就要做一個伺服器代理。
在config的index.js中進行修改就可以了。

同時再回過頭在dev-server.js修改一處小地方

嘿嘿，發現了？apiserver.use(‘/api’,apirouter)，在前面加上一個/api,這也是路徑中需要新增的。

這樣就可以在專案中順利的利用api進行對json-server的訪問了

—————————————-更新—————————————–
（但是在實際的開發中json-server在post時會報錯，所以我們採用新的一種方式express本身來操作，可以實現get和post）
這裡有一篇文章
注意因為在其中要使用到body-parser所以要記得安裝
原理是利用express來啟動我們的apiServer，利用body-parser返回json資料,下圖是在dev-server.js中進行的修改

之後直接使用8080這個埠進行請求：