Nuxt.js 是一個基於 Vue.js 的輕量級應用框架,可用來建立服務端渲染 (SSR) 應用。本文帶你瞭解在 Nuxt.js 中使用 Express 如何編寫實現後端的 api 介面。

建立介面檔案

在專案根目錄中新建 server 資料夾並在該資料夾下建立一個 index.js 檔案。

server

└── index.js

然後，在 server/index.js 中使用 Express 建立伺服器路由中介軟體，以下建立一個返回字串 ‘Hello World!’ 的簡單介面示例。

const app = require('express')();

app.get('/hello', (req, res) => {
 

  res.send('Hello World!')

})

module.exports = {

  path: 'api',

  handler: app

}

接下來，修改 nuxt.config.js 檔案，在 serverMiddleware 配置項中新增 api 中介軟體。

module.exports = {

  serverMiddleware: [

    // API middleware

    '~/server/index.js'

  ],

}

現在，重啟服務：

npm run dev

啟動後，在瀏覽器位址列中輸入 http://localhost:3000/api/hello 檢視是否成功返回 ‘Hello World!’。

對於如何註冊第三方路由的詳細用法請檢視 nuxt.config.js 配置檔案serverMiddleware屬性的介紹。

在頁面中請求 api 資料

Nuxt.js添加了一種 asyncData 方法，可讓您在初始化元件之前處理非同步操作。asyncData 每次在載入頁面元件之前都會呼叫。此方法將上下文作為第一個引數，您可以使用它來獲取一些資料，Nuxt.js 會將其與元件資料合併。

修改 api/hello 介面，使之返回 JSON 資料。

app.get('/hello', (req, res) => {

  res.json({

    title: 'Hello World!'
 

  })

})

在 pages/index.vue 中請求上面修改完成的 api/hello 介面。

export default {

  asyncData () {

    return fetch('http://localhost:3000/api/hello', { method: 'GET' })

      .then(res => res.json())

      .then(res => {

        // asyncData 方法獲取的資料會與元件資料合併，所以這裡返回物件

        return {

          title: res.title

        }

      })

  }

}

接下來只需在 template 中繫結 title 即可顯示請求返回的資料。

<template>

  <h1>{{ title }}<h1>

</template>

關於非同步獲取資料請移步檔案asyncData的介紹。