Nuxt+Express後端api介面配置與實現方式

2020 年 6 月 30 日
筆記
vue框架技術棧

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

啟動後，在瀏覽器地址欄中輸入 //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('//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的介紹。

Tags: vue框架技術棧