vue-resource

主要內容：

模擬服務端返回數據（須要準備一個data.json的文件來模擬返回的數據 再就是寫接口來請求數據）
用vue-resource向服務器請求數據（須要安裝vue-resource 再就是在main.js中導入並使用 最後就是在相應的vue組件中接收返回的數據）

下邊進行詳細的說明 （PS：本身也是邊學邊記錄 內容難免有些粗糙~~）

首先，先介紹一下什麼是vue-resource，簡單來講，它就是vue的一個與服務器端通訊的HTTP插件，用來從服務器端請求數據。

模擬服務端返回數據

咱們用vue-cli建立的項目中，已經給咱們提供了模擬服務器端返回數據的地方和接口。以下圖所示，在項目目錄的build目錄下，有一個dev-server.js，在這個文件中，咱們就能夠來作一些模擬數據的工做。

一、準備data.json文件（模擬返回數據所使用的）

在項目根目錄下，新建一個data.json。這個文件裏的內容就是咱們要模擬的服務端返回的數據。 他是一個大的json，裏邊相應的有各個字段。（好像這是句廢話，啊哈哈~~）

data.json格式以下：（我模擬的要簡單）

{
  "user": {
    "name": "尼古拉斯趙四",
    "area": "華東區",
    "identity":"管理員"
   },
  "data_center": {
   /*暫時是空的沒有內容*/
  }
}

寫接口

寫接口的話就是先dev-server.js這個文件夾下，大約在19行的var app = express()下邊開始寫你的接口，添加的內容以下：

var appData = require('../data.json')
var user = appData.user;//接口
var dataCenter = appData.data_center;
// API
var apiRouter = express.Router();
apiRouter.get('/user', function (req, res) {
  res.json({
    errno: 0,
    data: user
  });
})
apiRouter.get('/data_center', function (req, res) {
  res.json({
    errno: 0,
    data: dataCenter
  });
})
app.use('/api', apiapiRouter);

簡單介紹一下：首先請求根目錄下的data.json文件，獲取到文件內容並將其賦值給appData變量，而後獲取其中的各個字段數據，（像我模擬的兩個）分別定義變量user、dataCenter來賦值。 以後，經過express提供的Router對象及其一些方法（這裏用的get方法）來設置接口（請求路徑）以及請求成功後的回調函數來處理要返回給請求端的數據。（errno這個相似以js請求中的code值） 最後，咱們要「使用」這個Router對象，爲了統一管理api接口，咱們在要請求的路由前邊都加上‘api/’來代表這個路徑是專門用來提供api數據的。 在這個「接口」中，當咱們訪問「http://localhost:8080/api/user」路徑的時候，就會返回data.json裏的user對象給咱們。