vue-router單頁應用簡單示例（三）

本文轉載自查看原文 2017-06-16 10:47 1459 vue

用vue-resource向服務器請求數據

我們主要來了解一下以下內容：

模擬服務端返回數據
用vue-resource向服務器請求數據

模擬服務器返回數據

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

1、准備一個data.json文件

在項目根目錄下，新建一個data.json。這個文件里的內容就是我們要模擬的服務端返回的數據。

data.json的內容如下：

{
    "books": [
        { "price": "111.00", "title": "語文", "img": "http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },
        { "price": "123.00", "title": "數學", "img": "http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},
        { "price": "113.00", "title": "英語", "img": "http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},
        { "price": "112.00", "title": "物理", "img": "http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}
    ]
}

這里，books字段里的每一個對象表示一本書的信息。

2、“寫接口”

修改dev-server.js文件，在大概第20行左右的 var app = express()之后，添加上如下內容

var appData = require('../data.json')
var books = appData.books

var apiRoutes = express.Router()
apiRoutes.get('/books', function(req, res){
  res.json({
    data: books
  })
})

app.use('/api', apiRoutes)

簡單說明一下，這段代碼就是通過請求醒目根目錄下的data.json文件，拿到文件的內容並賦值給appData變量，取到里面的books字段內容保存在books變量中。然后，通過express提供的Router對象，以及Router對象的一些方法（這里是get方法）來設置請求的路徑，以及請求成功后的回調函數來處理要返回給請求端的數據。最后，我們要“使用”這個Router對象，為了統一管理api接口，我們在要請求的路由前邊都加上‘api/’來表明這個路徑是專門用來提供api數據的。在這個“接口”中，當我們訪問“http://localhost:8080/api/books”路徑的時候，就會返回data.json里的books對象給我們。

這里我們先來簡單驗證一下是否能成功返回數據，打開命令行，cd到當前項目目錄，運行 npm run dev ，等項目運行成功之后，在瀏覽器地址欄輸入http://localhost:8080/api/books，看到如下圖所示，數據正常返回，OK！“接口”就開發完成了。