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

時間 2020-05-27

標籤 vue router 單頁應用簡單示例简体版

原文原文鏈接

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

咱們主要來了解一下如下內容：vue

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

模擬服務器返回數據

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

一、準備一個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字段裏的每個對象表示一本書的信息。git

二、「寫接口」

修改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！「接口」就開發完成了。