Nuxt+Express后端api接口配置與實現方式

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的介紹。